Form submit with AJAX passing form data to PHP wit

2018-12-31 14:25发布

站内文章 / PHP
59 0 0

问题:

Can anyone tell me why this bit of code isn\'t working?

<html>
  <head>
    <script src=\"http://code.jquery.com/jquery-1.9.1.js\"></script>
    <script>
      $(function () {
        $(\'form\').bind(\'submit\', function () {
          $.ajax({
            type: \'post\',
            url: \'post.php\',
            data: $(\'form\').serialize(),
            success: function () {
              alert(\'form was submitted\');
            }
          });
          return false;
        });
      });
    </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=\"button\" value=\"Submit\">
    </form>
  </body>
</html>

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

回答1:

The form is submitting after the ajax request.

<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>


回答2:

<html>
  <head>
    <script src=\"http://code.jquery.com/jquery-1.9.1.js\"></script>
    <script>
      $(function () {
        $(\'form\').bind(\'click\', function (event) {

event.preventDefault();// using this page stop being refreshing 

          $.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>

PHP

<?php


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

echo $time.\"<br>\";
echo $date;
?>


回答3:

JS Code

<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=\'+ time + \'&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;
});
});
</script>

HTML Form

   <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>

PHP Code

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

?>

Taken From Here



回答4:

Here is a nice plugin for jQuery that submits forms via ajax:

http://malsup.com/jquery/form/

its as simple as:

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

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!



回答5:

JS 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+\'&useremail=\'+email+\'&message=\'+message,
            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\">\'+data.text+\'</div>\';
                }else{
                    output = \'<div class=\"success\">\'+data.text+\'</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();
});

HTML Form

<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>

PHP 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\' => \'error\',
                \'text\' => \'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\' => \'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);
}

This page has a simpler example http://wearecoders.net/submit-form-without-page-refresh-with-php-and-ajax/



回答6:

type=\"button\"

should be 

type=\"submit\"


回答7:

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

This will pass data to webpage without refreshing it.



回答8:

$(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;

    });


回答9:

<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=\' + time + \'&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();
    });
  });
</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 {

}
?>


标签： php jquery ajax forms serialization
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~