JavaScript: location.replace doesn't work in the function

Question

I'm making a web app and I'm struggling with replacing the page. In the function myPage(), when I put the location.replace("file.html"); in the start, it works if I don't insert inputs on the web app, but when I put the location.replace("file.html"); in the if statement then doesn't work at all, and is there where I need to put the location.replace.

Please help me.

js code:

    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 code:

<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>

Well the most likely reason is that `name` is not equal to "abc". — Pointy, Feb 18 '20 at 22:22
@Pointy thank you for answer me,but its not this....because i have tested it by printing sth in the if statement...and it was printed... — loveprogr, Feb 18 '20 at 22:28
submit buttons submit so you have two actions happening at once.... `console.log()` is your friend with debugging values. — epascarello, Feb 18 '20 at 22:29
@Barmar I'm really sorry but i'm not native speaker of english.thank you — loveprogr, Feb 18 '20 at 22:55

score 1 · Answer 1 · answered Feb 18 '20 at 22:29

change your button type to button. your browser submits first.

    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>

Ed Lucas · Accepted Answer · 2020-02-19T19:50:58.977

You can stop the usual form submission by adding preventDefault() to your onClick function.

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>

You should explain what the problem was and how you solved it, not just post code. — Barmar, Feb 19 '20 at 18:41

Tony · Answer 3 · 2020-02-18T22:38:51.557

It seems that you want more control over the form submit.
You can change the input type from submit to button; Also rename that button to avoid confusion with submit method of the form.
You can also simplify the code, by using the click event directly on the input.
Here is something you can try:

<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 doesn't work in the function

3 Answers3