Passing values ajax to php not in same page - javascript

Here is where I select my value
Company Name<br />
<select id="company" name="selected">
<option value="">Value 1</option>
<option value="">Value 1</option>
</select>
When I click this one I want it to have a modal like or facebox
<a rel="facebox" id="getitems" href="ordersupply.php" >Order Item</a>
My ajax code here note: when I alert this one it gives the value but cant find it in the ordersupply page
$("#getitems").click(function(){
var x = document.getElementById("company").value;
alert(x);
$.ajax({
url: "ordersupply.php",
type: "POST",
data: {"selected": x},
success: function(response){
console.log(response);
}
});
});
I'll just make a simple php where I can echo in my page the selected value can anyone help me with this one :) It will be very much appreciated
<?php
if(isset($_POST['selected']))
{
$value = $_POST['selected'];
echo $value;
}
?>

Try this :
$.ajax({
url: "ordersupply.php",
type: "POST",
contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
data: {"selected": x},
success: function(response){
console.log(response);
}
});

Check in browser (f12) for firefox and chrome in the network section what response you get. There is a good chance for 404 not found error.

Related

select option value send to php file with ajax

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 .....

Json submiting same data until refresh

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>

Assign javascript variable to php variable

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.

Setting an AJAX call and filling dropdown

So here I have two dropdowns:
<select id="CountryId">
<option value="16">UK</option>
<option value="17">Germany</option>
<option value="18">Italy</option>
<option value="19">Spain</option>
</select>
<select id="CityId"> </select>
And in the app I have a php function which returns a list of cities by the country's ID:
{"63":"Rome","65":"Palermo","72":"Torino","73":"Milan"}
What I try to achieve is onChange of the first dropdown to take the country's ID and populate the second list with the returned cities.
I try to achieve it with this AJAX call, and tried to debug it, but nothing seems to work. The var data is being picked up, but nothing else happens. Here is the snippet:
$('#CountryId').change(function(){
var data = $('#EventCustomerId option:selected').val();
$.ajax({
type:'POST',
async: true,
cache: false,
url: <?php echo Router::url(array('controller'=>'projects','action'=>'getbycustomer')) ?>,
success: function(response) {
jQuery('#CityId').html(response);
},
data: data
});
return false;
})
I am not quite secure about the way of filling the second dropdown with the response. The response is returned in plain HTML in JSON.
Any help is much much appreciated.
have you tried with putting async to false?
$('#CountryId').change(function(){
var data = $('#EventCustomerId option:selected').val();
$.ajax({
type:'POST',
async: false,
cache: false,
url: <?php echo Router::url(array('controller'=>'projects','action'=>'getbycustomer')) ?>,
success: function(response) {
jQuery('#CityId').html(response);
},
data: data
});
});
can you post your response here if the call should work now

jQuery ajax "data" field with mixed data

I have a form with some fields in it:
<form id="unit">
<input type="hidden" name="item_id" value="100" />
<input type="hidden" name="name" value="item one" />
<select name="option[1]">
<option value="1">1GB</option>
<option value="2">8GB</option>
</select>
<select name="option[2]">
<option value="3">Red</option>
<option value="4">Blue</option>
</select>
</form>
I want to pass that data over jQuery ajax so I'm using:
$.ajax({
type: 'post',
url: 'index.php?route=product/options_plus_redux/updateImage',
dataType: 'json',
data: $('form#unit :input'),
success: function (data) {
//do something here...
}
});
And that works fine. However, I want to add another bit of data along with the form fields. But I can't figure out the syntax for it. I know since the selectbox is named "option" there it will try to serialize that array. but basically I'm trying to do:
data: $('form#unit :input') +'x=test',
But it comes back very wrong
Any ideas?
try this:
data: $('form#unit').serialize() +'&x=test',
look up about jQuery form serialization
you can see it running here: http://jsfiddle.net/maniator/pfb2c/
var data = $('form#unit :input');
data.x = "test";
.......
url: 'index.php?route=product/options_plus_redux/updateImage',
dataType: 'json',
data: data,
.......

Categories