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>
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() {
}
});
The ajax is fired when user confirms, but if user cancels the confirm dialog still the select tag value changes though ajax isn't fired. I want something like if user cancels then select tag should retain it's previous value. I have this:
<select name="ss" id="<?=$row['id'];?>" onchange="_changeStatus(this.value,'<?=$row['id'];?>');">
<option value='Paid'>Paid</option>
<option value='Verified'>Verified</option>
<option value='Inprocess'>Inprocess</option>
<option value='Chargeback'>Chargeback</option>
</select>
script:
function _changeStatus(v,i){
if(confirm("Sure to Update")){
$.ajax({
type: 'post',
url: 'change-status.php',
data: {val:v,eid:i,actionid:1},
success: function (res) {
if(res!="scr"){
alert("Unexpected Error, Page will be refreshed !");
window.location.reload();
}
}
});
}
}
Should be something like that:
<select defaultValue="Paid" name="ss" id="<?=$row['id'];?>" onchange="_changeStatus(this,'<?=$row['id'];?>');">
<option value='Paid'>Paid</option>
<option value='Verified'>Verified</option>
<option value='Inprocess'>Inprocess</option>
<option value='Chargeback'>Chargeback</option>
</select>
function _changeStatus(vobj,i){
var v = vobj.value;
if($(vobj).attr('value_before')){
var vbefore = $(vobj).attr('value_before');
}else{
var vbefore = vobj.defaultValue;
}
if(confirm("Sure to Update")){
$.ajax({
type: 'post',
url: 'change-status.php',
data: {val:v,eid:i,actionid:1},
success: function (res){
if(res!="scr"){
alert("Unexpected Error, Page will be refreshed !");
window.location.reload();
}else{
$(vobj).attr('value_before',v);
}
}
});
}else{
$(vobj).val(vbefore);
}
}
Please note that I have left it as similar as possible, so you would get a concept. Generally it's not a good practice to bind events inline when using jQuery, as well as mixing javascript with jQuery if not necessary.
So I have this HTML form:
<select name="finder[4]" id="finder-2--4" class="pffield pf-make">
<option value="0">Please Select...</option>
<option value="52505">Alfa Romeo</option>
<option value="52506">Audi</option>
<option value="52499">BMW</option>
<option value="52501">Ford</option>
</select>
I have this jQuery
<script type="text/javascript">
jQuery("document").ready(function(){
//console.log('on load');
jQuery(".js-ajax-php-json").submit(function(){
//console.log('post');
var data = {
"action": "test"
};
data = jQuery(this).serialize() + "&" + jQuery.param(data);
jQuery.ajax({
type: "POST",
dataType: "json",
url: "/reglookup.php", //Relative or absolute path to response.php file
data: data,
success: function(data) {
console.log(data);
console.log(data['make']);
//$(".pf-make option:selected").text("Ford");
//$(".pf-make option:contains(Ford)").attr('selected', true);
//$(".pf-make option[text=" + data["make"] +"]").attr("selected","selected");
$(".pf-make").val('52499');
alert("Form submitted successfully.\nReturned json: " + data["make"]);
}
});
return false;
});
});
</script>
I get the following return from the json post
Object {make: "Ford", model: "Focus", year: "2010", engine: 2.5, fuel: "Petrol"}
So the post and call back work fine as these get logged in the console, and I need to be able to take the called back make data["make"] and update the selected option in the select form.
You can see I have tried a number of different options, even hand typing "Ford" into the code, but I always seem to get the following error back in the console:
(index):221 Uncaught TypeError: Cannot read property 'val' of null
For the life of me I cant get this working at the moment.
get the option value using contains, then set the select:-
var ford = $('.pf-make option:contains("Ford")').val();
$('.pf-make').val(ford);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="finder[4]" id="finder-2--4" class="pffield pf-make">
<option value="0">Please Select...</option>
<option value="52505">Alfa Romeo</option>
<option value="52506">Audi</option>
<option value="52499">BMW</option>
<option value="52501">Ford</option>
</select>
A simple solution is to iterate over the options to find the matching text, then access its value.
var $select = jQuery('.pf-make');
var value = 0;
$select.find('option').each(function(){
if(jQuery(this).text() == data.make){
value = jQuery(this).val();
return false;
}
});
$select.val(value);
Instead of $ use jQuery, and also use Instead of data["make"] to data.make
see this updated code. Please take note that it uses ID rather than class name to make it more specific
<script type="text/javascript">
jQuery("document").ready(function(){
//console.log('on load');
jQuery(".js-ajax-php-json").submit(function(){
//console.log('post');
var data = {
"action": "test"
};
data = jQuery(this).serialize() + "&" + jQuery.param(data);
jQuery.ajax({
type: "POST",
dataType: "json",
url: "/reglookup.php", //Relative or absolute path to response.php file
data: data,
success: function(data) {
jQuery("#finder-2--4").val(data.make);
}
});
return false;
});
});
</script>
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 .....
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.