blocks|key|98308|text|表单在ajax请求之后提交。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|98309|<html>
++<head>
++++<script+src="http://code.jquery.com/jquery-1.9.1.js"></script>
++++<script>
++++++$(function+()+{

++++++++$('form').on('submit',+function+(e)+{

++++++++++e.preventDefault();

++++++++++$.ajax({
++++++++++++type:+'post',
++++++++++++url:+'post.php',
++++++++++++data:+$('form').serialize(),
++++++++++++success:+function+()+{
++++++++++++++alert('form+was+submitted');
++++++++++++}
++++++++++});

++++++++});

++++++});
++++</script>
++</head>
++<body>
++++<form>
++++++<input+name="time"+value="00:00:00.00"><br>
++++++<input+name="date"+value="0000-00-00"><br>
++++++<input+name="submit"+type="submit"+value="Submit">
++++</form>
++</body>
</html>|code-block|syntax|javascript|98310|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The form is submitting after the ajax request.</p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      $(function () {

        $('form').on('submit', function (e) {

          e.preventDefault();

          $.ajax({
            type: 'post',
            url: 'post.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });

        });

      });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;form&gt;
      &lt;input name="time" value="00:00:00.00"&gt;&lt;br&gt;
      &lt;input name="date" value="0000-00-00"&gt;&lt;br&gt;
      &lt;input name="submit" type="submit" value="Submit"&gt;
    &lt;/form&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|98312|text|<html>
++<head>
++++<script+src="http://code.jquery.com/jquery-1.9.1.js"></script>
++++<script>
++++++$(function+()+{
++++++++$('form').bind('click',+function+(event)+{
++++++++//+using+this+page+stop+being+refreshing+
++++++++event.preventDefault();

++++++++++$.ajax({
++++++++++++type:+'POST',
++++++++++++url:+'post.php',
++++++++++++data:+$('form').serialize(),
++++++++++++success:+function+()+{
++++++++++++++alert('form+was+submitted');
++++++++++++}
++++++++++});
++++++++});
++++++});
++++</script>
++</head>
++<body>
++++<form>
++++++<input+name="time"+value="00:00:00.00"><br>
++++++<input+name="date"+value="0000-00-00"><br>
++++++<input+name="submit"+type="submit"+value="Submit">
++++</form>
++</body>
</html>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|98313|PHP|unstyled|98314|<?php

if(isset($_POST["date"])+%7C%7C+isset($_POST["time"]))+{
$time="";
$date="";
if(isset($_POST['time'])){$time=$_POST['time']}
if(isset($_POST['date'])){$date=$_POST['date']}

echo+$time."<br>";
echo+$date;
}
?>|98315|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      $(function () {
        $('form').bind('click', function (event) {
        // using this page stop being refreshing 
        event.preventDefault();

          $.ajax({
            type: 'POST',
            url: 'post.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
        });
      });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;form&gt;
      &lt;input name="time" value="00:00:00.00"&gt;&lt;br&gt;
      &lt;input name="date" value="0000-00-00"&gt;&lt;br&gt;
      &lt;input name="submit" type="submit" value="Submit"&gt;
    &lt;/form&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>PHP</p>

<pre><code>&lt;?php

if(isset($_POST["date"]) || isset($_POST["time"])) {
$time="";
$date="";
if(isset($_POST['time'])){$time=$_POST['time']}
if(isset($_POST['date'])){$date=$_POST['date']}

echo $time."&lt;br&gt;";
echo $date;
}
?&gt;
</code></pre>


blocks|key|315195|text|type="button“|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|315196|应该是|315197|type="submit"|code-block|syntax|javascript|315198|entityMap^0|0|C|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p><code>type="button</code>"</p>

<p>should be </p>

<pre><code>type="submit"
</code></pre>


blocks|key|315248|text|这是一个很好的jQuery插件，可以通过ajax提交表单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|315249|http://malsup.com/jquery/form/|offset|length|315250|它就像这样简单：|315251|<script+src="http://malsup.github.com/jquery.form.js"></script>+
<script>+
++++$(document).ready(function()+{+
++++++++$('#myForm').ajaxForm(function()+{+
+++++++++++alert('form+was+submitted');
++++++++});+
++++});+
</script>+|code-block|syntax|javascript|315252|它使用表单操作来定位帖子的位置。这并不是说你不能用你自己的代码来实现这一点，但是这个插件对我来说工作得非常好！|315253|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|U|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|C]]]]

<p>Here is a nice plugin for jQuery that submits forms via ajax: </p>

<p><a href="http://malsup.com/jquery/form/" rel="noreferrer">http://malsup.com/jquery/form/</a></p>

<p>its as simple as:</p>

<pre><code>&lt;script src="http://malsup.github.com/jquery.form.js"&gt;&lt;/script&gt; 
&lt;script&gt; 
    $(document).ready(function() { 
        $('#myForm').ajaxForm(function() { 
           alert('form was submitted');
        }); 
    }); 
&lt;/script&gt; 
</code></pre>

<p>It uses the forms action for the post location.
Not that you can't achieve this with your own code but this plugin has worked very nicely for me!</p>


blocks|key|315272|text|JS代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|315273|<script+type="text/javascript"+src="http://ajax.googleapis.com/ajax/+++libs/jquery/1.3.0/jquery.min.js">
</script>

<script+type="text/javascript"+>
++$(function()+{
++$(".submit").click(function()+{
++var+time+=+$("#time").val();
++var+date+=+$("#date").val();
++var+dataString+=+'time='%2B+time+%2B+'&date='+%2B+date;

if(time==''+%7C%7C+date=='')
{
++$('.success').fadeOut(200).hide();
++$('.error').fadeOut(200).show();
}
else
{
++$.ajax({
++++type:+"POST",
++++url:+"post.php",
++++data:+dataString,
++++success:+function(){
+++++$('.success').fadeIn(200).show();
+++++$('.error').fadeOut(200).hide();
++++}
++});
}
return+false;
});
});
</script>|code-block|syntax|javascript|315274|HTML表单|315275|+++<form>
++++++<input+id="time"+value="00:00:00.00"><br>
++++++<input+id="date"+value="0000-00-00"><br>
++++++<input+name="submit"+type="button"+value="Submit">
++++</form>
<span+class="error"+style="display:none">+Please+Enter+Valid+Data</span>
<span+class="success"+style="display:none">+Form+Submitted+Success</span>
</div>|315276|PHP代码|315277|<?php
if($_POST)
{
$date=$_POST['date'];
$time=$_POST['time'];
mysql_query("SQL+insert+statement.......");
}else+{+}

?>|315278|摘自Here|offset|length|315279|entityMap|0|LINK|mutability|MUTABLE|url|http://www.9lessons.info/2009/04/submit-form-jquery-and-ajax.html^0|0|0|0|0|0|0|2|4|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|16|8|@]|9|@$Q|17|R|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>JS Code</p>

<pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/   libs/jquery/1.3.0/jquery.min.js"&gt;
&lt;/script&gt;

&lt;script type="text/javascript" &gt;
  $(function() {
  $(".submit").click(function() {
  var time = $("#time").val();
  var date = $("#date").val();
  var dataString = 'time='+ time + '&amp;date=' + date;

if(time=='' || date=='')
{
  $('.success').fadeOut(200).hide();
  $('.error').fadeOut(200).show();
}
else
{
  $.ajax({
    type: "POST",
    url: "post.php",
    data: dataString,
    success: function(){
     $('.success').fadeIn(200).show();
     $('.error').fadeOut(200).hide();
    }
  });
}
return false;
});
});
&lt;/script&gt;
</code></pre>

<p>HTML Form</p>

<pre><code>   &lt;form&gt;
      &lt;input id="time" value="00:00:00.00"&gt;&lt;br&gt;
      &lt;input id="date" value="0000-00-00"&gt;&lt;br&gt;
      &lt;input name="submit" type="button" value="Submit"&gt;
    &lt;/form&gt;
&lt;span class="error" style="display:none"&gt; Please Enter Valid Data&lt;/span&gt;
&lt;span class="success" style="display:none"&gt; Form Submitted Success&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>PHP Code</p>

<pre><code>&lt;?php
if($_POST)
{
$date=$_POST['date'];
$time=$_POST['time'];
mysql_query("SQL insert statement.......");
}else { }

?&gt;
</code></pre>

<p>Taken From <a href="http://www.9lessons.info/2009/04/submit-form-jquery-and-ajax.html" rel="noreferrer">Here</a></p>


blocks|key|315298|text|JS代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|315299|++++$("#submit").click(function()+{+
++++//get+input+field+values
++++var+name++++++++++++=+$('#name').val();+
++++var+email+++++++++++=+$('#email').val();
++++var+message+++++++++=+$('#comment').val();
++++var+flag+=+true;
++++/********validate+all+our+form+fields***********/
++++/*+Name+field+validation++*/
++++if(name==""){+
++++++++$('#name').css('border-color','red');+
++++++++flag+=+false;
++++}
++++/*+email+field+validation++*/
++++if(email==""){+
++++++++$('#email').css('border-color','red');+
++++++++flag+=+false;
++++}+
++++/*+message+field+validation+*/
++++if(message=="")+{++
+++++++$('#comment').css('border-color','red');+
++++++++flag+=+false;
++++}
++++/********Validation+end+here+****/
++++/*+If+all+are+ok+then+we+send+ajax+request+to+email_send.php+*******/
++++if(flag)+
++++{
++++++++$.ajax({
++++++++++++type:+'post',
++++++++++++url:+"email_send.php",+
++++++++++++dataType:+'json',
++++++++++++data:+'username='%2Bname%2B'&useremail='%2Bemail%2B'&message='%2Bmessage,
++++++++++++beforeSend:+function()+{
++++++++++++++++$('#submit').attr('disabled',+true);
++++++++++++++++$('#submit').after('<span+class="wait">&nbsp;<img+src="image/loading.gif"+alt=""+/></span>');
++++++++++++},
++++++++++++complete:+function()+{
++++++++++++++++$('#submit').attr('disabled',+false);
++++++++++++++++$('.wait').remove();
++++++++++++},++
++++++++++++success:+function(data)
++++++++++++{
++++++++++++++++if(data.type+==+'error')
++++++++++++++++{
++++++++++++++++++++output+=+'<div+class="error">'%2Bdata.text%2B'</div>';
++++++++++++++++}else{
++++++++++++++++++++output+=+'<div+class="success">'%2Bdata.text%2B'</div>';
++++++++++++++++++++$('input[type=text]').val('');+
++++++++++++++++++++$('#contactform+textarea').val('');+
++++++++++++++++}

++++++++++++++++$("#result").hide().html(output).slideDown();+++++++++++
++++++++++++++++}
++++++++});
++++}
});
//reset+previously+set+border+colors+and+hide+all+message+on+.keyup()
$("#contactform+input,+#contactform+textarea").keyup(function()+{+
++++$("#contactform+input,+#contactform+textarea").css('border-color','');+
++++$("#result").slideUp();
});|code-block|syntax|javascript|315300|HTML表单|315301|<div++class="cover">
<div+id="result"></div>
<div+id="contactform">
++++<p+class="contact"><label+for="name">Name</label></p>
++++<input+id="name"+name="name"+placeholder="Yourname"+type="text">

++++<p+class="contact"><label+for="email">Email</label></p>
++++<input+id="email"+name="email"+placeholder="admin@admin.com"+type="text">

++++<p+class="contact"><label+for="comment">Your+Message</label></p>
++++<textarea+name="comment"+id="comment"+tabindex="4"></textarea>+<br>
++++<input+name="submit"+id="submit"+tabindex="5"+value="Send+Mail"+type="submit"+style="width:200px;">
</div>|315302|PHP代码|315303|if+($_SERVER['REQUEST_METHOD']+==+'POST')+{

//check+if+its+an+ajax+request,+exit+if+not
if+(!isset($_SERVER['HTTP_X_REQUESTED_WITH'])+AND+strtolower($_SERVER['HTTP_X_REQUESTED_WITH'])+!=+'xmlhttprequest')+{

++++//exit+script+outputting+json+data
++++$output+=+json_encode(
++++++++++++array(
++++++++++++++++'type'+=>+'error',
++++++++++++++++'text'+=>+'Request+must+come+from+Ajax'
++++));

++++die($output);
}

//check+$_POST+vars+are+set,+exit+if+any+missing
if+(!isset($_POST["username"])+%7C%7C+!isset($_POST["useremail"])+%7C%7C+!isset($_POST["message"]))+{
++++$output+=+json_encode(array('type'+=>+'error',+'text'+=>+'Input+fields+are+empty!'));
++++die($output);
}

//Sanitize+input+data+using+PHP+filter_var().
$username+=+filter_var(trim($_POST["username"]),+FILTER_SANITIZE_STRING);
$useremail+=+filter_var(trim($_POST["useremail"]),+FILTER_SANITIZE_EMAIL);
$message+=+filter_var(trim($_POST["message"]),+FILTER_SANITIZE_STRING);

//additional+php+validation
if+(strlen($username)+<+4)+{+//+If+length+is+less+than+4+it+will+throw+an+HTTP+error.
++++$output+=+json_encode(array('type'+=>+'error',+'text'+=>+'Name+is+too+short!'));
++++die($output);
}
if+(!filter_var($useremail,+FILTER_VALIDATE_EMAIL))+{+//email+validation
++++$output+=+json_encode(array('type'+=>+'error',+'text'+=>+'Please+enter+a+valid+email!'));
++++die($output);
}
if+(strlen($message)+<+5)+{+//check+emtpy+message
++++$output+=+json_encode(array('type'+=>+'error',+'text'+=>+'Too+short+message!'));
++++die($output);
}

$to+=+"info@wearecoders.net";+//Replace+with+recipient+email+address
//proceed+with+PHP+email.
$headers+=+'From:+'+.+$useremail+.+''+.+"\r\n"+.
++++++++'Reply-To:+'+.+$useremail+.+''+.+"\r\n"+.
++++++++'X-Mailer:+PHP/'+.+phpversion();

$sentMail+=+@mail($to,+$subject,+$message+.+'++-'+.+$username,+$headers);
//$sentMail+=+true;
if+(!$sentMail)+{
++++$output+=+json_encode(array('type'+=>+'error',+'text'+=>+'Could+not+send+mail!+Please+contact+administrator.'));
++++die($output);
}+else+{
++++$output+=+json_encode(array('type'+=>+'message',+'text'+=>+'Hi+'+.+$username+.+'+Thank+you+for+your+email'));
++++die($output);
}|315304|该页面有一个更简单的示例http://wearecoders.net/submit-form-without-page-refresh-with-php-and-ajax/|offset|length|315305|entityMap|0|LINK|mutability|MUTABLE|url|http://wearecoders.net/submit-form-without-page-refresh-with-php-and-ajax/^0|0|0|0|0|0|0|C|22|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|16|8|@]|9|@$Q|17|R|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>JS Code</p>

<pre><code>    $("#submit").click(function() { 
    //get input field values
    var name            = $('#name').val(); 
    var email           = $('#email').val();
    var message         = $('#comment').val();
    var flag = true;
    /********validate all our form fields***********/
    /* Name field validation  */
    if(name==""){ 
        $('#name').css('border-color','red'); 
        flag = false;
    }
    /* email field validation  */
    if(email==""){ 
        $('#email').css('border-color','red'); 
        flag = false;
    } 
    /* message field validation */
    if(message=="") {  
       $('#comment').css('border-color','red'); 
        flag = false;
    }
    /********Validation end here ****/
    /* If all are ok then we send ajax request to email_send.php *******/
    if(flag) 
    {
        $.ajax({
            type: 'post',
            url: "email_send.php", 
            dataType: 'json',
            data: 'username='+name+'&amp;useremail='+email+'&amp;message='+message,
            beforeSend: function() {
                $('#submit').attr('disabled', true);
                $('#submit').after('&lt;span class="wait"&gt;&amp;nbsp;&lt;img src="image/loading.gif" alt="" /&gt;&lt;/span&gt;');
            },
            complete: function() {
                $('#submit').attr('disabled', false);
                $('.wait').remove();
            },  
            success: function(data)
            {
                if(data.type == 'error')
                {
                    output = '&lt;div class="error"&gt;'+data.text+'&lt;/div&gt;';
                }else{
                    output = '&lt;div class="success"&gt;'+data.text+'&lt;/div&gt;';
                    $('input[type=text]').val(''); 
                    $('#contactform textarea').val(''); 
                }

                $("#result").hide().html(output).slideDown();           
                }
        });
    }
});
//reset previously set border colors and hide all message on .keyup()
$("#contactform input, #contactform textarea").keyup(function() { 
    $("#contactform input, #contactform textarea").css('border-color',''); 
    $("#result").slideUp();
});
</code></pre>

<p>HTML Form</p>

<pre><code>&lt;div  class="cover"&gt;
&lt;div id="result"&gt;&lt;/div&gt;
&lt;div id="contactform"&gt;
    &lt;p class="contact"&gt;&lt;label for="name"&gt;Name&lt;/label&gt;&lt;/p&gt;
    &lt;input id="name" name="name" placeholder="Yourname" type="text"&gt;

    &lt;p class="contact"&gt;&lt;label for="email"&gt;Email&lt;/label&gt;&lt;/p&gt;
    &lt;input id="email" name="email" placeholder="admin@admin.com" type="text"&gt;

    &lt;p class="contact"&gt;&lt;label for="comment"&gt;Your Message&lt;/label&gt;&lt;/p&gt;
    &lt;textarea name="comment" id="comment" tabindex="4"&gt;&lt;/textarea&gt; &lt;br&gt;
    &lt;input name="submit" id="submit" tabindex="5" value="Send Mail" type="submit" style="width:200px;"&gt;
&lt;/div&gt;
</code></pre>

<p>
PHP Code</p>

<pre><code>if ($_SERVER['REQUEST_METHOD'] == 'POST') {

//check if its an ajax request, exit if not
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {

    //exit script outputting json data
    $output = json_encode(
            array(
                'type' =&gt; 'error',
                'text' =&gt; 'Request must come from Ajax'
    ));

    die($output);
}

//check $_POST vars are set, exit if any missing
if (!isset($_POST["username"]) || !isset($_POST["useremail"]) || !isset($_POST["message"])) {
    $output = json_encode(array('type' =&gt; 'error', 'text' =&gt; 'Input fields are empty!'));
    die($output);
}

//Sanitize input data using PHP filter_var().
$username = filter_var(trim($_POST["username"]), FILTER_SANITIZE_STRING);
$useremail = filter_var(trim($_POST["useremail"]), FILTER_SANITIZE_EMAIL);
$message = filter_var(trim($_POST["message"]), FILTER_SANITIZE_STRING);

//additional php validation
if (strlen($username) &lt; 4) { // If length is less than 4 it will throw an HTTP error.
    $output = json_encode(array('type' =&gt; 'error', 'text' =&gt; 'Name is too short!'));
    die($output);
}
if (!filter_var($useremail, FILTER_VALIDATE_EMAIL)) { //email validation
    $output = json_encode(array('type' =&gt; 'error', 'text' =&gt; 'Please enter a valid email!'));
    die($output);
}
if (strlen($message) &lt; 5) { //check emtpy message
    $output = json_encode(array('type' =&gt; 'error', 'text' =&gt; 'Too short message!'));
    die($output);
}

$to = "info@wearecoders.net"; //Replace with recipient email address
//proceed with PHP email.
$headers = 'From: ' . $useremail . '' . "\r\n" .
        'Reply-To: ' . $useremail . '' . "\r\n" .
        'X-Mailer: PHP/' . phpversion();

$sentMail = @mail($to, $subject, $message . '  -' . $username, $headers);
//$sentMail = true;
if (!$sentMail) {
    $output = json_encode(array('type' =&gt; 'error', 'text' =&gt; 'Could not send mail! Please contact administrator.'));
    die($output);
} else {
    $output = json_encode(array('type' =&gt; 'message', 'text' =&gt; 'Hi ' . $username . ' Thank you for your email'));
    die($output);
}
</code></pre>

<p>This page has a simpler example
<a href="http://wearecoders.net/submit-form-without-page-refresh-with-php-and-ajax/" rel="noreferrer">http://wearecoders.net/submit-form-without-page-refresh-with-php-and-ajax/</a></p>


blocks|key|98452|text|在事件处理中，将事件的对象传递给函数，然后添加语句，即event.preventDefault()；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|98453|这将在不刷新的情况下将数据传递到网页。|98454|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>In event handling, pass the object of event to the function and then add statement i.e.
event.preventDefault();</p>

<p>This will pass data to webpage without refreshing it.  </p>


blocks|key|98461|text|$(document).ready(function(){
$('#userForm').on('submit',+function(e){
++++++++e.preventDefault();
//I+had+an+issue+that+the+forms+were+submitted+in+geometrical+progression+after+the+next+submit.+
//+This+solved+the+problem.
++++++++e.stopImmediatePropagation();
++++//+show+that+something+is+loading
++++$('#response').html("<b>Loading+data...</b>");

++++//+Call+ajax+for+pass+data+to+other+place
++++$.ajax({
++++type:+'POST',
++++url:+'somephpfile.php',
++++data:+$(this).serialize()+//+getting+filed+value+in+serialize+form
++++})
++++.done(function(data){+//+if+getting+done+then+call.

++++//+show+the+response
++++$('#response').html(data);

++++})
++++.fail(function()+{+//+if+fail+then+getting+message

++++//+just+in+case+posting+your+form+failed
++++alert(+"Posting+failed."+);

++++});

++++//+to+prevent+refreshing+the+whole+page+page
++++return+false;

++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|98462|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$(document).ready(function(){
$('#userForm').on('submit', function(e){
        e.preventDefault();
//I had an issue that the forms were submitted in geometrical progression after the next submit. 
// This solved the problem.
        e.stopImmediatePropagation();
    // show that something is loading
    $('#response').html("&lt;b&gt;Loading data...&lt;/b&gt;");

    // Call ajax for pass data to other place
    $.ajax({
    type: 'POST',
    url: 'somephpfile.php',
    data: $(this).serialize() // getting filed value in serialize form
    })
    .done(function(data){ // if getting done then call.

    // show the response
    $('#response').html(data);

    })
    .fail(function() { // if fail then getting message

    // just in case posting your form failed
    alert( "Posting failed." );

    });

    // to prevent refreshing the whole page page
    return false;

    });
</code></pre>


blocks|key|98466|text|<script+src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script+type="text/javascript"+>
++$(function+()+{
++++$(".submit").click(function+(event)+{
++++++var+time+=+$("#time").val();
++++++var+date+=+$("#date").val();
++++++var+dataString+=+'time='+%2B+time+%2B+'&date='+%2B+date;
++++++console.log(dataString);
++++++if+(time+==+''+%7C%7C+date+==+'')
++++++{
++++++++$('.success').fadeOut(200).hide();
++++++++$('.error').fadeOut(200).show();
++++++}+else
++++++{
++++++++$.ajax({
++++++++++type:+"POST",
++++++++++url:+"post.php",
++++++++++data:+dataString,
++++++++++success:+function+(data)+{
++++++++++++$('.success').fadeIn(200).show();
++++++++++++$('.error').fadeOut(200).hide();
++++++++++++$("#data").html(data);
++++++++++}
++++++++});
++++++}
++++++event.preventDefault();
++++});
++});
</script>
<form+action="post.php"+method="POST">
++<input+id="time"+value=""><br>
++<input+id="date"+value=""><br>
++<input+name="submit"+type="button"+value="Submit"+class="submit">
</form>
<div+id="data"></div>
<span+class="error"+style="display:none">+Please+Enter+Valid+Data</span>
<span+class="success"+style="display:none">+Form+Submitted+Success</span>

<?php

print_r($_POST);
if+($_POST['date'])+{
++$date+=+$_POST['date'];
++$time+=+$_POST['time'];
++echo+'<h1>'+.+$date+.+'---'+.+$time+.+'</h1>';
}
else+{

}
?>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|98467|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" &gt;
  $(function () {
    $(".submit").click(function (event) {
      var time = $("#time").val();
      var date = $("#date").val();
      var dataString = 'time=' + time + '&amp;date=' + date;
      console.log(dataString);
      if (time == '' || date == '')
      {
        $('.success').fadeOut(200).hide();
        $('.error').fadeOut(200).show();
      } else
      {
        $.ajax({
          type: "POST",
          url: "post.php",
          data: dataString,
          success: function (data) {
            $('.success').fadeIn(200).show();
            $('.error').fadeOut(200).hide();
            $("#data").html(data);
          }
        });
      }
      event.preventDefault();
    });
  });
&lt;/script&gt;
&lt;form action="post.php" method="POST"&gt;
  &lt;input id="time" value=""&gt;&lt;br&gt;
  &lt;input id="date" value=""&gt;&lt;br&gt;
  &lt;input name="submit" type="button" value="Submit" class="submit"&gt;
&lt;/form&gt;
&lt;div id="data"&gt;&lt;/div&gt;
&lt;span class="error" style="display:none"&gt; Please Enter Valid Data&lt;/span&gt;
&lt;span class="success" style="display:none"&gt; Form Submitted Success&lt;/span&gt;

&lt;?php

print_r($_POST);
if ($_POST['date']) {
  $date = $_POST['date'];
  $time = $_POST['time'];
  echo '&lt;h1&gt;' . $date . '---' . $time . '&lt;/h1&gt;';
}
else {

}
?&gt;
</code></pre>


blocks|key|98469|text|<div+class="container">
+++++++<div+class="row">
++++++++<div+class="col-md-3+col-sm-6+col-xs-12"></div>enter+code+here
++++++++++<div+class="col-md-6+col-sm-6+col-xs-12">
++++++++++<div+class="msg"></div>
++++++++++++<form+method="post"+class="frm"+id="form1"+onsubmit="">
+++++++++++++++<div+class="form-group">
+++++++++++++++<input+type="text"+class="form-control"+name="fname"+id="fname"+placeholder="enter+your+first+neme"+required>
+++++++++++
++++++++++</div>
++++++++<div+class="form-group">
+++++++++++++++<input+type="text"+class="form-control"+name="lname"+id="lname"+placeholder="enter+your+last+neme"+required>
++++++++++++++
+++++++++++++</div>
++++++++++++++<div+class="form-group">
+++++++++++++++<input+type="text"+class="form-control"+name="email"+id="email"+placeholder="enter+your+email+Address"+required>
++++++++++++++
+++++++++++++</div>
+++++++++++++<div+class="form-group">
+++++++++++++++<input+type="number"+class="form-control"+name="mno"+id="mno"+placeholder="enter+your+mobile+number"+required>
++++++++++++++
+++++++++++++</div>
++++++++++++++<div+class="form-group">
+++++++++++++++<input+type="password"+class="form-control"+name="pass"+id="pass"+pattern="(?=.*[a-z])(?=.*[A-Z]).{4,8}"+placeholder="enter+your+Password"+required>
++++++++++++++
+++++++++++++</div>
++++++++++++++<div+class="radio">
+++++++++++++++&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input+type="radio"+value="male"+name="gender"+id="gender"+checked>male<br>
+++++++++++++++&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input+type="radio"+value="female"+name="gender"+id="gender">female<br>
+++++++++++++++&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input+type="radio"+value="other"+name="gender"+id="gender">other<br>
+++++++++++++++++++++++++++++++++++++++++
+++++++++++++</div>
++++++++++++++++<div+class="checkbox">
++++++++++++++++++&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input+type="checkbox"+name="check"+id="check"+checked>I+Agree+Turms&Condition<br>
+++++++++++++++++++
+++++++++++++++++</div>
+++++++++++++++++<input+type="submit"++class="btn+btn-warning"+name="submit"+id="submit">
+++++++++++++</form>enter+code+here

++++++++++</div>
+++++++++++++++<div+class="col-md-3+col-sm-6+col-xs-12"></div>
+++++++++</div>+

++++</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|98470|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;div class="container"&gt;
       &lt;div class="row"&gt;
        &lt;div class="col-md-3 col-sm-6 col-xs-12"&gt;&lt;/div&gt;enter code here
          &lt;div class="col-md-6 col-sm-6 col-xs-12"&gt;
          &lt;div class="msg"&gt;&lt;/div&gt;
            &lt;form method="post" class="frm" id="form1" onsubmit=""&gt;
               &lt;div class="form-group"&gt;
               &lt;input type="text" class="form-control" name="fname" id="fname" placeholder="enter your first neme" required&gt;
           &lt;!--&gt;&lt;span class="sp"&gt;&lt;?php// echo $f_err;?&gt;&lt;/span&gt;&lt;!--&gt;
          &lt;/div&gt;
        &lt;div class="form-group"&gt;
               &lt;input type="text" class="form-control" name="lname" id="lname" placeholder="enter your last neme" required&gt;
              &lt;!--&gt;&lt;span class="sp"&gt;&lt;?php// echo $l_err;?&gt;&lt;/span&gt;&lt;!--&gt;
             &lt;/div&gt;
              &lt;div class="form-group"&gt;
               &lt;input type="text" class="form-control" name="email" id="email" placeholder="enter your email Address" required&gt;
              &lt;!--&gt;&lt;span class="sp"&gt;&lt;?php// echo $e_err;?&gt;&lt;/span&gt;&lt;!--&gt;
             &lt;/div&gt;
             &lt;div class="form-group"&gt;
               &lt;input type="number" class="form-control" name="mno" id="mno" placeholder="enter your mobile number" required&gt;
              &lt;!--&gt;&lt;span class="sp"&gt;&lt;?php //echo $m_err;?&gt;&lt;/span&gt;&lt;!--&gt;
             &lt;/div&gt;
              &lt;div class="form-group"&gt;
               &lt;input type="password" class="form-control" name="pass" id="pass" pattern="(?=.*[a-z])(?=.*[A-Z]).{4,8}" placeholder="enter your Password" required&gt;
              &lt;!--&gt;&lt;span class="sp"&gt;&lt;?php //echo $p_err;?&gt;&lt;/span&gt;&lt;!--&gt;
             &lt;/div&gt;
              &lt;div class="radio"&gt;
               &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="radio" value="male" name="gender" id="gender" checked&gt;male&lt;br&gt;
               &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="radio" value="female" name="gender" id="gender"&gt;female&lt;br&gt;
               &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="radio" value="other" name="gender" id="gender"&gt;other&lt;br&gt;
                                         &lt;!--&gt;&lt;span class="sp"&gt; &lt;?php //echo $r_err;?&gt;&lt;/span&gt;&lt;!--&gt;
             &lt;/div&gt;
                &lt;div class="checkbox"&gt;
                  &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="checkbox" name="check" id="check" checked&gt;I Agree Turms&amp;Condition&lt;br&gt;
                   &lt;!--&gt;&lt;span class="sp"&gt; &lt;?php //echo $c_err;?&gt;&lt;/span&gt;&lt;!--&gt;
                 &lt;/div&gt;
                 &lt;input type="submit"  class="btn btn-warning" name="submit" id="submit"&gt;
             &lt;/form&gt;enter code here

          &lt;/div&gt;
               &lt;div class="col-md-3 col-sm-6 col-xs-12"&gt;&lt;/div&gt;
         &lt;/div&gt; 

    &lt;/div&gt;
</code></pre>


<p>Can anyone tell me why this bit of code isn't working?</p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      $(function () {
        $('form').bind('submit', function () {
          $.ajax({
            type: 'post',
            url: 'post.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
          return false;
        });
      });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;form&gt;
      &lt;input name="time" value="00:00:00.00"&gt;&lt;br&gt;
      &lt;input name="date" value="0000-00-00"&gt;&lt;br&gt;
      &lt;input name="submit" type="button" value="Submit"&gt;
    &lt;/form&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>When I push submit nothing happens. In the receiving php file I'm using $_POST['time'] and $_POST['date'] to put the data in a mysql query but it's just not getting the data. Any suggestions? I'm assuming it's something to do with the submit button but I can't figure it out</p>


Form submit with AJAX passing form data to PHP without page refresh

jQuery

有人能告诉我为什么这段代码不能工作吗？<html>  <head>    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>    <script>      $(function () {        $('form').bind('subm...

问使用AJAX提交表单，无需刷新页面即可将表单数据传递给PHP
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用AJAX提交表单，无需刷新页面即可将表单数据传递给PHPEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用AJAX提交表单，无需刷新页面即可将表单数据传递给PHP
EN