简体   繁体   中英

Radio button values and submit buttons

I am writing a program that takes 3 questions and decides if any of them have the value of 0. Then when you hit submit it sends you to the next page which will write something based on if the value was 0 or 1. If it was 0 for any of them it should say false and if it is 1 for all then it should write pass.

When I click a radio button it will write false or pass correctly but this is only supposed to happen if the submit button is pressed. When I hit the submit button after selecting a radio button it changes the written words to pass no matter what is selected. When I have the onclick function to write pass/false on a different page it doesn't write anything. Can I not do this with just JavaScript? I need to be able to launch a new page that will either have more questions on it or that will then have results written to it. I was trying to use the least amount of pages possible.

I have the HTML and JavaScript files on their own pages.

This is the HTML page

<form id="myForm">
    <fieldset class="article">
        <h3>
            <legend>Eligibility Test</legend>
        </h3>
    </fieldset>
    <fieldset class="article">      
        <legend>Have you had your record expunged before?</legend>
        <input type="radio" name="field1" value="0" onclick="getscores1(this)" />
        <label>Yes</label>
        <input type="radio" name="field1" value="1" onclick="getscores1(this)" />
        <label>No</label>
    </fieldset>
    <fieldset class="article">
        <legend>Do you have any charges pending against you?</legend>
        <input type="radio" name="field2" value="0" onclick="getscores2(this)" />
        <label>Yes</label>
        <input type="radio" name="field2" value="1" onclick="getscores2(this)" />
        <label>No</label>
    </fieldset>     
    <fieldset>
        <legend>Is your drivers license suspended?</legend>
        <input type="radio" name="field3" value="0" onclick="getscores3(this)"/>
        <label>Yes</label>
        <input type="radio" name="field3" value="1" onclick="getscores3(this)"/>
        <label>No</label>
    </fieldset>
    <fieldset id="submitbutton" class="article">
      <input type="button" id="submit" value="submit" onclick="answer(this)" onclick="location.href ='testSite.html';"/>
    </fieldset>

    <script src="test.js"></script>
</body>

This is what I have on the testSite.html which the submit button goes to

this is answer

This is the JavaScript page

document.getElementById("submit").onclick = function () {
    location.href = "testSite.html";
};

function getscores1(score1) {
    answer(score1.value);
}

function getscores2(score2) {
    answer(score2.value);
}

function getscores3(score3) {
    answer(score3.value);
}

function answer(score1, score2, score3) {
    if (score1 == 0 || score2 == 0 || score3 == 0) {
        document.getElementById('totalScore').innerHTML = "false";
    } else{
        document.getElementById('totalScore').innerHTML = "pass";
    }
}

Thank you, Let me know if anything is confusing or anything and I'll fix it.

My best guess looking at this is, if it's calculating wrong, it's probably because you're passing the submit input into your answer function so it will set score1 to that element, then score2 and score3 are undefined so they wouldn't equal 0 either.

Save this as a file: my_html.html and run in the browser. Read the comments

<!DOCTYPE html>

<html>
<head>
  <title></title>
</head>

<body>
    <span>Total Score: </span> <span id="totalScore"></span>
  <form id="myForm">
    <fieldset class="article">
      <h3><legend>Eligibility Test</legend></h3>
    </fieldset>

    <fieldset class="article">
      <legend>Have you had your record expunged before?</legend> <input type="radio" name="field1" value="0" onclick="getscores1(this)"> <label>Yes</label> <input type="radio" name="field1" value="1" onclick="getscores1(this)"> <label>No</label>
    </fieldset>

    <fieldset class="article">
      <legend>Do you have any charges pending against you?</legend> <input type="radio" name="field2" value="0" onclick="getscores2(this)"> <label>Yes</label> <input type="radio" name="field2" value="1" onclick="getscores2(this)"> <label>No</label>
    </fieldset>

    <fieldset>
      <legend>Is your drivers license suspended?</legend> 
      <input type="radio" name="field3" value="0" onclick="getscores3(this)"> <label>Yes</label> 
      <input type="radio" name="field3" value="1" onclick="getscores3(this)"> <label>No</label>
    </fieldset>

    <fieldset id="submitbutton" class="article">
      <input type="button" id="submit" value="submit"> <!-- Don't do this: onclick="location.href ='testSite.html';" --> 
    </fieldset>
  </form>
</body>

  <script>
    var s1, s2, s3;
    [s1, s2, s3] = [0, 0, 0];

    document.getElementById("submit").onclick = function () {
        //location.href = "testSite.html"; //JavaScript context is on the client side for the current page only. When you reload the page, it gets recreated, all variables are re-initialized.
        answer(s1, s2, s3);
    };

    function getscores1(score1) {
        s1 = score1.value;
    }

    function getscores2(score2) {
        s2 = score2.value;
    }

    function getscores3(score3) {
        s3 = score3.value;
    }

    function answer(score1, score2, score3) {
        if (score1 == 0 || score2 == 0 || score3 == 0) {
            document.getElementById('totalScore').innerHTML = "false";
        } else{
            document.getElementById('totalScore').innerHTML = "pass";
        }
    }
  </script>
</html>
  • ashishjainblogger@gmail.com

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM