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) {
}
});
});
Related
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);
});
I bring my ajax response on success call and after that I want to redirect to new aspx page where all my 30 input type text controls are their. So What I want is I want to fill all the values their. So how could I achieve it. Please suggest.
Here is what I tried till now
function getDataForDashboard(rjSapId) {
$.ajax({
type: "POST",
url: "Dashboard.aspx/GetDashboardDataOnFacId",
data: JSON.stringify({ rjSapId: rjSapId }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
window.location.href = "http://localhost:39800/DashboardData.aspx?Id=" + rjSapId + "";
},
error: function (response) {
alert('Something went wrong..!!');
}
});
}
The another page some controls are below:-
<span>Site Type:</span>
<input type="text" id="txtSiteType" />
<br />
<span>Facility Type:</span>
<input type="text" id="txtFacilityType" />
<br />
May be you can save all your data in a hidden field by doing a stringify or, save it in local storage and then in the next page ajax ready you can retrieve it
on a index.php page, inside html i have a selectbox
<select name="selectLanguage" id="selectLanguage" onchange="OnlanguageChange()">
<option value="">
Select your Language
</option>
<option value="en">
English
</option>
<option value="fr">
Français
</option>
<option value="de">
Deutsch
</option>
</select>
Wish to get the value of the select box onchange in my php code.
tried with ajax call :
$(document).ready(function(){
$("#selectLanguage").change(function(){
var SelectedLanguage = $(this).val();
alert(SelectedLanguage);
$.ajax({
type: "POST",
url: "index.php",
data: SelectedLanguage,
success: function(result){
}
});
});
});
$.ajax require data as an object...
$.ajax({
type: "POST",
url: "index.php",
data: { language: SelectedLanguage },
success: function(result) {
}
});
In php access it as $_POST['language']
var formData = {
//get the value of language selected
'SelectedLanguage':$("select[name='selectLanguage'] option:selected").val(),
};
$.ajax({
type: "POST",
url: "index.php",
//send language to index.php
data: formData ,
success: function(result){
}
});
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'];
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.