Develop Reference

Javascript redirect to two thank you pages, depending on form response

There is a yes or no field on the form, depending on user's choice I would like to send them to a different thank you page depending on their answer.
With this, I just get a blank page. I've tried everything I can think of, so I appreciate any insight.
<form action="http://www.google.com/form" name="Lead" id="Lead" class="sem-form" onsubmit="return redirectTY()">
<label class="select">
<select name="Invest_RD" id="Invest_RD">
<option value="Yes">Yes</option>
<option selected="selected" value="No">No</option>
</select>
</label>
</form>
function redirectTY(){
var qualify = document.getElementById("Invest_RD".value);
if (qualify == "Yes"){
window.location.href='http://www.google.com';
} else {
window.location.href='http://www.bing.com';
}
}

Your code looks fine, except for this detail:
document.getElementById("Invest_RD".value);
This will crash all your javascript. Probably your console (developer tools) have red messages refered to this. To fix it write:
document.getElementById("Invest_RD").value;
That's because getElementById() is a method of document, and value is a property of the element returned by getElementById().

In your code snippet you are missing the submit button to submit the form or any other action call that executes the button submit. When the action call is done alone the form will submit and you can check upon the values.
Hence your HTML will look like
<form action="" name="Lead" id="Lead" class="sem-form" onsubmit="return redirectTY()">
<label class="select">
<select name="Invest_RD" id="Invest_RD">
<option value="Yes">Yes</option>
<option selected="selected" value="No">No</option>
</select></label>
<input type="submit" name="submit" value="SUBMIT" />
</form>
You no need an action to the since it is calling the JS after the form is submitted and you can catch up from there on.
The select tag value can be retrieved using the following JS and you can perform the calculations.
$('#Invest_RD').val(); // Getting the selected value from the select tag

Add submit button <input type ="submit" value="submit"> to trigger the onsubmit event in your html form. and change onsubmit = "redirectTY();return false;"
<label class="select">
<select name="Invest_RD" id="Invest_RD">
<option value="Yes">Yes</option>
<option selected="selected" value="No">No</option>
</select></label>
<input type ="submit" value="submit">
</form>

Retrieving an element value from a form present several times in one page

Using server side code Im creating several forms using the same class to prevent the submit using jquery, this forms have a select box and depending of their value i make something.
<form class="fooForm">
<select name="fooBox">
<option value="bar">bar</option>
</select>
<button type="submit">Send!</button>
</form>
<form class="fooForm">
<select name="fooBox">
<option value="bar11">bar11</option>
</select>
<button type="submit">Send!</button>
</form>
<form class="fooForm">
<select name="fooBox">
<option value="bar22">bar22</option>
</select>
<button type="submit">Send!</button>
</form>
<script>
$(".fooForm").submit(function (e) {
e.preventDefault();
//How do I read the value of he current selectbox ???
});
</script>
A this point I wonder, is this valid html? And how do I read the value of the seletbox from the form that is trying to post?

jQuery
$(".fooForm").submit(function (e) {
e.preventDefault();
console.log($(this).children('select').val());
alert($(this).children('select').val());
});
Hope this helps...!!!

The form that was submitted is stored in this, and the selectbox can be found by wrapping the element in a jQuery container and applying .find(). The value of a select is retrieved with .val().
$( this ).find( 'select' ).val();
As for the validity of the HTML, run it through a validator. (It is.)

Select list is populated correctly but value not included in POST

I have a webpage that uses a JavaScript function to populate a second dropdown box when an item from a first dropdown box is picked. The function creates the second drop down changing this:
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
</div>
</td>
to this:
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
<select name="personName">
<option value="Bob" name="personName">Bob</option>
<option value="Jim" name="personName">Jim</option>
<option value="Tom" name="personName">Tom</option>
</select>
</div>
</td>
My problem is that when the form button is pressed it does not POST the personName value chosen from the created list. If I write exactly the same code manually, so the function is not called, then it works. If I use the function to create the list it doesn't (no string at all gets POSTED). Why might this be?

You may have a conflict with the name property. Remove the name property from all of the options;you only need it on the select element. Also, make sure (recommend using Firebug) that the markup you are giving above is literally what does get produced; I've had before where injecting elements aren't in the <form> tag as expected, depending on how it's used sometimes.

You are not closing your form tag. Probably there lies your issue.
The HTML generated content should work to POST your values. Probably because the FORM is not closed, the browser will close it for you on a spot you do not expect.
Also you only need a name attribute on your SELECT.

Try this.
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
</div>
</form>
</td>
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
<select name="personName">
<option value="Bob" >Bob</option>
<option value="Jim" >Jim</option>
<option value="Tom" >Tom</option>
</select>
</div>
</form>
</td>

two submits buttons ,but the first returns empty

i have the first select options
<form id="infform" method="post">
<select id="infmenu" name ="infmenu" size="1" class="select" >
<option value="0" >Please Select your article</option>
<option value="3" selected='selected' > value 1</option>
<option value="2" > value 2</option>
<option value="18" > value 3</option>
<option value="16" > value 4</option>
</select>
<input type="hidden" name="hiddenselect" value="3" />
</form>
and the second is
<form action="" method="POST" id="form0">
<input type="text" name="date0" class="tcal" value="" readonly="readonly" /><br />
<input type="image" src="../submit.png"/>
<input type="hidden" name="submit0" />
</form>
this my javascript
function displayv() {
var singleValues = $("select option:selected").text();
$("#hiddenselect").val(singleValues);
$("select > option:first").prop("disabled", "disabled")
}
$(document).ready(function(){
$("select").change(function() {
displayv();
});
displayv();
$("select#infmenu").change(function() {
$("#infform").submit();
});
});
now when i select the first option the page refresh and i get the value selected.
and when i submit the second submit the page refreshes and the first select option returns empty Please Select your article.
so how should this be fixed please .
EDIT :
this the php how i handle between them.
if (isset($_POST['infmenu'])){
$infmenu = $_POST['infmenu'];
// some sql of updating here
}
if (isset($_POST['submit0'])){
//some updating sql here
}

It's not really clear to me what your question really is.
If you're saying you're not seeing your select item value when you submit the second form, then that is normal and expected. You have two independent forms so when you submit the second form, the data from the first form will not be sent to the server.
The submit button /image only sends data for the inputs within it's own form, not data from any other forms within your html body tag.
Edited to add: you could:
have a single form tag instead of two
modify your jquery so that it puts the select value into the hidden field of the second form s well as the hidden field of the first. Then when second form is submitted, have your PHP script read the hidden field value and use that when rendering the HTML to decide which option has the selected attribute.
use cookies with some JavaScript to set the cookie when the value of select changesuse Ajax to do a partial submit - assuming server doesn't need to know value of select item when dealing with second form

There is no action="" assigned to the first button.

You have two forms.
When you click the submit in the second form, of course the data of the first form is not submitted.
Also, the submit button in the second form has no name, so you perhaps cannot evaluate in PHP if the button is clicked. But that's a different story
You should make the two forms one.
If they are too far apart on your page. You should save the value of the select box in the hidden field in the second form with php

Grabbing select value using regular javascript DOM

I was working on a script that grabs the value from the selected option in a drop down select list and assigns it to an object. The only problem I'm having is that it's saying I have a null object.
The .js is as follows:
var s = document.getElementById('mode');
alert(s.options[s.options.selectedIndex].value);
function selectValue(){
yo.newSelect(s.options[s.options.selectedIndex].value);
return true;
}
The HTML is as follows:
<div id="text_editing">
<form action="javascript:;" method="post" onsubmit="editHomePage()">
<select name="CYD" id="mode" onchange="selectValue()">
<option value="Home">Home</option>
<option value="About">About</option>
<option value="Contact">Contact</option>
</select>
<textarea name="sexyText" row="500" col=500">
</textarea>
<input value="submit" name="text_submit" type="submit" onclick="selectValue()">
</form>
I'm just looking for a solution in plain js. I not interested in using jQuery for such a small site.

If all your options have a value, you can simply write:
alert(s.value);
which will return the value of the first selected option (so not suitable for multiple selects with more than one selected).
Incidentally, from your listener you could do:
<input type="submit" onclick="selectValue(this)">
then in the function:
function selectValue(el) {
alert(el.form.mode.value);
}

It looks like initially, none of the options are selected; therefore, s.options[s.options.selectedIndex] would be null when the page first loads.
I would recommend using the Firebug plugin for Firefox to step through your code; you can easily identify these kinds of issues using the debugger.