CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
vinod jaiswal
vinod jaiswal

Reputation: 89

insert query with ajax without reloading whole page

I want to insert data through AJAX (without reload page). I tried but it is not showing data and also reload page.

I have a file first.php (in which, form is present), a AJAX code and a firstcall.php where query will be execute.

My first.php (html form) is:

<form  class="reservation-form mb-0" action="" method="post"  autocomplete="off">
<input name="name1" id="name1" class="form-control"  type="text" placeholder="Enter Name" required aria-required="true">
<input name="age" id="age" class="form-control" required  type="number" placeholder="Enter Age" aria-required="true">
<input type="checkbox" id="checkbox" class="checkbox1" name="namec[]" value="<?php echo $value['id']; ?>" >
<input type="submit" class="pull-right btn btn-warning" value="Submit" id="submit">
 </form>

Here data should be display:

<div class="col-md-5">
 <div class="panel panel-primary" id="showdata">

</div>      
</div>

AJAX is:

<script type="text/javascript">
$(document).ready(function(){
 $("#submit").click(function(){
    var name1 = $("#name1").val();
    var age = $("#age").val();

    var chkArray=[];
    $('.checkbox1:checked').each( function() {               
    chkArray.push($(this).val());    
    } );
    var selected;
    selected = chkArray.join(',') ;

    if(selected.length > 1){
    $.ajax( {
    url:'firstcall.php',
    type:'POST',
    data:{name1: name1,age: age,namec: chkArray},
     }).done(function(data){
      $("#showdata").html(data);
         });

        }
            else{
    alert("Please at least one of the checkbox");   
 }
 }  
 }  

</script>

firstcall.php is:

<div class="panel panel-primary" id="showdata">
<?php 
foreach($_POST['namec'] as $selected){
echo $selected;
$_SESSION['name1']=$_POST["name1"];
$_SESSION['age']=$_POST["age"];

echo $name1=$_SESSION['name1'];
echo $age=$_SESSION['age'];

$query=mysql_query("insert into patient_details (p_name,p_age,g_number) values ('$name1','$age','$selected')") or die(mysql_error());
}
?>

Upvotes: 1

Views: 2744

Answers (2)

Neji Soltani
Neji Soltani

Reputation: 1511

The submit button will automatically reload the page on click so the solution is either change the button type to button or add preventDefault to the click event

$("#submit1,#submit2").click(function() {
  alert('form submited')
})
$("#submit3").click(function(e) {
  e.preventDefault();
  alert('form submited')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  this will reload the page
  <input type="submit" class="pull-right btn btn-warning" value="Submit" id="submit1">
</form>

<form>
  this will not reload the page
  <input type="button" value="Submit" id="submit2">
</form>


<form>
  this will not reload the page
  <input type="submit" value="Submit" id="submit3">
</form>

Upvotes: 1

Vladimir
Vladimir

Reputation: 1391

After $("#submit").click(function(event){ add command 

event.preventDefault();

And your page will not be reloaded

Upvotes: 3

Related Questions