[XHTML] Jquery och formulär, hur göra?
Hejsan.
Jag håller på med en uppgift i skolan där jag ska skapa ett formulär och lägga in en JQuery-effekt då man skickar iväg informationen. Mitt formulär är väldigt simpelt och jag har lagt in felmeddelanden då man försöker skicka iväg det innan formuläret är färdigfyllt, om det är ett invalid namn, epost etc. Men nu vill jag lägga på en simpel JQuery-effekt på min knapp men har ingen som helst koll på hur jag ska lyckas med det.
Jag inkluderar mitt Jquery-script
<script type="text/javascript">
$(document).ready(function() {
var $marginLefty = $('#slidemarginleft div.inner');
$marginLefty.css({
marginLeft: $marginLefty.outerWidth() + 'px',
display: 'block'
});
$('#slidemarginleft button').click(function() {
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() : 0
});
});
});
</script>
Mitt formulärscript
<h2> Kontaktformulär</h2>
<form name="personal" action="#" onsubmit="return checkscript()">
<p>Namn: <input type="text" size="20" name="name" /></p>
<p>E-post: <input type="text" size="20" name="email" /></p>
<p>Meddelande: <input type="text" size="20" name="msg" /></p>
<p><input type="submit" value="Skicka"/></p>
</form>
<div class="slide" id="slidemarginleft">
<button>Skicka (jquery)</button>
<div class="inner">Din ansökan har kommit in. Tack för din medverkan!</div>
</div>
Där är koden till mitt simpla formulär, första knappen är min Submitknapp som reagerar på alla event jag har bundit till den. Den andra är min JQuery-knapp som endast har effekten bunden till sig. Nu vill jag alltså kombinera knapparna men jag är inte van vid JQuery-språket.
Skulle vara tacksam om någon kunde hjälpa mig.
Mitt Javascript som jag har i en enskild fil som jag kallar på
function checkscript() {
emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
alphaExp = /^[a-zA-Z ]+$/;
namnet = document.personal.name.value;
epost = document.personal.email.value;
meddelande = document.personal.msg.value;
if (namnet == "") {
alert('namnet är tomt');
return false;
}
else if (alphaExp.test(namnet) == false) {
alert('Namnet får inte innehålla siffror eller tecken!');
return false;
}
else if (epost == "") {
alert('E-posten är tom');
return false;
}
else if (emailExp.test(epost) == false) {
alert('E-posten är ogiltig');
return false;
}
else if (meddelande == "") {
alert('Du skrev inget meddelande');
return false;
}
else if (meddelande != "") {
alert('Vi har mottagit din ansökan!');
return false;
}
return true;
}
