Trying to get value from textbox in AJAX and sending it to the new page

Question

Having issues pulling the values put in a textbox with ajax and posting them to another .php file. Ive done this once before with a checkbox but wasn't able to duplicate my results. Here is the code for the text boxes in questions.

<div align = "right">
    <div class = ='text'>
    <span style="float:right;"><strong> Status Report Date</strong> 


    <label for="from">From</label>
    <input type="text" id="from" name="from">
    <label for="to">to</label>
    <input type="text" id="to" name="to">
    <div id="dates"></div>

These are my date picker boxes since I attached a datepicker script to them but figured they act as normal text-boxes.

Here is the script for grabbing values from the textboxes

 $(document).ready(function(){  
    $('input[type="text"]').click(function(){  
       var from = $(this).val();  
       $.ajax({  
            url:"sortByDates.php",  
            method:"POST",  
            data:{text:text},  
            success:function(data){  
                 $('#dates').html(data);  
            }  
       });  
      });  
 });   
 </script>

Here is the .php file I am trying to send the values to.

   <?php
    if (isset($_GET['pageSubmit'])) {
   $firstDate= $_POST['from'];
$lastDate= $_POST['to'];

   echo $firstDate;
   echo $lastDate;

  }

score 1 · Accepted Answer · answered Apr 10 '19 at 05:23

1

I think you lost your focus... Check this code out

<div alight = "right">
<div class='text'>
<span ><strong> Status Report Date</strong> 
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
<div id="dates"></div>
<button id="submit">click</button>

Jquery

<script>
 $(document).ready(function(){  
    $('#submit').click(function(){  
        var from = $('#from').val();  
        var to = $('#to').val(); 
         ps = "submit";




     $.ajax({  
            url:"sortByDates.php",  
            method:"POST",  
            data:{pageSubmit: ps,from:from, to: to},  
            success:function(data){  
                 $('#dates').html(data);  
            }  
       });  
      });  
 });

php script

<?php
   if (isset($_POST['pageSubmit'])) {
        $firstDate= $_POST['from'];
        $lastDate= $_POST['to'];
        echo $firstDate;
        echo $lastDate;

  }
?>

answered Apr 10 '19 at 05:23

Md. Mohaiminul Hasan

311
2
8

This almost worked! the first date gets passed correctly but the second value gets lost though and doesn't assign a value – Johnson Main Apr 10 '19 at 05:35
wasn't able to get both textboxes passed through to the php file. Only when i click on the first textbox am i able to send that value. The second textbox does not send a value – Johnson Main Apr 10 '19 at 05:49
You could send first textbox value like you wanted to.. but it will throw you an error.. because the post action php file needs two data field but you are sending it one field which is "from"... But you can send 1st value as you want.. by change this $('#from').on(function(){ or $('#from').change(function(){ – Md. Mohaiminul Hasan Apr 10 '19 at 06:01
Im sorry could you format your text clearer. Im not all familar with ajax – Johnson Main Apr 10 '19 at 06:05
check w3schools.com .. they simply the best in tutorial at beginner level.. In ajax "data:{pageSubmit: ps,from:from, to: to}, " this line means the data you send to the page... here pageSubmit, from, to are variable name (before : ) and after colon(:) are value for each variable... – Md. Mohaiminul Hasan Apr 10 '19 at 06:27
https://www.w3schools.com/js/js_ajax_intro.asp , https://stackoverflow.com/questions/6085649/how-to-send-multiple-data-fields-via-ajax read this.. hope this will help you – Md. Mohaiminul Hasan Apr 10 '19 at 06:29

score 0 · Answer 2 · edited Apr 10 '19 at 05:49

0

The variable "text" you use in the section {text:text} is undefined. So therefore no data will be sent.

Other than that there are other problems here, do you want both values to be sent? Your code doesn't look like it supports that. Are you sure you want this to occur when the user clicks the textbox?.

edited Apr 10 '19 at 05:49

shafik

6,098
5
32
50

answered Apr 10 '19 at 05:06

user37309

597
5
14

Basically when the user clicks the date picker object on that textbox – Johnson Main Apr 10 '19 at 05:09

score 0 · Answer 3 · answered Apr 10 '19 at 05:08

0

Firstly add value="" in the inputs

Then in your js code, you are sending "text" variable which is undefined as your variable is "from".

So try adding : data:{text:from}

answered Apr 10 '19 at 05:08

Jitendra Ahuja

749
3
9
22

When I attempt to echo there are no values passed to either variable \ – Johnson Main Apr 10 '19 at 05:17
Have you checked if you are even getting anything in $_POST variable ? If not, then it means no data is posted. Then Check js code if you get the values there. Then try adding a button element on whose click, the data should get posted – Jitendra Ahuja Apr 10 '19 at 05:49
refer to the marked answer and the comment below it. That is the problem I face now – Johnson Main Apr 10 '19 at 05:50
Do you get the value of "to" in js code ? Also firstly console.log the "data" variable in success function in ajax, do u get the values there (in success function) ? – Jitendra Ahuja Apr 10 '19 at 05:53
The value of "to" gets passed when I click on the first text box twice :/ – Johnson Main Apr 10 '19 at 05:56

score 0 · Answer 4 · answered Apr 10 '19 at 05:21

You have not passed the values from,to and pagesubmit in ajax.Try this code hope it helps In ajax

$(document).ready(function(){  
        $('input[type="text"]').click(function(){  
           var from = $("#from").val(); 
           var to = $("#to").val();  
           $.ajax({  
                url:"sortByDates.php",  
                method:"POST",  
                data:{from:from,to:to,pageSubmit:1},  
                success:function(data){  
                     $('#dates').html(data);  
                }  
           });  
          });  
     });

In PHP

<?php
    if (isset($_GET['pageSubmit'])) {
        $firstDate= $_POST['from'];
        $lastDate= $_POST['to'];
        echo $firstDate;
        echo $lastDate;

  }
?>

Unfortunately did not work for me :/ I am passing the date variables in the PHP to my database now and have 0 for both values. Still unable to print — Johnson Main, Apr 10 '19 at 05:26

Trying to get value from textbox in AJAX and sending it to the new page

4 Answers4