How to pass javascript variable that came from select option to a PHP variable?
I want to set PHP variable depending on user selection.
I tried that code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$("select[name='sex']").change(function () {
var submitSearchData = jQuery('#extended-search').serialize();
var selectedValue=$('#sex').val();
jQuery.ajax({
type: "POST",
data: 'selected=' + selectedValue
url: "ajax.php",
success: function () {
// alert(submitSearchData);
alert(selectedValue);
}
});
});
});
</script>
<form id="extended-search" >
<div class="input-container">
<select class="select" name="sex" id="sex">
<option value="0">All</option>
<option value="1">M</option>
<option value="2">F</option>
</select>
</div>
</form>
<?php
var_dump ($_REQUEST['selected']); //that print NULL don't know why!
?>
You are passing data in wrong format. Data is passed as an object. Please refer below.
$("select[name='sex']").change(function () {
var submitSearchData = jQuery('#extended-search').serialize();
var selectedValue=$('#sex').val();
jQuery.ajax({
type: "POST",
data: {'selected': selectedValue},
url: "ajax.php",
success: function (response) {
// alert(submitSearchData);
alert(response);
}
});
});
Is not possible in the same instance of time:
yourfile -> ajax -> yourfile (here is the value, but you can't see this in your current webpage except that instead of ajax, send post form)
I hope this will help you...
dataType: "html",
data: {'selected': selectedValue},
and then u can get it via $_POST/$_REQUEST array since you have set your type to post.
$_REQUEST is null because it is not related to the ajax request you send. Try this for example:
<?php
if (isset($_POST["selected"])) {
echo $_POST["selected"];
} else {
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form id="extended-search">
<div class="input-container">
<select class="select" name="sex" id="sex">
<option value="0">All</option>
<option value="1">M</option>
<option value="2">F</option>
</select>
</div>
</form>
<script>
$(function() {
$("select[name='sex']").change(function () {
var selected = $(this).val();
$.ajax({
type: "POST",
data: {
selected: selected
},
url: "ajax.php",
success: function (data) {
alert(data);
}
});
});
});
</script>
</body>
</html>
<?php } ?>
EDIT:
I updated the script and tested it. You had some errors in your code. Hope this works for you.
Related
How to select option by value, if the select is loaded via AJAX
index.php
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="data"></div>
</body>
<script>
function LoadSelect() {
var post_data = {
token: "test"
};
$.ajax({
type: 'POST',
url: 'load_select.php',
data: post_data,
dataType: "json",
beforeSend: function() {},
success: function(data) {
$("#data").html(data["msg"]);
},
complete: function() {}
});
}
$(document).ready(function() {
LoadSelect();
});
</script>
</html>
load_select.php
<?php
// Value from the database
$gender = "female";
$html = '
<select class="form-control" id="gender" name="gender">
<option value="female">Female</option>
<option value="male">Male</option>
</select>
<script>
$("#gender").val("'.$gender.'");
</script>
';
echo json_encode(array('msg' => $html));
Tried this code, but it's not working.
The problem solved, the $gender variable gets wrong value from the database like "f" and not "female".
Typically changing the value of a select via code should be followed by triggering the change event, like this $("#gender").trigger('change');
If I understand you correctly then you override the select with html from your ajax request. In order to maintain the value you will need to store the original value, then override the html and then restore the original value. See this snippet below.
Better would be to not override the html element with your ajax call but only update the information that need to be updated.
$("#gender").val("male");
//Lets pretend this onclick handler is your ajax succes handler.
$('#MimicAjax').on('click', function(){
//Fake ajax result for demonstraion purpose
var ajaxResult = '<select class="form-control" id="gender" name="gender"><option value="female">Female</option><option value="male">Male</option></select>';
//store the original value
var originalValue = $("#gender").val();
//Do your ajax thingy
$('#data').html(ajaxResult);
//restore original value
$("#gender").val(originalValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="data">
<select class="form-control" id="gender" name="gender">
<option value="female">Female</option>
<option value="male">Male</option>
</select>
</div>
<button id="MimicAjax">MimicAjax</button>
If you just want to set the value after you added the html with ajax then just use that line within the succes handler after you changed the html.
$.ajax({
type: 'POST',
url: 'src/ajax/load_select.php',
data: post_data,
dataType: "json",
beforeSend: function() {},
success: function(data) {
$("#data").html(data["msg"]);
$("#gender").val("male");
},
complete: function() {
}
});
I want to perform a submit with AJAX and select list. I made a simple alert but nothing. Did I misss something ?
This is my html:
<form id='bill_action' action='post'>
<input type='hidden' name='bill_id' value='".$v1['id']."'>
<select name='action' onchange='this.form.submit()'>
<option value='test1'>test1</option>
<option value='test2'>test2</option>
</select>
</form>
my JS:
$("#bill_action").submit(function() {
alert('hello world'); //for test
$.ajax({ //make ajax request to bill_action.php
url: "bill_action.php",
type: "POST",
dataType:"json", //expect json value from server
data: bill_id
}).done(function(data){
//on Ajax success
})
})
try this :
<form id='bill_action' action='post'>
<input type='hidden' name='bill_id' value='".$v1['id']."'>
<select name='action' onchange='myfunction'>
<option value='test1'>test1</option>
<option value='test2'>test2</option>
</select>
</form>
function myfunction() {
alert('hello world'); //for test
$.ajax({ //make ajax request to bill_action.php
url: "bill_action.php",
type: "POST",
dataType:"json", //expect json value from server
data: bill_id
}).done(function(data){
//on Ajax success
})
}
I have a select dropdown box
<select name="status" id="status" onchange="changeStatus()">
<option value="step_1">step_1</option>
<option value="step_2">step_2</option>
<option value="step_3">step_3</option>
<option value="step_4">step_4</option>
</select>
And my javascript
<script>
function changeStatus() {
$('select.changeStatus').change(function(){
$.ajax({
type: 'POST',
url: 'update_status.php',
data: {changeStatus: $('select.changeStatus').val()},
dataType: 'html'
});
});
});
</script>
So I want the value selected from the select dropdown box send to the php file(update_status.php)
Select id using #. Since you are already using javascript onchange event in select field so no need to use jquery change() event. jQuery use # to select id and . to select class. since you are using id="status" so you must use # to select the id. The way you are trying to collect the value of the select field in this line $('select.changeStatus').val() is wrong. Because there are no class named changeStatus there.
function changeStatus() {
$.ajax({
type: 'POST',
url: 'update_status.php',
data: {changeStatus: $('#select').val()},
dataType: 'html'
});
}
$('#status').val() is used to get value of select options.
So try this
<script>
function changeStatus() {
$.ajax({
type: 'POST',
url: 'update_status.php',
data: {changeStatus: $('#status').val()},
dataType: 'html'
});
});
</script>
or
<script>
function changeStatus() {
$.post("update_status.php", {changeStatus: $('#status').val()}, function(data, status){
});
}
</script>
You don't need to mix jQuery and inline JS
HTML - we'll use your selects name in the function. I've removed the inline function call:
<select name="status" id="status">
<option value="step_1">step_1</option>
<option value="step_2">step_2</option>
<option value="step_3">step_3</option>
<option value="step_4">step_4</option>
</select>
jQuery - I have taken the code out of the function you were calling inline, it was not needed.
<script>
$(document).ready(function() {
$('select[name="status"]').change(function(){
var status = $(this).val();
$.ajax({
type: 'POST',
url: 'update_status.php',
data: {changeStatus: status},
dataType: 'html'
});
});
});
</script>
You can directly test when the select changes and grab its value right then. Here is an EXAMPLE
I have also wrapped the jQuery in a document ready handler. Depending on where you're loading the script in your page you may need to do this to make sure that your jQuery is run as soon as the DOM elements have been loaded.
Remove the onchange field from select and put the below code to your script and this is working. Use JQuery post functionality instead.
$("#status").change( function() {
alert($( this ).val());
$.post('update_status.php', { changeStatus: $(this).val()},
function(response) {
console.log( response);
});
});
<select name="status" id="status" onchange="changeStatus(this.value)">
<option value="step_1">step_1</option>
<option value="step_2">step_2</option>
<option value="step_3">step_3</option>
<option value="step_4">step_4</option>
</select>
function changeStatus(value) {
$.ajax({
type: 'post',
url: 'update_status.php',
data: {'get_data:value'},
success: function (response) {
document.getElementById("loadto").innerHTML=response;
}
});
}
I Hope it will be helpful .....
I have a problem with submiting my "form" with json. Its not form in traditional way, i will post a code now:
$('#select').on('change', function() {
document.getElementById("info").setAttribute("data-info", this.value);
})
$('#info').on('click', function() {
var id = $(this).data('info');
add(info);
});
function add(info) {
$.ajax({
type: 'get',
cache: false,
contentType: content_type,
beforeSend: function(xhr) {xhr.overrideMimeType(content_type);},
data: {'action': 'info_add', 'info': info },
url: sitepath + 'info/all',
success: function() { update(); }
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="select">
<option value="1">data1</option>
<option value="2">data2</option>
<option value="3">data3</option>
<option value="4">data4</option>
</select>
<div id="info">Button</div>
So as you see, when select is changed it adds "data-info" attribute to div. And when div is pressed it send data-info to php script. And the problem is that it always send the same value. But after refresh it sends fine only once and than again the same value as first. Its hard to explain but here is example:lets say that i change select to "data2" and press on div. It sends "2". But then when i change it to "data3", and press on div, it still sends "2", not "3". There is no cache set or something. Sorry for bad english and thanks in advance :)
Use jQuery for setting if you are also going to be reading it with jQuery
Change
document.getElementById("info").setAttribute("data-info", this.value);
to
$"#info").data("info", this.value);
Still wondering why you are using data atrrbutes when you are not just reading the value on demand.
add($('#select').val());
You are using confusing code, you can achieve the same using:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="select">
<option value="1">data1</option>
<option value="2">data2</option>
<option value="3">data3</option>
<option value="4">data4</option>
</select>
<div id="info">Button</div>
<script>
$('.product__cart, .stock-product__cart').on('click', function() {
var info = $('#select').val();
$.ajax({
type: 'get',
cache: false,
data: {'action': 'info_add', 'info': info },
url: sitepath + 'info/all',
success: function() { update(); }
});
});
</script>
Hi all I have working multiselect filter downloaded from this source http://www.erichynds.com/, I am trying to use this with Ajax, though my ajax function is working, and showing html generated by php in window.alert(html), but multiselect fileter has no effect, I really don't know how to solve it. this is what I have done so far
HTML
<table>
<tr>
<td>
<select id='pr_select' name='prj' onChange='show("pr_select","output1");' >
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
</select>
</td>
</tr>
<tr>
<td>
<div id='output1'></div></td>
</tr>
</table>
JAVASCRIPT
<script>
function show(sel,id) {
var selected = $("#"+sel).val();
$("#"+id).html( "" );
if (selected.length > 0 ) {
$.ajax({
type: "GET",
url: "get_data.php",
data: "select="+selected,
cache: false,
beforeSend: function () {
$("#"+id).html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
// Ajax is success but multiselect is not working.....
window.alert(html),
$("#"+id).html( html );
}
});
}
}
$(document).ready(function(){
$("#test").multiselect();
});
</script>
Output generated in ajax success block -window.alert
<select id='test' name='multiple_data[]' multiple='multiple'>
<option value='USA'>USA</option>
<option value='UK'>UK</option>
</select>
I even tried for output1 division also like this no luck
$(document).ready(function(){
$("#output1").multiselect();
});
Try not to bind the method on doc ready instead apply in the complete method of ajax:
<script>
function show(sel,id) {
var selected = $("#"+sel).val();
$("#"+id).html( "" );
if (selected.length > 0 ) {
$.ajax({
.......
success: function(html) {
// Ajax is success but multiselect is not working.....
window.alert(html),
$("#"+id).html( html );
},
complete:function(){
$("#test").multiselect(); // add it here in the ajax
}
});
}
}
</script>
This would solve your problem try
success: function(html){
document.getElementById(id).innerHTML = html;
$("#"+id).multiselect().multiselect('refresh').multiselectfilter();
},