表格选择提交时的第一个单选按钮

时间:2017-10-25 17:13:14

标签: javascript html forms

我有一个HTML程序(借用凌乱的代码),这个程序用于在特定时间打开Goog​​le教室窗口和另一个窗口(如果用户需要)。提交第一次运行form时,无论您选择什么,当您按提交时,它都会转到第一个选项。

<form onsubmit="return firstrunFunction2();" class="firstrunfalse" id="Pdls">
  <p>First run:
    <br>To setup, please type the class code for each classroom.
    <br>EX: <i>https://classroom.google.com/u/0/c/<strong> NzA2MDk5NzM5MVpa</strong></i>
    <br>Please <strong>only</strong> put the end code or else the application will fail to run properly.</p>
  <br>
  <input type="text" id="pd1" placeholder="Period 1">
  <br>
  <input type="radio" name="period1" id="period1typemath" value="Math">Math
  <br>
  <input type="radio" name="period1" id="period1typescience" value="Science">Science
  <br>
  <input type="radio" name="period1" id="period1typeother" value="Other">Other
  <br>
  <input type="radio" name="period1" id="period1typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period1customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="text" id="pd2" placeholder="Period 2">
  <br>
  <input type="radio" name="period2" id="period2typemath" value="Math">Math
  <br>
  <input type="radio" name="period2" id="period2typescience" value="Science">Science
  <br>
  <input type="radio" name="period2" id="period2typeother" value="Other">Other
  <br>
  <input type="radio" name="period2" id="period2typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period2customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="text" id="pd3" placeholder="Period 3">
  <br>
  <input type="radio" name="period3" id="period3typemath" value="Math">Math
  <br>
  <input type="radio" name="period3" id="period3typescience" value="Science">Science
  <br>
  <input type="radio" name="period3" id="period3typeother" value="Other">Other
  <br>
  <input type="radio" name="period3" id="period3typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period3customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="text" id="pd4" placeholder="Period 4">
  <br>
  <input type="radio" name="period4" id="period4typemath" value="Math">Math
  <br>
  <input type="radio" name="period4" id="period4typescience" value="Science">Science
  <br>
  <input type="radio" name="period4" id="period4typeother" value="Other">Other
  <br>
  <input type="radio" name="period4" id="period4typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period4customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="text" id="pd5" placeholder="Period 5">
  <br>
  <input type="radio" name="period5" id="period5typemath" value="Math">Math
  <br>
  <input type="radio" name="period5" id="period5typescience" value="Science">Science
  <br>
  <input type="radio" name="period5" id="period5typeother" value="Other">Other
  <br>
  <input type="radio" name="period5" id="period5typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period5customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="text" id="pd6" placeholder="Period 6">
  <br>
  <input type="radio" name="period6" id="period6typemath" value="Math">Math
  <br>
  <input type="radio" name="period6" id="period6typescience" value="Science">Science
  <br>
  <input type="radio" name="period6" id="period6typeother" value="Other">Other
  <br>
  <input type="radio" name="period6" id="period6typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period6customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="text" id="pd7" placeholder="Period 7">
  <br>
  <input type="radio" name="period7" id="period7typemath" value="Math">Math
  <br>
  <input type="radio" name="period7" id="period7typescience" value="Science">Science
  <br>
  <input type="radio" name="period7" id="period7typeother" value="Other">Other
  <br>
  <input type="radio" name="period7" id="period7typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period7customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="text" id="pd8" placeholder="Period 8">
  <br>
  <input type="radio" name="period8" id="period8typemath" value="Math">Math
  <br>
  <input type="radio" name="period8" id="period8typescience" value="Science">Science
  <br>
  <input type="radio" name="period8" id="period8typeother" value="Other">Other
  <br>
  <input type="radio" name="period8" id="period8typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period8customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="text" id="pd9" placeholder="Period 9">
  <br>
  <input type="radio" name="period9" id="period9typemath" value="Math">Math
  <br>
  <input type="radio" name="period9" id="period9typescience" value="Science">Science
  <br>
  <input type="radio" name="period9" id="period9typeother" value="Other">Other
  <br>
  <input type="radio" name="period9" id="period9typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period9customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="text" id="pd10" placeholder="Period 10">
  <br>
  <input type="radio" name="period10" id="period10typemath" value="Math">Algebra
  <br>
  <input type="radio" name="period10" id="period10typeother" value="Other">Academic Advisor
  <br>
  <input type="radio" name="period10" id="period10typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period10customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="submit" id="submitFirstrun">
</form>

这是pastebin

2 个答案:

答案 0 :(得分:0)

这应该这样做。回答问题&#34;表格在提交时选择第一个单选按钮&#34;。

    // All Browsers
    var inputs = document.getElementsByTagName('input');
    for (var i of inputs)
        if(i.type.toLowerCase() === 'radio'){
            console.log(i);
            break;
        }

    // New Browsers
    console.log(document.querySelectorAll('input[type=radio]')[0]);

答案 1 :(得分:0)

在您的代码中

if (document.getElementById('period1typescience').checked = true) {
    document.cookie = "period1type=science; expires=Mon, 18 Jun 2018 12:00:00 GMT-0400 EDT;";
} else if (document.getElementById('period1typemath').checked = true) {
    document.cookie = "period1type=math; expires=Mon, 18 Jun 2018 12:00:00 GMT-0400 EDT;";
}
....

document.getElementById('period1typescience').checked = true始终返回true。 你想检查布尔值,你可以使用

document.getElementById('period1typescience').checked == true

document.getElementById('period1typescience').checked === true

甚至更简单

document.getElementById('period1typescience').checked

.checked已经返回一个布尔值,因此您无需检查它是否等于true。由于该语句返回true,因此始终设置第一个条件。

对于几乎所有的值检查,这都是一个问题,而不仅仅是第一个。