Ok so I have this code to submit form to php without reloading page.
It works perfectly, and makes sense.

form.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
    <title>JQuery Form Example</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#myform").validate({
            debug: false,
            rules: {
                name: "required",
                email: {
                    required: true,
                    email: true
                }
            },
            messages: {
                name: "Please let us know who you are.",
                email: "A valid email will help us get in touch with you.",
            },
            submitHandler: function(form) {
                // do other stuff for a valid form
                $.post('process.php', $("#myform").serialize(), function(data) {
                    $('#results').html(data);
                });
            }
        });
    });
    </script>
    <style>
    label.error { width: 250px; display: inline; color: red;}
    </style>
</head>
<body>
<form name="myform" id="myform" action="" method="POST">  
<!-- The Name form field -->
    <label for="name" id="name_label">Name</label>  
    <input type="text" name="name" id="name" size="30" value=""/>  
    <br>
<!-- The Email form field -->
    <label for="email" id="email_label">Email</label>  
    <input type="text" name="email" id="email" size="30" value=""/> 
    <br>
<!-- The Submit button -->
    <input type="submit" name="submit" value="Submit"> 
</form>
<!-- We will output the results from process.php here -->
<div id="results"><div>
</body>
</html>

process.php

<?php
    print "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>";
?>

Now, is there anyway I can not use teh form validation as I don't really need it. Just need it to submit without page refresh.

Cheers !

Recommended Answers

All 8 Replies

try:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
	<title>JQuery Form Example</title> 
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
	$(function(){
		$('#myform').bind('submit',function(){
				$.post('process.php', $("#myform").serialize(), function(data) {
					$('#results').html(data);
				});
		});
	})
	</script>
</head>
<body>
<form name="myform" id="myform" action="" method="POST">  
<!-- The Name form field -->
    <label for="name" id="name_label">Name</label>  
    <input type="text" name="name" id="name" size="30" value=""/>  
	<br>
<!-- The Email form field -->
    <label for="email" id="email_label">Email</label>  
    <input type="text" name="email" id="email" size="30" value=""/> 
	<br>
<!-- The Submit button -->
	<input type="submit" name="Submit" value="Submit"> 
</form>
<!-- We will output the results from process.php here -->
<div id="results"><div>
</body>
</html>

I used this but when I puss submit button twice it send same data again,and same data is written twice. I can't solve this.

Try adding in something like this to the $.post success function (add an id 'submit' to the submit button):

$('#submit').remove();
$('#myform').append('Thanks for submitting');

This will take the submit button away once the data has been posted.

thanks your help xylude! but I used the code from http://www.mkyong.com/jquery/how-to-disable-submit-button-after-clicked-with-jquery/ , it is working at firefox correctly but it didn't work any others (chrome, opera, İE) I can't find where is mistake. in other browsers is seen and freezing that "Form submiting....." and nothing.

<html>
<head>
	<title></title> 
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="jquery.validate.min.js"></script>

	<script type="text/javascript">
	$(document).ready(function(){
	
		$("#myform").validate({

			debug: false,
			rules: {
				poster: "required",
				mails: "required",				
			
			},
			messages: {
				poster: "",
				mails: "",	
								
			},
			submitHandler: function(form) {
				$.post('deneme_mailer.php', $("#myform").serialize(), function(data) {				
					$('#results').html(data);
					$('input:submit').removeAttr("disabled");
					
				});
			
			}
				
		});

		
	});	 	
	



function update() {
  $.get("bilgi.php", function(data) {
    $("#some_div").html(data);
   
  });
}
setInterval( "update()", 2000);

 </script>

	
	<style type="text/css">
<!-- 
	.submit{
	padding-top:140px;
      font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	  font-size: 10px;
	  color : #ff6600;
	text-align: center; 
	
	}

//-->
</style>

</head>
<body>
<form name="myform" id="myform" action="" method="POST">
<table class="sample" width="800" height="400" border="1" cellpadding="5" cellspacing="0">
	<tr>
		<td colspan="3">
		<div id="some_div" name="some_div" style="text-align: center;height : 100px;overflow:hidden"></div>
		</td>
	</tr>
	<tr>
		<td rowspan="4" align="center" width="250" height="350">
			<div id="results" style="border: 1px solid #000000;vertical-align:text-top;text-align: left; width : 200px; height : 300px; background : #ffffff; padding : 4px; overflow : auto; ">
			<p></p>
			</div>	
			<input type="submit" id="submit" name="gonder" value="SEND!" ></input>
		
		</td>
		<th>E-mails</th>
		<td height="150" colspan="2" align="center" valign="top">
			<textarea name="mails" id="mails" rows="6" cols="53">			

			</textarea>		
		</td>
	</tr>
	<tr>
		<th>Posters</th>
		<td  height="30" colspan="2" align="left">
			<input type="radio" name="poster" id="poster" value="0" checked /> poster-1
		</td>
	</tr>
	<tr>
		<th></th>
		<td  height="30" colspan="2" align="left">


		</td>
	</tr>

	<tr><th></th>	
		<td align="left" valign="top">

	</td>

	</tr>
</table>
</form>
<script type="text/javascript">
 
$('input:submit').click(function(){
	$('p').text("Form submiting.....").addClass('submit');
	$('input:submit').attr("disabled", true);	
});
 
</script>




</body>
</html>

I used this but when I puss submit button twice it send same data again,and same data is written twice. I can't solve this.

On the example I posted, you just need to disable the button on the callback function:

<script type="text/javascript">
	$(function(){
		$('#myform').bind('submit',function(){
				$.post('process.php', $("#myform").serialize(), function(data) {
					$('#results').html(data);
                                        $("#Submit").attr("disabled","disabled");
				});
		});
	})
	</script>

...it is working at firefox correctly but it didn't work any others (chrome, opera, İE)...

Never use name="submit" and/or id="submit" on any element, although it is OK if you use an uppercase "S". So change: <input type="submit" id="submit" name="gonder" value="SEND!" ></input> to: <input type="submit" id="Submit" name="gonder" value="SEND!" ></input> and INSTEAD of: $('input:submit').attr("disabled", true); use: $('#Submit').attr("disabled", "disabled");

hielo, thank you very much! I changed them and now working.

Need Help

<?php
$body = 
    "
    1. Question one:{$q1}\n
    2. Question two:{$q2}\n
    3. Question three:{$q3}\n
    4. Question four:{$q4}\n
    5. Question five:
        a. Part 1:{$q5a}
        b. Part 2:{$q5b}\n\n
    6. Comments: {$Comments} \n


    Name:{$name}\n
    Email :{$email}\n
    Mobile:{$mobile}
    ";
?>
Just wanna add different colors in different questions and answers so when i receive email i can easily can discribe questions and answers. Thanks

Hi, Could you please assist me, how to upload jpg image using php FILE using this ajax method ???

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.