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

Ajax sorting through the whole array

Currently i have a project to create a webpage to show FIFA 2018 Matches and here's where I get the API: http://www.football-data.org/documentation
The connection code goes like this
$.ajax({
headers: { 'X-Auth-Token': 'YOUR_API_TOKEN' },
url: 'sample' ,
dataType: 'json',
data: filter code like ?timeFrame=n1 or ?matchday=1
type: 'GET',
}).done(function(response) {
});
My problem now is I wanted to create an option so users could have the selection to sort the matches according to their match day or a time frame.
My code is basically like this, i changed a part of the ajax call to assign the value
url: $('#selectMatch').val() ,
The select code and function
<select id="selectMatch">
<option value="day1url">1 Day</option>
<option value="day7url">7 Day</option>
<option value="day10url">10 Day</option>
</select>
$(function(){
$('#selectMatch').change(function(){
var matchURL= $(this).val();
return matchURL;
});
But when i click the option it will load the first choice not the other choices

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

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

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!