Having a function operate on the press of a button

[klutch_91]

I have created 4 drop down lists each drop down list has false values and one true value. (See the code below for the lists).
My plan is to cause a message to appear and a new page to appear based on all the values being true.

<input name="button" type="submit" class="main" id="button" value="Submit" #nclick="checkValues();"/>.
//This is the button and where I have tried to assign the check values function

<select name="select_box" size="1" class="main" id="select_box">
<option value="true">50p</option>
<option value="false">1p</option>
<option value="false" selected="selected">20p</option>
<option value="false">£2</option>
</select>
<select name="select_box4" size="1" class="main" id="select_box4">
<option value="true">£2</option>
<option value="false">1p</option>
<option value="false">20p</option>
<option value="false" selected="selected">50p</option>
</select>
<select name="select_box2" size="1" class="main" id="select_box2">
<option value="true">1p</option>
<option value="false">20p</option>
<option value="false">50p</option>
<option value="false" selected="selected">£2</option>
</select>
<select name="select_box3" size="1" class="main" id="select_box3">
<option value="true">20p</option>
<option value="false" selected="selected">1p</option>
<option value="false">50p</option>
<option value="false">£2</option>
</select>



Here is where I have had an attempt at trying to create the function and assign it to a button.
My logic was to assign variables to the names of the drop down lists.
Then with that variable assign another varible that will reference the value in a drop down list.
However when i run the code nothing happens at all Javascript doesnt seem to disassprove of any code,
but yet nothing happens.

function checkValues(){ // Ive tried applying this to a button so that the statements below should work on click but they do not

</script>
<script type="javascript">

var selectbox = document.getElementById("select_box");
var a = selectbox.options[selectbox.selectedIndex].value;

var selectbox2 = document.getElementById("select_box2");
var b = selectbox2.options[selectbox2.selectedIndex].value;

var selectbox3 = document.getElementById("select_box3");
var c = selectbox3.options[selectbox3.selectedIndex].value;

var selectbox4 = document.getElementById("select_box4");
var d = selectbox4.options[selectbox4.selectedIndex].value;

if (a == "true" && b == "true" && c == "true" && d == "true")
{
alert("Correct you have won press OK for your Reward!")
document.open("Reward.html");
}
else
{
alert("Not right Please try again!");
}
</script>

[Philip M]

You should place your select lists in a form and then:-

<script type="javascript">

function checkValues() {  // this line must be within the script tags
var a = document.formname.select_box.value;    // select_box is the name of the select list
var b = document.formname.select_box2.value; 
var c = document.formname.select_box3.value; 
var d = document.formname.select_box4.value; 

if (a == "true" && b == "true" && c == "true" && d == "true") { 
alert ("Correct you have won press OK for your Reward!") 
window.location.href = "Reward.html";   // redirect to new page
} 
else { 
alert ("Not right Please try again!"); 
} 
}

</script>

You should not use a button of type "submit" as you are not submitting the form. Use simple <"input type = "button", which needs no name or id.

You seem to be uncertain as to the difference between the value of a select list option and the selectedIndex of that option.

"Think about how stupid the average person is, and then realize that half of them are more stupid than that!" - George Carlin

[klutch_91]

ive placed the the drop down lists and the button into a form

I also changed the button from being a submit button to the option that says none

<input type="button" name="button" id="button" value="Confirm" onclick="checkValues();"/>// the new button with the check values function

Then i applied that code and still nothing happend, i also tried it when i had the submit button and when i clicked it, it just kept on refreshing the page regardless of the options ?

[klutch_91]

I have changed the button type from subit to the none option which has the input type as button,

<input type="button" name="button" id="button" value="Confirm" onclick="checkValues();"/>

I placed all the lists and the button into a form

<form id="form1" name="form1" method="post" action="">
<p>
<select name="select_box" size="1" class="main" id="select_box">
<option value="true">50p</option>
<option value="false">1p</option>
<option value="false" selected="selected">20p</option>
<option value="false">£2</option>
</select>
<select name="select_box4" size="1" class="main" id="select_box4">
<option value="true">£2</option>
<option value="false">1p</option>
<option value="false">20p</option>
<option value="false" selected="selected">50p</option>
</select>
<select name="select_box2" size="1" class="main" id="select_box2">
<option value="true">1p</option>
<option value="false">20p</option>
<option value="false">50p</option>
<option value="false" selected="selected">£2</option>
</select>
<select name="select_box3" size="1" class="main" id="select_box3">
<option value="true">20p</option>
<option value="false" selected="selected">1p</option>
<option value="false">50p</option>
<option value="false">£2</option>
</select>

I assume where it says .formname thats the name of the form I have.

When I applied the code with the submit type button it just kept refreshing the page. When I changed the button to inout type button, back to square one and nothing happend

and sorry about the double post above I didnt realise I had double posted

[MancunianMacca]

Klutch 91 - when posting code please enclose it like so...

[code ]
...... Your code here......
[/code]

[Philip M]

I am so sorry.

<script type="javascript">

should read <script type = "text/javascript">

Actually I just copied and pasted it from your post, but I ought to have noticed it myself!

Submitting the form with a submit button will cause the page to refresh (i.e. submit to itself).

[klutch_91]

I changed the code type, it works thank you the message appears for outcomes with all the different options I pick but when the outcome is true the message does appear as it should but the page does not go onto another page it just refreshes ???

[Philip M]

Have you changed the "submit" button to "button"?

It works for me. Does the page "Reward.html" exist in the right directory?
Try testing with
window.location.href = "http://www.google.com";

By the way, you need to understand the difference between the string values "true" and "false", and the Boolean values true and false.

[klutch_91]

ive changed the submit button to a button, button and it fully works now thank you so much ive being slaving over this for the past day or 2 trying different things. Based on my knowledge isint Boolean only one of two values true or false and string true and false would be just words ?

and thank you again

[Philip M]

Originally Posted by klutch_91

Based on my knowledge isint Boolean only one of two values true or false and string true and false would be just words ?

Yes, that's right! But you can see the potential for confusion.