Question

我正在制作一个Web应用程序，但我在努力替换页面。在函数myPage()中，当我将location.replace("file.html");放在开头时，如果我没有在Web应用程序中插入inputs，但是当我将location.replace("file.html");插入时，它可以工作if语句中的所有内容根本不起作用，并且在这里需要放置location.replace。

请帮助我。

js代码：

    var submit = document.getElementById("submit");
    submit.addEventListener("click",myPage);

    function myPage(){
        //location.replace("file.html"); // here this is working
        var name=document.formId.nameRadio.value;//name="abc"
        if (name=="abc"){
            location.replace("file.html");//but here not
        }
    }

html代码：

<form  id="formId" name="formId" >
        <label>sth </label><br><br>
        <label for="name"> name  </label>
        <input type="text" id="name" name="name" required>
        <fieldset>
        <legend>sth</legend>
        <ul class="class-radio" >
            <li> <input  type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
            <li> <input  type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>

        </ul>
        </fieldset>
        <input id="submit" type="submit" value="next" >
        </form>

Answer 1

将按钮类型更改为button。您的浏览器首先提交。

    var submit = document.getElementById("submit");
    submit.addEventListener("click",myPage);

    function myPage(){
        //location.replace("file.html"); // here this is working
        var name=document.formId.nameRadio.value;//name="abc"
        alert(name);
        if (name=="abc"){
            location.replace("file.html");//but here not
        }
    }

<form  id="formId" name="formId" >
        <label>sth </label><br><br>
        <label for="name"> name  </label>
        <input type="text" id="name" name="name" required>
        <fieldset>
        <legend>sth</legend>
        <ul class="class-radio" >
            <li> <input  type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
            <li> <input  type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>

        </ul>
        </fieldset>
        <input id="submit" type="button" value="next" >
        </form>

Answer 2

您可以通过将preventDefault()添加到onClick函数中来停止常规表单提交。

var submit = document.getElementById("submit");
submit.addEventListener("click", myPage);


function myPage(e) {
  //prevent form submission
  e.preventDefault();

  var name = document.getElementById('formId').nameRadio.value;
  if (name == "abc") {
    location.replace("file.html"); 
  }
}

<form id="formId" name="formId">
  <label>sth </label><br><br>
  <label for="name"> name  </label>
  <input type="text" id="name" name="name" required>
  <fieldset>
    <legend>sth</legend>
    <ul class="class-radio">
      <li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
      <li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>

    </ul>
  </fieldset>
  <input id="submit" type="submit" value="next">
</form>

Answer 3

您似乎希望对表单提交进行更多控制。
您可以将输入类型从“提交”更改为“按钮”。还要重命名该按钮以避免confusion with submit method of the form。
您还可以通过直接在输入上使用click事件来简化代码。
您可以尝试以下操作：

<html>
   <body>
      <form id="formId" name="formId">
         <label>sth</label><br><br>
         <label for="name">name</label>
         <input type="text" id="name" name="name" required>
         <fieldset>
            <legend>sth</legend>
            <ul class="class-radio">
               <li><input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
               <li><input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
            </ul>
         </fieldset>
         <input id="btnSubmit" type="button" value="next" onclick="mySubmit()">
      </form>
      <script>
           function mySubmit()
           {
               var name = document.formId.nameRadio.value;
               if (name == "abc"){
                   location.replace("file.html");
               } else {
                   // Submit a form
                   document.formId.submit();
               }
           }
      </script>
   </body>
</html>

JavaScript：location.replace在该函数中不起作用

3 个答案: