Develop Reference

How to check if drop-down is selected in JavaScript

I have a validator function looping through to check and see if all inputs have been filled out, but I also need to check if the dropdown's have been selected as well. I would like to write that into the same function.
function validateSave (){
// reset status
var good = true
$('.errormessage-left').removeClass('active-left')
$('input').removeClass("warning")
$('input').each(function(){
if ($(this).val() == "") {
console.log("found an empty");
good = false
$(this).addClass("warning")
$('.errormessage-left').addClass('active-left'),
$('.modal').addClass('modal-active');
}
})
console.log(good)
return good
}
What's the best way to go about this?

You can use val() on a dropdown (<select> element) just like an input element, so just include it in your selector
$('input, select').each(function(){

You can do this :
Assuming the first element is :"please choose..."
if ($(".myDDL").get(0).selectedIndex>0)...
or
if ($(".myDDL").prop('selectedIndex')>0)...

Try this:
$('input').each(function(){
if($(this).prop('selected') == true){
// selected item
}
});

Assuming your HTML looks something like this:
<input type="text" name="whatever">
<select>
<option value="">Choose One...</option>
<option value="choice1">Choice 1</option>
<option value="choice2">Choice 2</option>
<option value="choice3">Choice 3</option>
</select>
Then your jQuery can figure it out like this
$('input, select').each(function(){
if($(this).val() == ''){
alert('Cannot be blank!');
}
else{
//proceed
}
}

you should be able to add this to your loop:
if ($(this).prop('type')=='select-one'){
if ($(this).prop('selectedIndex')==0){
console.log("found an empty");
good = false
$(this).addClass("warning")
$('.errormessage-left').addClass('active-left'),
$('.modal').addClass('modal-active');
}
}

Dynamically update form action based on selected <option>

So, this is what I am trying to do.. I want a dropdown in HTML with a submit button that changes based on the value of the dropdown.
So, when I have this:
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
...
</select>
What I need is a button that checks what the value is. If value = 20x30 then use URL www.example.com/20x30
If value is 30x30 then use URL www.example.com/30x30
I am far from a PHP expert, so anyone that is able to set me off in the right direction would be a life saver :)

some simple Javascript would suffice:
<form id="FORM_ID" action="DEFAULT_ACTION">
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
</select>
</form>
<script type="text/javascript">
document.getElementById('select13').onchange = function(){
document.getElementById('FORM_ID').action = '/'+this.value;
}
</script>

You might try this:
Javascript:
function goto() {
window.location = "http://www.example.com/"+document.getElementById('select13').value;
}
HTML:
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
</select>
<button onclick='goto()'>Go</button>
When you click on the 'GO' button it redirects to example.com/(the selected value).
Here's a JSFiddle with an exmaple.
EDIT to fit your comment:
function goto() {
var selection = document.getElementById('select13').value;
if (selection != 'All') {
//window.location = "http://www.example.com/"+selection;
alert("http://www.example.com/" + selection);
} else {
alert("Error: You must pick something");
}
}
Also, if you want to submit a form and then do the redirection. The PHP code would be as follows:
<?php
//Process your form without echoing anything before the header function.
if($_REQUEST['sizes'] != 'All'){
header('location:http://example.com/'.$_REQUEST['sizes']);
}
else{
header('location:http://example.com/form.php');
}

You'll need an onchange event for your dropdown:
document.getElementById("select13").onchange = function() {
var currentVal = this.value;
if (currentVal == "20x30") {
//do stuff
}
}

Form validation common error message for 2 input fields

Have a form validator and want to get common error message for the following both input fields. Is this possible:
<select id="category" name="category" onchange="showSelected1();" style="width:160px">
<option value="00"><font color="#999999">Category</font></option>
<option value="1">Marriages</option>
<option value="2">Birthdays</option>
</select>
<select id="city" name="city" onchange="showSelected();" style="width:160px">
<option value="000"><font color="#999999">City</font></option>
<option value="1">New York</option>
<option value="2">Washington</option>
</select>
And used gen_validatorv4.js.
var frmvalidator= new Validator("frm1");
frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("category","dontselect=00","Select Category");
frmvalidator.addValidation("city","dontselect=000","Select City");
Want to get error message like "Select category and city". (only one error message for both)

According to this URL, you can build custom validation functions with gen_validatorv4.js:
http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
So try something like this:
function DoCustomValidation() {
if (document.getElementById('category').value == "00" || document.getElementById('city').value == "000") {
var element;
if (document.getElementById('category').value == "00") {
element = document.getElementById('category');
}
else {
element = document.getElementById('city');
}
sfm_show_error_msg("Select category and city", element);
return false;
}
else {
return true;
}
}
frmvalidator.setAddnlValidationFunction("DoCustomValidation");

How can I create a Javascript alert from the input values of the form a user interacts with?

I want to create a dynamic alert from a specific input value within each form. I have many forms on a page. Each alert needs to be slighly different. I am using two of the forms input values to produce the custom message. <input type="hidden" name="on0" value="Size"> & <input type="hidden" name="on1" value="Color">. I have the alert working for the first form on the page, but after the second form, my alert does not match the selected input value of that form. How can I target a specific instance of these input values within the form a user interacts with?
Here is a simplified version of my code showing only two forms:
example on - jsfiddle
<form method="post" class="list1">
<input type="hidden" name="on0" value="Size">
<select name="os0">
<option value="">-- Choose a Size --</option>
<option value="Short">Short</option>
<option value=" Medium">Medium</option>
<option value=" Long">Long</option>
</select>
<input type="hidden" name="on1" value="Color">
<select name="os1">
<option value="">
-- Choose a Color --
</option>
<option value="ivory">ivory</option> <option value=" black"> black</option>
</select>
<input type="button" value="Add to Cart" class="catalog">
</form>
<!-- seconed form start -->
<hr />
<form method="post" class="list2">
<input type="hidden" name="on0" value="Option">
<select name="os0">
<option value="">-- Choose a Option --</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
<input type="hidden" name="on1" value="Accent Color">
<select name="os1">
<option value="">
-- Choose a Choose a Accent Color --
</option>
<option value="red">Red</option>
<option value="yellow">yellow</option>
<option value="orange">orange</option>
</select>
<input type="button" value="Add to Cart" class="catalog">
</form>
​​
And my js
$(document).ready(function(){
var size_x = $("input[name='on0']").val();
var color_x = $("input[name='on1']").val();
function popWarning() {
if ($("select[name='os0']").val() === "") {
alert('Please choose a ' + size_x);
return false;
}
if ($("select[name='os1']").val() === "") {
alert('Please choose a ' + color_x);
return false;
}
}
$("input.catalog").click(function() {
popWarning();
});​
});

Reference the form and use that as context.
function popWarning(form) {
var size_x = form.find("input[name='on0']").val();
var color_x = form.find("input[name='on1']").val();
var size = form.find("input[name='os0']").val();
var color = form.find("input[name='os1']").val();
if (size === "") {
alert('Please choose a ' + size_x);
return false;
}
if (color === "") {
alert('Please choose a ' + color_x);
return false;
}
}
$("input.catalog").click(function() {
popWarning( $(this.form) );
});​
Let us pass in the reference to the button since that seems to be the breaking point.
function popWarning(button) {
var form = button.get(0).form;
var size_x = form.find("input[name='on0']").val();
var color_x = form.find("input[name='on1']").val();
var size = form.find("input[name='os0']").val();
var color = form.find("input[name='os1']").val();
if (size === "") {
alert('Please choose a ' + size_x);
return false;
}
if (color === "") {
alert('Please choose a ' + color_x);
return false;
}
}
$("input.catalog").click(function() {
popWarning( $(this) );
});​

How do you expect the script to know which form (and therefore elements with the same name attribute) you're talking about without specifying it? Try something like this:
$(document).ready(function(){
function popWarning(obj) {
var $form = $(obj).closest("form");
var size_x = $form.find("input[name='on0']").val();
var color_x = $form.find("input[name='on1']").val();
var sel_os0 = $form.find("select[name='os0']");
var sel_os1 = $form.find("select[name='os1']");
if (sel_os0.val() === "") {
alert('Please choose a ' + size_x);
return false;
}
if (sel_os1.val() === "") {
alert('Please choose a ' + color_x);
return false;
}
}
$("input.catalog").click(function() {
popWarning(this);
});
});
Working example:
http://jsfiddle.net/7YJ63/6/
This way, popWarning is able to grab the parent form from the input.catalog that triggered it by click, via obj (this passed in). Then, all elements/values are found with find because you know that the elements you're looking for are a descendent of the form.

You have two selects with the name os0 and two with the nameos1. That is the root of your problem.
The if statements do not pass once the first form is completed because the first DOM element with the name os0 has already been completed. Change the name to os2 or something similar and do unique if conditions.

I have the alert working for the first form on the page, but after the second form, my alert does not match the selected input value of that form.
That's not the problem, really. Try your JSFiddle, select a size, then click the color "add to cart" button. You'll see the correct message. The problem is that your click handler says "if size is empty, say size, otherwise if color is empty, say color".
I would rewrite your click event listener and scope it by its form, something like:
$('#sizeForm input.catalog').click(function(){
var form = $(this).parents('form');
...
});
...etc. That should make it easy to determine which form was clicked. Or possibly easier:
<input class="catalog size" ... />
$('input.catalog.size').click(function(){popWarning('size');});
...which could be more slick/dynamic so that you could handle all the forms in a single handler...but that's maybe overkill of an answer for the nature of your question.
Anyway. Good luck.

I think you can adhere more to DRY and elegance if you use the this keyword to iterate over the select lists with JQuery's each(). Something along these lines:
$("input.catalog").click(function() {
form = $(this).parent();
select = form.find("select");
message = '';
select.each(
function(){
if ($(this).val()=='') {
number = $(this).attr("name").substr(-1);
message+= $("input[name=on" + number + "]").val() + " ";
}
}
);
if (message!='') {
console.log("Please select the following: " + message);
return false;
}
});​

Select a form action depending on the option chosen from a select tag

I'm very new to this, so this may not the best way to go about solving this problem. Basically, I am trying to run one of three .php files upon a form submit. Which .php file I run should depend on what value the user chooses from the select field with id="periodDisplay". Would really appreciate some help.
<script>
function onSubmitForm(){
if(document.getElementById("periodDisplayed").selectedIndex == 'This Week')
{
return document.selectDisplay.action ="thisWeek.php";
}
else if(document.getElementById("periodDisplayed").selectedIndex == 'This Month')
{
return document.selectDisplay.action ="thisMonth.php";
}
else if(document.getElementById("periodDisplayed").selectedIndex == 'All Workouts')
{
return document.selectDisplay.action ="allWorkouts.php";
}
else
{
return document.selectDisplay.action = "index.html";
}
return true;
}
</script>
<form id="selectDisplay" onsubmit="return onSubmitForm();">
I want to see
<select id="unitDisplayed">
<option>Distance</option>
<option>Time</option>
</select>
for
<select id="periodDisplayed">
<option>This Week</option>
<option>This Month</option>
<option>All Workouts</option>
</select>
<input type="submit"></input>
</form>

Did you debug to see what selectedIndex returns? It returns an INTEGER, not the value/text of the selected option.
Why make it so complicated. Set the value to the page you want to go to and reference it. All of the code is reduced to one line.
HTML
<select id="periodDisplayed">
<option value="thisWeek.php">This Week</option>
<option value="thisMonth.php">This Month</option>
<option value="all.php">All Workouts</option>
</select>
JavaScript
function onSubmitForm() {
document.selectDisplay.action = document.getElementById("periodDisplayed").value;
return true;
}

Should be
function onSubmitForm(){
if(document.getElementById("periodDisplayed").value == 'This Week')
{
document.selectDisplay.action ="thisWeek.php";
return true;
}
....
document.selectDisplay.action = "index.html";
return true;
}