We Keep Coding

Jquery/ Ajax: Send additional php variable to server sided script

I have this select box. The selected option is sent with ajax to a server side script.
<select id="main_select">
<option selected="selected" value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
</select>
jquery script
$(document).ready(function() {
$('#main_select').change(function() {
$.ajax({
url: "itemscript.php",
type: "post",
data: {
option: $(this).val()
},
success: function(data) {
$("#details").html(data);
}
});
}).change();
});
And in the server sided script (itemscript.php) I get the variable from the select box like that:
if(isset($_POST["option"]))
{
$itemlevel = $_POST["option"];
}
Now I want to extend this script to send an additional php variable called $element to the server sided script (itemscript.php). The $element variable is a part of the the current url address.
How can I send the additional $element variable within this jquery/ ajax script?

Just add the other data items into the data{} part, separated by commas.
Assuming that your $element data is inside an inputbox, then
HTML
<input id="element">
<br>
<select id="main_select">
<option selected="selected" value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
</select>
$(document).ready(function() {
$('#main_select').change(function() {
$.ajax({
url: "itemscript.php",
method: "POST",
data: {
option: $(this).val(),
element: document.getElementById("element").value
},
.success: function(data) {
$("#details").html(data);
}
});
}).change();
});
In the above, $_POST["element"] will be passed to your php scripts

passing value from javascript to sql via ajax

I have some problem when I pass variable across php , javascript and ajax.
html - when I change the selected value, ajax will post the new value:
<select name="PACKAGE_CATEGORY" id="PACKAGE_CATEGORY" onclick="fireAjax()" class="form-control" >
<option value="0" disabled selected hidden> -- select an option -- </option>
<option value="PLINE">Phone Line Only</option>
<option value="UNIFI">Unifi for New Registration</option>
<option value="STREAMYX">Streamyx for New Registration</option>
<option value="WEBE">Webe</option>
<option value="DOME">Lease Line (DOME)</option>
</select>
ajax - I get the value by javascript and save it in var1:
<script>
function fireAjax(){
$.ajax({
url: 'form.php',
type: 'POST',
data: {var1: document.getElementById('PACKAGE_ID').innerHTML },
success: function(data) {
console.log("success");
}
});
}
javascript function - I want to take the value var1 from ajax, but fail:
<script>
$(function () {
var pricestore = [
<?php
$var1 = $_POST['var1']; // I cannot get the var1, please help me T.T
$sqlpid=mysqli_query($conn, "select no from product where P_NAME = '$var1' ");
//some function
//.............
?>
];
});
</script>

Change onclick() to onchange()
<select name="PACKAGE_CATEGORY" id="PACKAGE_CATEGORY" onchange="fireAjax()" class="form-control" > //Here
<option value="0" disabled selected hidden> -- select an option -- </option>
<option value="PLINE">Phone Line Only</option>
<option value="UNIFI">Unifi for New Registration</option>
<option value="STREAMYX">Streamyx for New Registration</option>
<option value="WEBE">Webe</option>
<option value="DOME">Lease Line (DOME)</option>

Try the following:
Html:
<select name="PACKAGE_CATEGORY" id="PACKAGE_CATEGORY" onchange="fireAjax()" class="form-control" >
<option value="0" disabled selected hidden> -- select an option -- </option>
<option value="PLINE">Phone Line Only</option>
<option value="UNIFI">Unifi for New Registration</option>
<option value="STREAMYX">Streamyx for New Registration</option>
<option value="WEBE">Webe</option>
<option value="DOME">Lease Line (DOME)</option>
</select>
Javscript:
<script>
function fireAjax(){
$.ajax({
url: 'form.php',
type: 'POST',
data: {var1: document.getElementById('PACKAGE_CATEGORY').value},
success: function(data) {
console.log("success");
}
});
}
Changed onclick to onchange, changed id, changed innerHtml to value

Try to change your ajax call into change event of selector,
$('#PACKAGE_CATEGORY').change(function(){
$.ajax({
url: 'form.php',
type: 'POST',
data: {
'var1': $(this).val()
},
success: function(data) {
console.log("success");
}
});
})

Selection OnChange change PHP Variable

Hello StackOverflow People.
I need you help. I have this code:
<select name="type" onChange="idk?" class="form-control">
<option value="H">Week 51</option>
<option value="V">Week 52</option>
</select>
And if an user change the week i want to change the file get content :s
$Week = "";
echo file_get_contents('http://rooster.farelcollege.nl/'.$Week.'/c/c00050.htm');
Thanks!
greetings from the Netherlands =)

you can send Ajax request to the "file_get_contents" url.
This is what I am using and it works fine :)
<select name="type" class="form-control">
<option value="H">Week 51</option>
<option value="V">Week 52</option>
</select>
$(document).ready(function() {
$( ".form-control" ).change(function() {
$.ajax({
data: {
// You are not sending any post variables right? Then leave this empty :-) otherwise use it as array 'var1': 'value', 'var2': 'value2' ...
},
url: 'http://rooster.farelcollege.nl/'+$(this).val()+'/c/c00050.htm',
method: 'POST',
success: function(msg) {
alert(msg); // Optional, show text that was given by URL, can be removed
}
});
});
});
jquery.com/jquery.ajax

Add select onchange with AJAX

I'm a newbie to Javascript so I couldn't find an answer to my problem. I want to add an extra select when a previous select is changed. I know my code should look something likes this but it isn't working:
$(function(){
$('#artist').change(function(){
$.ajax({
url: "artist_field.php",
dataType:"html",
type: "post",
success: function(data){
$('#artist').append(data);
}
});
});
});
HTML
<td id="artist">
<select name="artist_1" id="artist">
<option value=""></option>
</select>
</td>
My problem is that I don't know how to get the values in artist_field.php that I'm trying to send (because I'm trying to exclude the previous selected option in the new select). I hope someone can help me! Thanks in advance.

$(document).ready(function() {
$('#select_2').hide();
$('#artist').change(function(){
$('#select_2').show();
});
});
HTML
<td id="artist">
<select name="artist_1" id="artist">
<option value=""></option>
</select>
</td>
<td>
<select name="select_2" id="select_2">
<option value=""></option>
</select>
</td>
It will only show the second select if you chose something on the first one

Update: I just noticed that you have the ID artist in the code twice. You might change the TD to <td id="artist_td"> or something for my example to work
To send the currently selected option back to the server in the post, you can do something like:
$('#artist').change(function(){
$.ajax({
url: "artist_field.php",
data: { "value": $("#artist").val() },
dataType:"html",
type: "post",
success: function(data){
$('#artist').append(data);
}
});
});
Then in the PHP document, you can get the value with $_POST["value"];, and use that value to limit the return options.
update
If you are going to fire the change event off multiple times, it's going to append the new data every time. If this is not the behavior that you want, add a div or something to put the new data into like:
<td id="artist_td">
<select name="artist_1" id="artist">
<option value=""></option>
</select>
<div id="newdata"></div>
</td>
Then edit the success function
success: function(data){
$('#newdata').empty().append(data);
}

With "artist_field.php" returning a string containing all elements to place in the <select> element separated by commas. I hope it will help ☻ ☺
window.addEventListener("load", function(){
var list = document.getElementById("artist");
var xhr = Xhr();
xhr.onreadystatechange = function(e){
if(xhr.status === 4 || xhr.status === 200)
{
var results = (xhr.responseText).split(',');
for(var i = 0; i < results.length; ++i)
{
var el = document.createElement("option");
el.innerHTML = results[i];
list.appendChild(el);
}
}
};
xhr.open("GET", "artist_field.php", false);
xhr.send(null);
}, false);
function Xhr()
{
try {
return new XMLHttpRequest();
}catch(e){}
try {
return new ActiveXObject("Msxml3.XMLHTTP");
}catch(e){}
try {
return new ActiveXObject("Msxml2.XMLHTTP.6.0");
}catch(e){}
try {
return new ActiveXObject("Msxml2.XMLHTTP.3.0");
}catch(e){}
try {
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){}
try {
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
return null;
}

Here is the code where you can easily understand select Tag on change with ajax request using PHP.
HTML Code
<div class="form-group">
<label>Select SMS Template</label>
<select id="sms-select" name="sms-select" onchange="smschange(this.value)" class="form-control">
<option value="">Select SMS Template</option>
<?php foreach ($sms as $row) { ?>
<option value="1">Sample SMS</option>
<option value="2">Test SMS</option>
<?php } ?>
</select>
</div>
Javascript Code
<script>
function smschange(id)
{
$.ajax({
type: 'post',
data: {'id': id},
url: 'sms.php',
dataType: 'json',
success: function(res){
alert(res);
},
error: function(res){
$('#message').text('Error!');
$('.dvLoading').hide();
}
});
}
</script>
JQuery Library Source Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

JavaScript failing after second ajax request using submit/selection button

I'm guessing this error has to do with asynchronous programming, but I can't seem to wrap my head around it after looking at various examples on here...
I have a basic form that should do a post request and then it produces a d3 graph based on the form selection value...
<form id="target" method="post">
<select name="len" id="len">
<option value="sel">--Select--</option>
<option value="year">Most Recent Year</option>
<option value="all">All Data</option>
</select>
<input type = "submit"class="btn" value="Submit"/>
</form>
$(document).ready(function(){
$('.btn').on('click',function(){
var myvar = $('select[name=len]').val();
$.ajax({
url: 'dbquery_o2_select.php',
type: 'POST',
data: {'var':myvar},
dataType: "JSON",
success: function (result){
// produce a d3 graph here
},
error: function(jqXHR,textStatus){
alert(textStatus);
}
});
return false; });
});
Upon the second "submit", I get an error saying that 'sampledate' (which is an associated name in the ajax return array named 'result') is undefined.
Thanks in advance for any help. Let me know if you need more info!