Javascript: Displaying Multiple Conditional Statements

Question

I am making a form that asks three unrelated questions which display text after clicking the submit button.

All three questions contain an if-else statement; two questions are text input and one is a selection box, followed by the submit button.

I can get the form to display, but when I enter data and submit the data, a blank form is returned instead of the text I wanted (I am not trying to display an 'alert' message).

This is what I have so far:

<!DOCTYPE HTML>
<html>
  <head>
  <title>Questions</title>

    <script type="text/javascript"> 

      function questions()
    {
    var hours, age, timeday;
    hours = document.form1.workhours.value;
    hours = pasrseInt(hours);
    age = document.form1.years.value;
    age = parseInt(age);
    timeday = document.form1.dayofweek.value;
    }

        if (hours >= 40)
        {
            document.write("Wow, what a hard worker!<br>");
        }
        else
        {
            document.write("Better work harder!<br>");
        }
        if (  age >= 65)
        {
            document.write("You are Eligible for retirement benefits<br>");
        }
        else
        {
            document.write("Sorry, no benefits yet.<br>");
        }
        if (day == "Sunday");
        {
            document.write("No need to pay the meter!<br>");
        }
        else
        {
            document.write("Better get some quarters!<br>");
        }

</script>
</head>
<body>
<form name="form1">
    How many hours have you worked? <input type="text" name="workhours"><br>
    How old are you? <input type="text" name="years"><br>
    What day is it today? 

    <select name="dayofweek">
    <option value="???">-Select a Day-</option>
    <option value="Sunday">Sunday</option>
    <option value="Monday">Monday</option>
    <option value="Tuesday">Tuesday</option>
    <option value="Wednesday">Wednesday</option>
    <option value="Thursday">Thursday</option>
    <option value="Friday">Friday</option>
    <option value="Saturday">Saturday</option>
    </select></br>
<p>
</p>
    <input type="submit" value="Submit" onClick="questions()">
</form>

</body>
</html>

epascarello · Accepted Answer · 2012-10-30 20:32:26Z

1

The problem you have is you are not cancelling the form submission so the page is refreshing. Add return false to the onclick.

<input type="submit" value="Submit" onClick="questions(); return false;">

Using document.write after the page load replaces the page content. You should be using innerHTML to add text to the page.

answered Oct 30, 2012 at 20:32

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript: Displaying Multiple Conditional Statements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related