html - jQuery form validation not kicking in -
i have written following code form tries post if javascript not being found?
the code within <head>
of document:
<script language="javascript" type="text/javascript"> $('.entrysend').click(function(e){ e.preventdefault(); var error = false; var name = $('#name').val(); var address = $('#address').val(); var phone = $('#phone').val(); var email = $('#email').val(); if(name.length == 0){ var error = true; alert("please complete fields"); } if(address.length == 0){ var error = true; alert("please complete fields"); } if(phone.length == 0){ var error = true; alert("please complete fields"); } if(email.length == 0){ var error = true; alert("please complete fields"); } if(error == false){ $.post("compthanks.asp", $(".entry").serialize(), function(result){ if($.trim(result) == 'sent'){ $('.entrysend').remove(); alert("thanks entering!"); } } </script>
html:
<form class="entry" action="compthanks.asp" method="post" class="floatclear" name="entryform"> <br class="floatclear" /> <div class="formwrapper"> <input name="name" id="name" type="text" placeholder="fullname" /> </div> <div class="formwrapper"> <textarea name="address" id="address" placeholder="address" cols="20" rows="10"></textarea> </div> <div class="formwrapper"> <input name="phone" id="phone" type="text" placeholder="contactnumber" /> </div> <div class="formwrapper"> <input name="email" id="email" type="text" placeholder="email" /> </div> <div class="formwrapper floatclear"> <input name="submit" type="submit" value="send entry" class="entrysend" /> </div> </form>
can point out reason why form still submits opposed javascript kicking in?
if js in <head>
of page, won't work. when add
$('.entrysend').click(function(e){...});
there no element class of entrysend
on page yet.
to fix that, have 2 options:
move js bottom of page, after
<form>
element.wrap js in
ready
handler:
js:
$(document).ready(function() { $('.entrysend').click(function(e){...}); });
this way, jquery wait until html has been added dom before trying attach click handler entrysend
element.
update:
i added code jsfiddle , noticed have js errors in code posted. might copy/paste error, might cause of issue:
you never close half of functions. end 2 curly braces, close last function
block. need add )}})
, of js
- a
)
close$.post
- a
}
closeif(error == false)
- a
}
close anonymous function inclick
handler - a
)
close click handler
new js:
<script language="javascript" type="text/javascript"> $(document).ready(function() { $('.entrysend').click(function(e){ e.preventdefault(); var error = false; var name = $('#name').val(); var address = $('#address').val(); var phone = $('#phone').val(); var email = $('#email').val(); if(name.length == 0){ var error = true; alert("please complete fields"); } if(address.length == 0){ var error = true; alert("please complete fields"); } if(phone.length == 0){ var error = true; alert("please complete fields"); } if(email.length == 0){ var error = true; alert("please complete fields"); } if(error == false){ $.post("compthanks.asp", $(".entry").serialize(),function(result){ if($.trim(result) == 'sent'){ $('.entrysend').remove(); alert("thanks entering!"); } }); } }); }); </script>
Comments
Post a Comment