Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET Javascript HTML Ajax , +
Dear Experts,
 
I have a doubt in HTML5 asp.net
 
 

 <form action="#" method="post" id="commentform" onsubmit="return false">
		<p class="comment-form-author">Name *<input id="author" name="author" type="text" value="" size="30" aria-required="true" required="required" /></p>
        <p class="comment-form-email">Email<input id="email" name="email" type="text" value="" size="30" /></p>
		
		<p class="comment-form-rating"><label for="rating">Rating</label>
        <select name="rating" id="rating" required="required">
		    <option value="">Rate&hellip;</option>
			<option value="5">Perfect</option>
			<option value="4">Good</option>
			<option value="3">Average</option>
			<option value="2">Not that bad</option>
			<option value="1">Very Poor</option>
		</select>
        </p>
			     
	   
        <p class="form-submit">		
        <input name="submit" type="submit" id="submit" value="Submit Review" />	
         
		</p>
	</form>
 

 
 

On the above code i have set a required HTML5 validation on "author" input also the "select"
 

 

 
$(document).ready(function () {
 
    $("#submit").click(function () {
 
        var _rating = document.getElementById('rating').options[document.getElementById('rating').selectedIndex].value;
        var _author = document.getElementById('author').value;
        var _email = document.getElementById('email').value;
        var _comment = document.getElementById('comment').value;
 

        var data = [
           {
               "_author": _author, "_email": _email, "_rating": _rating, "_comment": _comment
           }];
 

        $.ajax(
             {
                 type: "POST",
                 url: "Item_desc.aspx/Save_Comment",
                 dataType: "json",
                 data: JSON.stringify({ Cust_Comments: data }),
                 contentType: "application/json; charset=utf-8",
                 success: function (json) {
 
                    
 
                 }
 
             });
 

 

         });
 
});
 

 

And i have used Ajax JSON for sending datas to the code behind in asp.net.....
 
But when i click the button then the validation will catch but it also fire the the click event and send the values to the code behind....
 
I need to stop fire the click event when the validation catches...
 
Thanks
 
Dileep
Posted 24-May-13 21:51pm
dilzz1.2K
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Try this:
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 

    <title></title>
 
    <script type='text/javascript'>
 

var btnClick =function () {
 

        var _rating = document.getElementById('rating').options[document.getElementById('rating').selectedIndex].value;
        alert(_rating);
        var _author = document.getElementById('author').value;
        var _email = document.getElementById('email').value;
 
        if(_author!="" && _rating!="Rate" && _rating!="")
       {
            alert("fdgg");
            var data = [
               {
                   "_author": _author, "_email": _email, "_rating": _rating
               }];
 

            $.ajax(
                 {
                     type: "POST",
                     url: "Item_desc.aspx/Save_Comment",
                     dataType: "json",
                     data: JSON.stringify({ Cust_Comments: data }),
                     contentType: "application/json; charset=utf-8",
                     success: function (json) {
 
                        alert("dgsjhgdfdjhg");
 
                     }
 
                 });
 

 }else
 {
 return false;
 
 }
 
    return true;
 
};
 

 
</script>
 
</head>
<body>
 
 <form action="#" method="post" id="commentform" onsubmit="return false">
        <p class="comment-form-author">Name *<input id="author" name="author" type="text" value="" size="30" aria-required="true" required="required" />
 

        </p>
        <p class="comment-form-email">Email<input id="email" name="email" type="text" value="" size="30" /></p>
 
        <p class="comment-form-rating"><label for="rating">Rating</label>
        <select name="rating" id="rating" required="required">
            <option value="">Rate&hellip;</option>
            <option value="5">Perfect</option>
            <option value="4">Good</option>
            <option value="3">Average</option>
            <option value="2">Not that bad</option>
            <option value="1">Very Poor</option>
        </select>
        </p>
 

        <p class="form-submit">
        <input name="submit" type="submit" id="submit" value="Submit Review" onclick="btnClick();" />
 
        </p>
    </form>
 
</body>
</html>
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

Try this
$('#submit').click(function(){
if($("form")[0].checkValidity()) {
//your form execution code
}else console.log("invalid form");
});
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 584
1 Maciej Los 275
2 DamithSL 233
3 Sergey Alexandrovich Kryukov 209
4 BillWoodruff 200
0 OriginalGriff 6,803
1 Sergey Alexandrovich Kryukov 6,377
2 DamithSL 5,421
3 Manas Bhardwaj 4,841
4 Maciej Los 4,330


Advertise | Privacy | Mobile
Web02 | 2.8.1411023.1 | Last Updated 25 May 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100