Develop Reference

make javascript code content dropdownlist dependant

I found this code on the internet, I'm using it to populate a textbox with autocomplete elements, the problem I have tho is that I also have a DropDownList that lets you choose between three languages, and I would like to change a parameter depending on the selected language. This is the code:
<script language="javascript" type="text/javascript">
$(function () {
$('#<%=txtCompanyName.ClientID%>').autocomplete({
source: function (request, response) {
$.ajax({
url: "Default.aspx/GetCompanyName",
data: "{ 'pre':'" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return { value: item }
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
}
});
});
I would like to change the "url: Default.aspx/GetCompanyName" parameter everytime I switch the language on the DropDownList. I tried a lot of things, but I think the closest was this:
...
if(document.getElementById('DropDownListName').value == "Company")
url: "Default.aspx/GetCompanyName",
} else {
url: "Default.aspx/IgnoreInput",
}
...
Thanks in advance for the help!

lets assume your dropdown has static values like this, you can fire this each time the dropdown changes:
<select id="languages" onchange="OnLanguageChange(this)">
<option value="default.aspx/GetCompanyEN">English</option>
<option value="default.aspx/GetCompanyFR">Francais</option>
<option value="default.aspx/GetCompanyES">Espanol</option>
</select>
add your code to this function to meet your needs, so the el.value would be your url
function OnLanguageChange(el) {
alert(el.value)
}

Unable to send data to php on select box change

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){
}
});

how to select form id with jquery before sending out a form

I have several forms on my page with different IDs. Each form has a submit button and should be handled separately.
So the if i specify the form id the code below works fine, since I have x amount of forms which are not known in advance I need to make this script more general.
$(function() {
$('#form1').on('submit', function() {
$.ajax({
type: 'post',
url: 'post.php',
dataType: 'json',
data: $('#form1').serialize(),
success: function() {
console.log($('#form1').serialize());
}
});
});
});
I am able to get the form id with the scrpt below, but I cannot figure out how to combine with the script above.
$("form").submit(function() {
var myId = this.id;
alert(myId);
});

You need to store a reference to this, so that you can access the form element that triggered the submit event within the callback:
$('form').on('submit', function() {
var self = this;
$.ajax({
type: 'post',
url: 'post.php',
dataType: 'json',
data: $(self).serialize(),
success: function() {
console.log($(self).serialize());
}
});
});

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'];

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.