Develop Reference

Jquery, send default value with ajax

I have a select box. The selected option is sent with ajax to a server side script. This works well.
the select box
<select id="main_select">
<option selected="selected">50</option>
<option value="40">40</option>
<option value="30">30</option>
<!-- other options -->
</select>
How can I extend the .change function that the default value <option selected="selected">50</option>is automatically send with the page load.
script:
$(document).ready(function () {
$('#main_select').change(function () {
$.ajax({
url: "itemscript.php",
type: "post",
data: {option: $(this).find("option:selected").val()},
success: function(data){
$("#details").html(data);
}
});
});
});

Just trigger the change event when the page is loaded.
$(document).ready(function() {
$('#main_select').change(function() {
$.ajax({
url: "itemscript.php",
type: "post",
data: {
option: $(this).val()
},
success: function(data) {
$("#details").html(data);
}
});
}).change();
});
Also, you can use $(this).val(), that gets the value of the selected option.

Why not extract the functionality to a seperate function? This helps to avoid hacks like triggering a change manually - if you had multiple listeners for such a change event, all would fire, and this might not be what you expect to happen ;)
function getData(select) {
$.ajax({
url: "itemscript.php",
type: "post",
data: { option: $(select).find("option:selected").val() },
success: function(data) {
$("#details").html(data);
}
});
}
$(document).ready(function () {
getData($('#main_select'));
$('#main_select').change(getData);
});

Pass value of multiple input fields in jQuery ajax?

I have multiple input fields, like
<p>Filter by gender</p>
<select class="filter-users">
<option value="female">Female</option>
<option value="male">Male</option>
</select>
<p>Filter by city</p>
<input class="filter-users" type="text" name="city">
How to create GET request url with these one or all of these inputs
$.ajax({
url: "/users/filter",
type: "get",
data: {
city: city,
gender: gender
},
success: function(response) {
}
});
How to make ajax request every time on of the filter inputs changed? For example send new request when on option change, or text input was entered?
So what I am trying to explain is, there is no submit button. Requests needs to be made everytime one of these fields changes

You can use serializeArray, like this:
$.ajax({
url: "/users/filter",
type: "get",
data: $("form").serializeArray(),
success: function(response) {
}
});
Or you also can use serialize in case you don't need JSON but URL-encoded parameters.

for this "How to make ajax request every time on of the filter inputs changed"-
$('input.filter-users').on('change', function(){
$.ajax({
url: "/users/filter",
type: "get",
data: $("form").serializeArray(),
success: function(response) {
}
});
});

How can I pass my dropdown style value on to my php file via jQuery/ajax?

Here's the markup for my dropdown:
<select id="themes">
<option selected="selected">Themes:</option>
<option value="default">Default</option>
<option value="red">Red</option>
<option value="bw">Black and White</option>
<option value="invert">Invert</option>
</select>
And the jQuery I'm using right now:
$("#themes").change(function() {
$.ajax({
url: "css/style.php",
method: "GET",
data: {"theme="+$(this).val(); }
})
});
This gives me a console error of "Uncaught SyntaxError: Unexpected token +". All I'm trying to do is pass $_GET['theme'] on to my style.php so I can process it with conditionals. Any advice?

Create data as an object, you have syntax issues in your code
$("#themes").change(function () {
$.ajax({
url: "css/style.php",
method: "GET",
data: {
theme: $(this).val()
}
})
});

You have problem with your code. You need to provide key value pair while creating an object in JavaScript reference
$("#themes").change(function() {
$.ajax({
url: "css/style.php",
method: "GET",
data: {
theme: $(this).val()
}
});
});
Jsfiddle

do it like this.............
$("#themes").change(function(){
var theme = $(this).val();
$.ajax({
url: "css/style.php",
method: "GET",
data: {theme : theme },
success: function(data) {
}//end of success
});
});
i always used this technique then fetch it using
$theme = $_GET['theme'];

How can I send a selected option to a php file with ajax?

I'm trying to get selected option in php to save it in a database. I'm using Ajax and it sends data and a file all together with FormData. Everything goes ok but when I select an option and click on submit button, the php file does not get nothing and just saves input text data and file information.
HTML
<form id="data" method="post" enctype="multipart/form-data">
<input type="text" name="first"/>
<input type="file" name="image"/>
<select name="disp" id="dispnb" class="dispc">
<option value="0" selected>Select...</option>
<option value="2"><b>Option A</b></option>
<option value="3">Option B</option>
<option value="3">Option C</option>
</select>
</form>
jQuery
$(document).ready(function(){
$("form#data").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
});
PHP
<?php
echo $_POST['first'];
echo $_POST['disp'];
echo $_FILES['image']['name'];
?>

Try like this:
$("#dispnb").change(function(){
var your_selected_value = $('#dispnb').val();
$.ajax({
type: "POST",
url: 'upload.php',
data: {"selected": your_selected_value},
success: function(data) {
alert(data);
},
error: function(data) {
// Stuff
}
});
});
In upload.php
<?php
if (isset($_POST['selected'])){
$a = $_POST['selected'];
echo $a;
}

You can use $('form').serialize(); instead of var formData = new FormData($(this)[0]);
Using this code you will get all from data.

add id to your text fields
<input type="text" name="first" id="first"/>
<input type="file" name="image" id="image"/>
js
$(document).ready(function(){
$("form#data").submit(function(){
var data = array{}
data.disp = $('#dispnb').val();
data.first = $('#first').val();
data.image = $('#image').val();
$.ajax({
url: 'upload.php',
type: 'POST',
data: data,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
Then in ur php file
<?php
echo $_POST['first'];
echo $_POST['disp'];
echo $_FILES['image']['name'];
?>
});

Submit form via ajax doesn't work on dropdown index change

Here is the wired situation. This is my form:
using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { #class = "myForm" }))
{
<select name="statusId" onchange="this.form.submit();" class="selectField">
<option value="-1">-- Pick Item --</option>
<option value="1">Item XYZ</option>
</select>
<button>SUBMIT</button>
}
And I have this simple ajax call:
$(".myForm").on("submit", function (event) {
event.preventDefault();
var url = $(this).attr("action");
var formData = $(this).serialize();
$.ajax({
url: url,
type: "POST",
data: formData,
dataType: "json",
success: function (response) {
alert(response);
}
});
});
When I click on button it works fine (use ajax).
But I don't need ajax on button I need it on select index change.
When I change selected index it make post to action method but not via ajax.
What I miss here?
What is the difference?

Here is all the code you need for all that to work:
$(function() {
$('button').on('click', function() {
$('.myForm')[0].submit();
});
$('select[name="statusId"]').on('change',function() {
$('.myForm').triggerHandler( 'submit' );
});
$(".myForm").on("submit", function() {
var url = $(this).attr("action");
var formData = $(this).serialize();
$.ajax({
url: url,
type: "POST",
data: formData,
dataType: "json",
success: function (response) {
alert(response);
}
});
});
});
You do not need inline JS in the select element:
<select name="statusId" class="selectField">
Note: You may want to give the button a more specific selector if there are other buttons on the page.