We Keep Coding

Make Sure All Forms In My Form Have Input Before Using Ajax

I have a set of input boxes and you can add more and more sets of these forms if you click the add more button. In my form I can submit data and I have got it to show up when you reload the page. However, I am stuck at making sure all of the fields have values before I run my AJAX. I use Jquery for this project
I cannot use a validation plugin because I am running magento and every time I try running the plugins in "No Conflict Mode" the plugins do not seem to work. Because I am running Magento this means I need to run Jquery in no conflict mode.
I have seen other solutions for this however they are all to do with input boxes and I have 1 input boxes and 2 select boxes. How can I make sure that all the input boxes are filled before and that all the select boxes that are not disabled have something selected before the ajax call?
Here is part of my HTML:
<form>
<input id="12">
<select id="1">
<option disabled="disabled" selected="selected">select please</option>
<option value="01">Option 1</option>
<option value="02">Option 2</option>
</select>
<select id="2">
<option disabled="disabled" selected="selected">Select Please</option>
<option value="01">Option 1</option>
<option value="02">Option 2</option>
</select>

Using a click event, if you use .val() on your <select/>, it will return null if there is no value attribute on your <option/>.
Note: This will not work if you put a value attribute on your options.
Edit: Doing a !== compare will be faster.
$("#submit-button").click(function(){
//if this is true, then it is valid
alert($("#1").val() !== null);
});

You can do it by getting the inputs value into a property.
This script would alert the number of how many inputs aren't complete or missing with base in your structure.
(no jQuery)
var myForm=document.getElementsByTagName("form")[0];
var formSelectors=myForm.getElementsByTagName("select"),
formTextBoxes=myForm.getElementsByTagName("input"),
missing=0;
var i,
length=formSelectors.length;
for(i=0;length>i;i++){
if(formSelectors[i].value===formSelectors[i].children[0].value)
//Check if select value is equal to
//select please or Select please
//MISSING! (select)
missing++
}
length=formTextBoxes.length;
for(i=0;length>i;i++){
if(formTextBoxes[i].value.length===0)
//MISSING! (input)
missing++
}
alert(missing)

Try this:
if($('#12').val()!='') {
// your code
}

Play framework: update web page when a value is selected from drop down

I am using play framework for the first time.
I want to update the web page when a value is selected from drop down with out refreshing the web page.
Consider the following example:
<select>
<option value= "Apple"> Apple </option>
<option value = "Banana"> Banana </option>
</select>
When a value is selected from drop down it should be posted to server. Then server should return some information based on the value it got. Now we should display the content corresponding to the value selected from drop down with out page refresh.
I didn't find a way to implement this using play framework. Conventionally we can do this by hiding a div initially and when a value is selected from drop down we can add content (fetched from back end) to the div and show it. I didn't understand how to implement the server side part. In play framework, controller generally returns Result type. How to return a Json value on a request in play framework ?
Can anyone please suggest other ideas ??
Thanks

A solution using jQuery (see change() and load()):
<select id="select">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
</select>
<div id="result"></div>
<script>
$('#select').change(function() {
$('#result').load('/foo/bar?fruit=' + $(this).val());
});
</script>
EDIT: To address the JSON/server-side part of the question have a look at ScalaJsonHttp (or JavaJsonActions).

Changing two select options value via javascript

there are two option controls in a website:
<select class="operator" name="operator" id="operator">
<option value="0">Entekhab Operator</option>
<option value="1">Irancell</option>
<option value="2">Talia</option>
<option value="3">HamraheAval</option>
</select>
<select class="card" name="chargeCard" id="chargeCard">
<option value="0">Entekhab Sharj</option>
</select>
When a user changes the first one by clicking on that (and selecting an option), the second one will also change...as you see in the above code, the second option has no value and will get some values after clicking on the first one
My problem is that I have to change them via javascipt in my android program
I tried with the following:
document.getElementById("operator").value=2
and this way i changed the first one.
But the second one does not change and dose not get values! What should I do for the second option to change as well?

maybe i didnt explain my question very well. i changed the value of the option but i needed something like stimulating the change event.
this code solved my problem:
$('#operator').trigger('change');

Execute some Javascript onChange using options?

I've been lurking a bit and couldn't find the answer. Basically I have a bunch of buttons that I want to turn into a drop down menu and have the code be executed onChange. But, I'm new to javascript and I am having a hard time figuring out how this would work. I somewhat got it to work, but I couldn't get it to work with more than one option. Here's what I have:
<button class="lightbutton" onclick="lightswitch(1,true);lightswitch(2,true);lightswitch(3,true);">
All lights on</button>
<button class="lightbutton" onclick="lightswitch(1,false);lightswitch(2,false);lightswitch(3,false);">
All lights off</button>
I got the lights to turn on by doing this:
<form name="functions">
<select name="jumpmenu" onChange="lightswitch(1,true);lightswitch(2,true);lightswitch(3,true);">
<option>LightFunctions</option>
<option value="*";>Light 1 On</option>
<option value="*";>Light 1 Off</option>
</select>
</form>
Now, I see why it works -- it's just telling it that whenever it changes to turn on all the lights. But how do I change the "onChange" to make it so it gets whichever option I have chosen?
I think I'm missing some JS but unsure.
I appreciate the help.

To have that select element control just the first lightswitch you can do this:
<select name="jumpmenu" onChange="lightswitch(1,this.value==='on');">
<option value="on";>Light 1 On</option>
<option value="off";>Light 1 Off</option>
</select>
That is, instead of hardcoding true as the second parameter to lightswitch() test the current value of the select element. (Note that I've changed the value attributes to something more meaningful. The expression this.value==='on' will evaluate to either true or false.)
Within the select's onChange attribute this will refer to the select element itself.
EDIT: To have the same select control multiple parameters you can add some data- attributes to the option elements to store as many extra parameters per option as needed (in this case I think you only need one extra). And I'd move the logic out of the inline attribute:
<select name="jumpmenu" onChange="jumpChange(this);">
<option value="">LightFunctions</option>
<option data-switchNo="1" value="on";>Light 1 On</option>
<option data-switchNo="1" value="off";>Light 1 Off</option>
<option data-switchNo="2" value="on";>Light 2 On</option>
<option data-switchNo="2" value="off";>Light 2 Off</option>
<option data-switchNo="3" value="on";>Light 3 On</option>
<option data-switchNo="3" value="off";>Light 3 Off</option>
</select>
function jumpChange(sel) {
if (sel.value === "") return; // do nothing if user selected first option
var whichLight = +sel.options[sel.selectedIndex].getAttribute("data-switchNo");
lightswitch(whichLight, sel.value==='on');
sel.value = ""; // reset select to display the "Light Functions" option
}
Demo: http://jsfiddle.net/N7b8j/2/
Within the jumpChange(sel) function that I added the parameter sel will be the select element (set as this from the onChange attribute). The "magic" happens on this line:
var whichLight = +sel.options[sel.selectedIndex].getAttribute("data-switchNo");
To explain that line: sel.options[sel.selectedIndex] gets a reference to the currently selected option, and .getAttribute("data-switchNo") gets that option's data- attribute. The + converts the attribute from a string to a number.

how to use a different value from that selected in a drop down

I'm trying to figure out how (if possible, which I'm sure I can) to use a different value to that selected in a drop down box in HTML. Happy to use jQuery or JavaScript. So for example I have a series of dropdowns as follows:
<select id="country" title="Country">
<option>Argentina ARG</option>
<option>Australia AUS</option>
<option>Austria AUT</option>
<option>Austria AUT</option>
<option>Belgium BEL</option>
<option>Brazil BRA</option>
<option>Canada CAN</option>
</select>
Naturally when a user chooses say 'Brazil' the option displays 'Brazil BRA'. However, I would like to instead use the value 'BRA' is it possible to do this? Am I just being dumb and it can be done in plain HTML?

<option value="BRA">Brazil BRA</option>
Side note: I believe IE6 needs that value or things get funky onsubmit.

Use the value attribute: http://www.w3schools.com/tags/att_option_value.asp

<select id="country" title="Country">
<option value="ARG">Argentina</option>
<option value="AUS">Australia</option>
</select>

You can use the options value-attribute. This way the text that is shown to the user is Argentina ARG, but the value that is posted with the form is just ARG.
<select id="country" title="Country">
<option value="ARG">Argentina ARG</option>
<option value="AUS">Australia AUS</option>
...
</select>