简体   繁体   中英

how to clear form after submit the form and pass the data to php file without reloading page

how to clear form after submit the form and pass the data to php file without reloading page...the form data is pass the php file and it stored the data base.but i was unable to clear the form data after submit the form.if i reset the form using javascrip but data not pass the data base.if i pass the data to php the form is not clear.is there a way for me achive both target?thank you.. here my snipt code...

<iframe name="votar" style="display:none;"></iframe>     
<form action="confirm.php" id="sfm" method="POST" target="votar">
<input type="text" placeholder="Name" name="name" value="" required/>
<input type="submit" value="Submit My Project " />
</form>

Using AJAX you can do this.

$('#submitBtn').click(function () {
       $.ajax({
          url: 'confirm.php',
          data: $('#sfm').serialize(),
          type: "post",
          success: function (data) {
            $('input[type="text"]').val('');
          }
       });
       return false;
   });

you can try this

in index.php

  <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: 'get',
            url: 'ajax.php',
            data: $('form').serialize(),
            success: function (data) {
              $('#name').val('');
              alert('data');
              //your return value in data
            }
          });

        });

      });
    </script>
  </head>
  <body>
    <form action="ajax.php" id="sfm" method="POST" target="votar">
        <input type="text" placeholder="Name" name="name" id="name" value="" required/>
        <input type="submit" value="Submit My Project " />
    </form>
  </body>
</html>

and in ajax.php

<?php
$name = $_GET['name'];
//do what you want to do using name
echo "what you need to return";

Have you thought about to use Ajax to handle the form submit?

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

提交并保存表单后,尝试使$_POST数组为空

$_POST='';

You can do like this, first get form inputs value and then reset

You can also able to reset after success response

 $(function () { $('form').on('submit', function (e) { e.preventDefault(); var that = $(this); var params = that.serialize(); that.get(0).reset(); console.log(params); $.ajax({ type: 'GET', url: 'submit.php', data: params, success: function (data) { console.log(data); } }); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="confirm.php" id="sfm" method="POST" target="votar"> <input type="text" placeholder="Name" name="name" value="" required/> <input type="submit" value="Submit My Project " /> </form> 

SERVER SIDE

<?php
 $name = $_GET['name'];
 echo 'success';
 exit();
?>

After getting success response you can clear form input

   $('#sfm').submit(function () {
   var form = $(this);
   $.ajax({
      url: 'phpfile.php',
      data: form.serialize(),
      type: "POST",
      success: function (data) {
        $('input[type="text"]').val('');
      }
   });
   return false;
 });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM