PHP / AJAX pass a form input and select value to AJAX - php

I have an HTML form and it contains basically of one input text box and one select...
Input box
echo '<input type="input" id="category_typex" name="category_typex" value="" />';
Select
echo '<select name="primary_cat" id="primary_cat" onChange="getSecondaryCat(this.value);">';
The Ajax code I'm using to pass the select is as follows:
function getSecondaryCat(val, cat_var) {
$.ajax({
type: "POST",
url: "category-get-secondary.php",
data:'secondary_cat='+val,
success: function(data){
$("#secondary_cat").html(data);
$("#tertiary_cat").html('<option value="">Select specific category</option>')
}
});
}
I'm not being able to pass both the select and input values onto the next page....
I'm only able to pass the select value and not the input value

Try this:
function getSecondaryCat(val, cat_var) {
var category_typex = $('#category_typex').val();
$.ajax({
type: "POST",
url: "category-get-secondary.php",
data:{secondary_cat:val, category_typex:category_typex},
success: function(data){
$("#secondary_cat").html(data);
$("#tertiary_cat").html('<option value="">Select specific category</option>');
}
});
}

Related

How can I use localStorage in php with AJAX to update my database?

I need to use a localStorage value in a PHP file to update values in my database. I know that I need ajax to achieve this, I can't get it to work.
My localStorage item is named option and it exists (checked in browser and stored the value in a div)
$(document).ready(function(){
$.ajax({
type: "POST",
url: "activity.php",
data: { storageValue: localStorage.getItem('option') },
success: function(data){
alert('success');
}
});
});
PHP Example:
$option = $_POST['storageValue'];
mysql_query("...SET x = '".$option."'...");
echo 'Update complete';
I dont see any post data nor do I get a response.
Thank you!
Your page:
<form>
<input type="hidden" value="thedatayouwanttopost" id="option"/>
</form>
<script src="Your_Js_File.js"></script>
Your JS file:
document.getElementById('option').submit(); // This submits the form
var storageValue = $('#option').val(); // This gets the value of the form once it has been posted to the .php file
$(document).ready(function(){
$.ajax({
type: "POST",
url: "activity.php",
data: { storageValue:storageValue },
success: function(data){
alert('success');
}
});
return false; // This stops the page from refreshing
});
Your PHP file to callback the data to AJAX and display the alert (activity.php):
...
$option = $_POST['storageValue']; // This is the post value of your hidden input on your page
mysql_query("...SET x = '".$option."'...");
?><input type="hidden" id="option" value="<?php echo $option; ?>"><?
// The input above posts the value of 'option' on your page back to your Ajax and spits out the request.
...

getting variable from javascript to php

I have a simple combo box whose value I can get in JavaScript.
I am doing that so I don't need to refresh the page.
Also I want to use the selected value to do some conditional branching after combo box so how do I get the value of combo box from JavaScript to my variable $change.
echo '<select id="combo_1">';
echo '<option value="2">Submative</option>';
echo '<option value="1">formative</option>';
echo '</select>';
Below is my JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('#combo_1').change(function(){
});
});
</script>
Here I want to do $change = $(this).val(), but obviously I cant do it like this.
Any suggestions?
i want to do it on the same page without refreshing or without submitting
my url kinda look like this
http://localhost/lms/grade/report/userdef/index.php
and i want it to be on click action
cuz depending on the choice of combobox 2 very different procedures will be called
You're gonna want to use AJAX and submit the form, then you can access the returned data without ever refreshing the page.
Basically:
HTML
<select name="combo" id="combo_1">
<option value="2">Submative</option>
<option value="1">formative</option>
</select>
JavaScript
$('#combo_1').change(function() {
$.post('calcScript.php', $(this).serialize(), function(data) {
alert(data);
});
});
in PHP, you can access your combo data via $_POST['combo'].
<script type="text/javascript">
$(document).ready(function() {
$('#combo_1').change(function(){
var combo_1 = $(this).val();
$.ajax({
type: 'GET',
url: 'ajax.php',
data: {'combo_1':combo_1},
success: function(data){
alert(data)
}
});
});
});
</script>
ajax.php
if( isset($_GET['combo_1]) ) {
echo $change = $_GET['combo_1'];
}
JS:
$.ajax({
type: "POST",
url: './filename.php',
beforeSend: function(){
//If you want to do something
},
data: 'data='$('#combo_1').val(), //Optional '&data2='+value+'&datan='+value,
success: function(msg){
alert(msg);
}
});
PHP:
$val = $_POST['data'];
return 'received successfully';
This will alert 'received successfully'

passing to ajax an array from multiple selected dropdown

this is my Jquery:
$('#Save').click(function () {
var realvalues = new Array(); //storing the selected values inside an array
$('#Privilege :selected').each(function (i, selected) {
realvalues[i] = $(selected).val();
});
$.ajax({
type: "POST",
traditional: true,
url: "http://localhost:8081/crownregency/UpdateOrCreateOrDeleteUser.php",
data: {
Privilege: realvalues,
ID: '1'
},
success: function (data) {
alert(data, 'Status');
location.reload();
}
});
});
this is my php.
I have read quiet a lot about serializing but doesnt seem to work, what i am trying to achieve is sending the selected items of a dropdown into an array and sending it to a php through ajax. but sending the array to the php doesnt seem to work. help anyone?
Your code is okay just remove the traditional: true and your code seems to work
$('#Save').click(function(){
var realvalues = new Array();//storing the selected values inside an array
$('#Privilege :selected').each(function(i, selected) {
realvalues[i] = $(selected).val();
});
$.ajax({
type: "POST",
url: "http://localhost:8081/crownregency/UpdateOrCreateOrDeleteUser.php",
data: {Privilege: realvalues, ID: '1'},
success:function(data){
$("#subscrres").html(data)
}
});
});
HTML
<form method="post">
<select id="Privilege" multiple="multiple">
<option value="yahoo">yahoo</option>
<option value="chrome">chrome</option>
<option value="mozilla">mozilla</option>
</select>
<input type="button" id="Save"/>
</form>
UpdateOrCreateOrDeleteUser.php
<?php
if(isset($_POST['Privilege'])){
$myvar =$_POST['Privilege'];
foreach($_POST['Privilege'] as $one)
echo $one."<br/>";
}
?>

jQuery variable to php variable then use it on query

i have a problem when it comes to retrieving value from jQuery to php.i was able to get the value of my select and pass it to my php but i can't pass it back to php. here is the code...
<script>
$(document).ready(function()
{
$("select#months").change(function(event)
{
var m=$(this).val();
$.ajax({
type: 'POST',
url: "monthly_CRD.php",
data: {m: m},
success: function(){alert("updated")}
});
});
});
</script>
<div>
<select id="months">
<option value='00'>Month...</option>
<option value='01'>Jan</option>
<option value='02'>Feb</option>
<option value='03'>Mar</option>
<option value='04'>Apr</option>
</select>
<select id="years">
<?php
for($yr=10; $yr<=$year; $yr++)
{
echo "<option value='".$yr."'>".$years[$yr]."</option>";
}
?>
</select>
</div>
<?php
if (isset($_POST['m']))
{
$m = $_POST['m'];
echo $m;
} else {echo "fail";}
?>
it keeps on returning fail which means that isset is not working.
Change data: {m: m} to data: {"m":m}
Since you are looking at $_POST['m'] you need to define that key in your JSON. Currently you'd need to look inside $_POST['03'] if you selected Mar
If you mean that on page load, it returns fail, that is because on page load your $_POST array is probably empty.
If you want to know what was returned from your AJAX post, you need your success function to accept a parameter (like data) that jQuery will fill with the response to your post.
Then in the function body, you can write it to the DOM or your error console.
If you have an id to an element then just id is enough to select. Try this
$(document).ready(function()
{
$("#months").change(function(event)
{
$.ajax({
type: 'post',
url: "monthly_CRD.php",
data: { m: $(this).val()},
success: function(){
alert("updated")
}
});
});
});
$(document).ready(function()
{
$("#months").change(function(event)
{
$.ajax({
type: 'post',
url: "monthly_CRD.php",
data: '{ "m": "' + $(this).val() + '"}',
success: function(msg){
alert(msg)
},
error: function(msg) {
alert("An error happened: " +msg);
}
});
});
});
User fiddler of chrome tools to break on either success or error and check the value of the meesage property.

Jquery: Get value of more than one <select> drop-down

I am fetching user record from db-table like
<?php $row=1; ?>
<select id="status<?php echo $row; ?>" name="status<?php echo $row; ?>">
<option value="0">Active</option>
<option value="1">Block</option>
</select>
<?php $row++; ?>
----------------------------------------
Name Status
----------------------------------------
Abc Active
Def Block
Ghi Active
Jkl Block
----------------------------------------
where status is drop-down with two status for each user and If I want to change the status of any user then I select an option from that drop-down and at the same time the status must update in db-table.
For this I coded:
for(var r=1; r<=4; r++){
$("status").each(function() {
var sld = $("#status").val();
alert(sld);
$.ajax({
type: "POST",
url: "response.php",
data: "sld="+sld,
success: function(msg){
alert(msg); // this is the response
}
});
});
}
but for loop does not create script for each drop-down....
You'll need to remove that for loop, and use this code.
My event is now "change" and it will submit two variables, "id" and "sld". You then update your php script to check $_POST['id'] and $_POST['sld'] and then update these into the database.
add class="status" to each of the drop downs.
$(".status").change(function() {
var sld = $(this).val();
alert(sld);
$.ajax({
type: "POST",
url: "response.php",
data: { "sld": sld, "id":$(this).attr('id').replace('status','') },
success: function(msg){
alert(msg); // this is the response
}
});
});
$('status') would select elements that have the node name of status. Do you have that? Or did you mean $('.status')?
I think you are having more than one element with the same ID which will be an invalid HTML.
Put a class for your select boxes and then you can use something like this.
$("select.status").each(function() {
var sld = this.value;
alert(sld);
$.ajax({
type: "POST",
url: "response.php",
data: "sld="+sld,
success: function(msg){
alert(msg); // this is the response
}
});
});
Also I don't find any use of the for loop in the example.

Categories