How to pass the values to php script using ajax?

Question

I have written a code to pass values of input fields to a php script using ajax but it is not working. Can anyone suggest how to rectify this code ? I want to display the values passed through ajax in the php file.

ex.php

<?php
$temp = $_POST['start_date'];
$name = $_POST['end_date'];
echo $temp.$name;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">


$(document).ready(function(){


$("input").change(function(){

  var fname = $("#fname").val();
   var lname = $("#lname").val();

   $.ajax({
   method: "POST",
   url: "ex.php", // path to php file
    data: { start_date: fname, end_date: lname } // send required data here
  })
  .done(function( msg ) {

  }); 


  });

  });

 </script>
 </head>
 <body>
 <form action="#" method="post" name="form1">
 <input type="text" name="fname" id="fname"/>
 <input type="text" name="lname" id="lname"/>
 </form>
 </body>
 </html>

It seems that you don't know the concept of AJAX yet. Though, this will still work. — rmondesilva
– rmondesilva, Commented Jul 21, 2016 at 5:33

Ankush Gautam · Accepted Answer · 2016-07-21 05:37:12Z

try using below code :
<?php
$temp = $_POST['start_date'];
$name = $_POST['end_date'];
echo $temp.$name;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">


$(document).ready(function(){


$("input").change(function(){


  var fname = $("#fname").val();
   var lname = $("#lname").val();

var post = "&start_date=" + fname + "&end_date=" + lname;

   $.ajax({
                        'url': ex.php,
                        'data': post,
                        'type': 'POST',
                        'success': function (data)
                        {

                        }
                    });

  });

  });

 </script>
 </head>
 <body>
 <form action="" method="post" name="form1">
 <input type="text" name="fname" id="fname"/>
 <input type="text" name="lname" id="lname"/>
 </form>
 </body>
 </html>

Adrian Brand · Accepted Answer · 2016-07-21 05:31:12Z

0

Add an element to your makeup

<span id="idOfSomeElementYouWantToUse"></span>

and in your callback set it's text.

.done(function( msg ) {
    $("#idOfSomeElementYouWantToUse").text(msg);
});

answered Jul 21, 2016 at 5:31

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

1 Comment

anna sujith Over a year ago

I wanted to insert both values of input boxes into the database.. for that i wanted to store both the values into php variables.

madalinivascu · Accepted Answer · 2016-07-21 05:36:00Z

Add a div to your page and use html() to append the data that comes from the ajax request

 <body>
 <form action="#" method="post" name="form1">
 <input type="text" name="fname" id="fname"/>
 <input type="text" name="lname" id="lname"/>
 </form>
 <div class="ajax-result"></div>
 </body>

js:

$("input").change(function(){

  var fname = $("#fname").val();
   var lname = $("#lname").val();

   $.ajax({
    method: "POST",
    url: "other_file.php", // path to php file
    data: { start_date: fname, end_date: lname }, // send required data here
    success:function(data){
     $(',ajax-result').htm(data);
     }
  });

Note: from what i can tell you are ajaxing to the same page,i strongly suggest you create a new php file(other_file.php) with your logic in it

Prashant · Accepted Answer · 2016-07-21 06:37:37Z

From what I can understand from your comment above, you want to insert textbox value to the database, to do this you don't want to call ajax on textChange event because at that time not all value will be present, I suggest adding submit button to the form and call ajax on form submit.

Here is the main file:

ajax_ex.php (You should name it as per your requirement)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Untitled Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
  <form id="frmInsert" method="post" name="form1">
    <input type="text" name="fname" id="fname"/>
    <input type="text" name="lname" id="lname"/>
    <input type="submit" value="Insert" />
  </form>
  <div id="msg">

  </div>
</body>

<!-- You should put javascript at bottom -->
<script   src="jQuery-2.1.4.min.js"></script>
<script type="text/javascript">

  $("#frmInsert").submit(function(e){
    var fname = $("#fname").val();
    var lname = $("#lname").val();

    $.ajax({
    method: "POST",
    url: "insert.php", // path to php file
      data: { start_date: fname, end_date: lname } // send required data here
    })
    .done(function( msg ) {
      msg = $.trim(msg);
      if (msg == 'true') {
        $('#msg').html("Data is inserted successfully");
      }else {
        $('#msg').html("Data insertion failed");
      }
    });

    e.preventDefault(); 
  });

And you should not call the same file in ajax, I recommend that you create individual file that will be called in ajax, this file will handle all back-end processing.

insert.php

<?php

//Check if post data is available (You should also check for particular attribute if it is available)
if (!empty($_POST)) {
  $temp = $_POST['start_date'];
  $name = $_POST['end_date'];

  //Insert Data into database
  // Your code
  $result = 'true'; //check for operation if it is success and store it in result

  //Echo result so you can check if insert is success of not in your ajax callback.
  echo $result;
}

?>

Collectives™ on Stack Overflow

How to pass the values to php script using ajax?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related