How to pass data from HTML, to PHP file by Ajax?

Question

I would like to know, how can I pass <select> element from html to PHP file by ajax.

Here is my index.php:

<p>
<form action = "display.php" method="post" enctype="multipart/form-data">

Select: 

<select name="chosenOption" id="chosenOption"  style="width:100px"">
    <?php
    include 'dbConnection.php';
    $query = $db->query("SELECT id,name FROM products");
    while($row = $query->fetch_assoc())
    {
    echo'
    <option value="'.$row['id'].'">'.$row['name'].'
    </option>';
    }
    ?>
    </select>

Display : <input type="submit" name="display" value="Display">

</form>
</p>

My display.php, where i have ajax method:

<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>
<script>
function refresh_div() {
        var chosenOption= $('#chosenOption').val();
        jQuery.ajax({
        url: 'products.php',
        type:'POST',
        data:{chosenOption:chosenOption},
        success:function(results) {
        jQuery(".result").html(results);
        }
    });
}
t = setInterval(refresh_div,1000);
</script>


<div class="result"></div>

And products.php, where i want to pass selected < select > element:

<?php
include 'dbConnection.php';
$chosenOption = $_POST["chosenOption"];

// Display section

$query = $db->query("SELECT cost,description FROM products_info WHERE products_id=$chosenOption);
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){
echo "Actual cost and description: ".$row["cost"]. " ".$row["description"]. ; 
 }
 } else {
    echo "No data";
  }

?>

I expect that selected option from index.php will be pass to products.php by ajax and display the appropriate message. The current code does not work. Any idea?

Fix your quoting: $(#chosenOption) should be $("#chosenOption"). Aren't you getting a syntax error in the JavaScript console because of that? — Barmar
– Barmar, Commented Oct 30, 2019 at 20:58
If you didn't check the console, why not? That should be your first step when trying to debug JavaScript code. — Barmar
– Barmar, Commented Oct 30, 2019 at 20:59
I had it, just mistake when pasting the code here. I have already edited — Faljen
– Faljen, Commented Oct 30, 2019 at 21:04

Barmar · Accepted Answer · 2019-10-30 22:38:39Z

1

You can't refer to $("#chosenOption") in display.php, because the page has been reloaded. You need to use $_POST['chosenOption'], since that was submitted by the form.

<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>
<script>
function refresh_div() {
    var chosenOption= $('#chosenOption').val();
    jQuery.ajax({
        url: 'products.php',
        type:'POST',
        data:{chosenOption: <?php echo $_POST['chosenOption']; ?>},
        success:function(results) {
        jQuery(".result").html(results);
        }
    });
}
t = setInterval(refresh_div,1000);
</script>


<div class="result"></div>

edited Oct 30, 2019 at 22:38

answered Oct 30, 2019 at 21:12

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Faljen Over a year ago

Yes, but I want it to load, only after submitting the form. In index.php, I want to select an element and display it in display.php.

Barmar Over a year ago

When you submit the form, the <select> is gone, so you can't use var chosenOption= $('#chosenOption').val(); in the new page.

Faljen Over a year ago

Is there any other way to do it? it is necessary to display on the new page.

Barmar Over a year ago

Is the new page supposed to have the <select> like the original page? Or do you want to keep using the value that they submitted on the new page?

Faljen Over a year ago

When I selected an element in index.php , I want to click the submit button and in the new page i want to have this value passed to products.php by ajax to get and display dates from database (and it must be refreshed every second).

|

Collectives™ on Stack Overflow

How to pass data from HTML, to PHP file by Ajax?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related