CODEWITHSUNDEEP
javascriptphpjqueryajax
apaul
apaul

Reputation: 308

Stop page reload after submitting a value to PHP via Post

When I tried using other methods, either it did not stop the reload or the button stopped functioning. I have to POST data to php, which will perform actions to it. However, due to the page reload, the input value is applied to the new set of data, not the old one it was submitted on. The old data is replaced with new data randomly after the page reloads. Is there a way to stop the page reload using php? Here are some of the ways I tried:

1.

<script type="text/javascript">
     $('#form').submit(function () {
       $.post("header_html.php",$("#form").serialize(), function(data){            
     });
    return false;
    });
        </script>
  <!--html-->
  <form id="form" action="index.php">
        <input  style="width:200;margin-top:5px" type="text" class="form-control" id="code" name="installer2_code" placeholder="Enter Code">      
        <input type="submit" style="margin-top:5px" name="installer2_btn" class="btn btn-success" id="form" value="Enter" id="formbtn">
            </form>

2:

 $("#formbtn").click(function(){
   $.ajax({

method: "POST",

url: "index.php",

data: { name: $('#code').val()}

})

.done(function( msg ) {

alert( "Data Saved: " + msg );

});
})

<!--HTML-->
 <form id="form">
                <input  style="width:200;margin-top:5px" type="text" class="form-control" id="code" name="installer2_code" placeholder="Enter Code">


         <input type="button" style="margin-top:5px" name="installer2_btn" 
 class="btn btn-success" id="form" 
value="Enter" id="formbtn">
            </form>

Another method was the following but it stopped the button functionality. 

 function sendForm(e){
        e.preventDefault();
    }

Method #4: 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    $("#formbtn").click(function(e){
       e.preventDefault();
       $.ajax({
           method: "POST",
           url: "index.php",
           data: { name: $('#code').val()}
       })
       .done(function( msg ) {
           alert( "Data Saved: " + msg );
       });
    });

    </script>

HTML: 

<form id="form">
    <input  style="width:200;margin-top:5px" type="text" class="form-control" id="code" name="installer1_code" placeholder="Enter Code">
    <input type="submit" id="formbtn" style="margin-top:5px" name="installer1_btn" class="btn btn-success" value="Enter">
</form>

PHP:

  $code_input = strip_tags($_POST['name']);
  return false;

Thanks for your help. I am open to any input.

Upvotes: 1

Views: 1978

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

In your first example

1st : you set two ids to input

<input type="submit" style="margin-top:5px" name="installer2_btn" class="btn btn-success" id="form" value="Enter" id="formbtn">

you need to remove id="form" from input

2nd : you need to use e.preventDefault() like

<script type="text/javascript">
     $('#form').submit(function (e) {
       e.preventDefault();
       var Form_data = $("#form").serialize();
       $.post("header_html.php", {Form_data : Form_data}, function(data){
          alert(data);          
       });
    });
</script>

and in php 

<?php
  $form_data = $_POST['Form_data'];
?>

Personally .. while using form .. I prefer to use form submit event instead of input click event

$(document).ready(function(){
  $('#form').submit(function (e) {
     e.preventDefault();
     var Form_data = $(this).serialize();
     alert(Form_data);
     /*$.post("header_html.php",$("#form").serialize(), function(data){
       alert(data);
     });*/
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--html-->
<form id="form" action="index.php">
    <input  style="width:200;margin-top:5px" type="text" class="form-control" id="code" name="installer2_code" placeholder="Enter Code">      
    <input type="submit" style="margin-top:5px" name="installer2_btn" class="btn btn-success" value="Enter" id="formbtn">
 </form>

In your second code

1st : you set two ids to input

<input type="submit" style="margin-top:5px" name="installer2_btn" class="btn btn-success" id="form" value="Enter" id="formbtn">

you need to remove id="form" from input

2nd : you need to use e.preventDefault() like

$("#formbtn").click(function(e){
   e.preventDefault();
   $.ajax({
       method: "POST",
       url: "index.php",
       data: { name: $('#code').val()}
   })
   .done(function( msg ) {
       alert( "Data Saved: " + msg );
   });
});

And while you using url: "index.php", that mean you pass the data to/from same page ... you'll need to use return false; in php .. so in index.php

<?php
   if(isset($_POST['name'])){
       echo ($_POST['name']);
       return false;
   }
?>


$(document).ready(function(){
  $("#formbtn").click(function(e){
     e.preventDefault();
     var code = $('#code').val();
     alert(code);
     /*$.ajax({
         method: "POST",
         url: "index.php",
         data: { name: $('#code').val()}
     })
     .done(function( msg ) {
         alert( "Data Saved: " + msg );
     });*/
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--html-->
<form id="form" action="index.php">
    <input  style="width:200;margin-top:5px" type="text" class="form-control" id="code" name="installer2_code" placeholder="Enter Code">      
    <input type="submit" style="margin-top:5px" name="installer2_btn" class="btn btn-success" value="Enter" id="formbtn">
 </form>

Important: be sure that jquery included

Upvotes: 1

Related Questions