Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Having a function operate on the press of a button

    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>
    Last edited by klutch_91; 03-04-2012 at 03:03 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,992
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    You should place your select lists in a form and then:-

    Code:
    <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
    Last edited by Philip M; 03-04-2012 at 03:34 PM. Reason: Correction

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 ?

  • #4
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by klutch_91; 03-04-2012 at 04:07 PM.

  • #5
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    59
    Thanks
    12
    Thanked 2 Times in 2 Posts
    Klutch 91 - when posting code please enclose it like so...

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

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,992
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    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).
    Last edited by Philip M; 03-04-2012 at 04:22 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 ???

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,992
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,992
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by klutch_91 View Post
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •