'How to pass data after ajax call response to another php page to submit a form
I want to pass the result that I got from the ajax response to another page to submit a form with it. I'm a PHP developer and I'm new to ajax and jquery. Your help will be really appreciated!!
plant.js page ...
function showPlant()
{
var x = document.getElementById('plant').value;
$.ajax({
url: "<?php echo base_url(); ?> Gencos/showPlant",
method: "POST",
data:{
id : x
},
success:function(data){
$("#ans").html(data);
}
})
}
...
showplant.php ...
if(isset($_POST['id'])) {
$_SESSION['id'] = $_POST['id']; //trying sessions
$k = $_POST['id'];
$k = trim($k);
$query = "SELECT * FROM plants WHERE plant_name='{$k}'";
$res = mysqli_query($db, $query);
while($row = mysqli_fetch_array($res))
{
?>
<label class="form-label">Owner</label>
<select name="owner" class="form-control select">
<option value="<?= $row['plant_owner'] ; ?>" selected disabled><?= $row['plant_owner'] ; ?></option>
</select>
<label class="form-label">Fuel</label>
<select name="fuel" class="form-control select">
<option value="<?= $row['plant_fuel'] ; ?>" selected disabled><?= $row['plant_fuel'] ; ?></option>
</select>
<label class="form-label">Type</label>
<select name="type" class="form-control select">
<option value="<?= $row['plant_type'] ; ?>" selected disabled><?= $row['plant_type'] ; ?></option>
</select>
</div>
</div>
<?php
}
}
?>
...
myform.php ...
`<label class="form-label">Plant</label>
<select name="plant" id="plant" class="form-control select" onchange="showPlant()">
<option disabled selected>Select Plant</option>
</select>
<label class="form-label">Capacity</label>
<input data-parsley-type="number" type="text" class="form-control" name="capacity" required placeholder="Enter only numbers" />
<label>Date</label>
<div class="input-group" id="datepicker2">
<input type="text" class="form-control" name="date" placeholder="Y-M-D" data-date-format="yyyy-mm-dd" data-date-container='#datepicker2' data-provide="datepicker" data-date-autoclose="true">
<div id="ans" class="row">
<div class="col-lg-4">
<div class="mb-3">
<label class="form-label">Owner</label>
<select class="form-control select">
<option value="" selected disabled>Owner</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label class="form-label">Fuel</label>
<select class="form-control select">
<option selected disabled>Fuel</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label class="form-label">Type</label>
<select class="form-control select">
<option selected disabled>Type</option>
</select>
</div>
</div>
</div>
<div style="padding-top: 15px">
<button class="btn btn-primary" type="submit">Add Data</button>
</div>
</form>
...
I want to submit a form after I get data from ajax response as you can see in plant.js the function showPlant is called after I select plant in myform.php it then shows values from the database based on the id of the select option.
Basically I want to submit the values from the ajax call as well as the values from myform.php all together in one form.
Solution 1:[1]
I also had similar case when I was working with lerna and yarn workspaces. In my case the problem was using multiple and different versions of react, some where hoisted some were not during lerna compilation process.
According to docs
In order for Hooks to work, the react import from your application code needs to resolve to the same module as the react import from inside the react-dom package.
Run this command to list installed versions of react. And if you see more than one React, you’ll need to figure out why this happens and fix your dependency tree.
npm ls react
OR
yarn list react
Read more about the problem and solutions here
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Eduard |