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
– Pointy, Commented Feb 18, 2020 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
– loveprogr, Commented Feb 18, 2020 at 22:28
submit buttons submit so you have two actions happening at once.... console.log() is your friend with debugging values. — epascarello
– epascarello, Commented Feb 18, 2020 at 22:29
@Barmar I'm really sorry but i'm not native speaker of english.thank you — loveprogr
– loveprogr, Commented Feb 18, 2020 at 22:55

db1975 · Accepted Answer · 2020-02-18 22:29:14Z

1

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>

answered Feb 18, 2020 at 22:29

db1975

7853 silver badges9 bronze badges

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

1 Comment

GetSet Over a year ago

Was thinking the same

Ed Lucas · Accepted Answer · 2020-02-19 19:50:58Z

0

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>

edited Feb 19, 2020 at 19:50

answered Feb 18, 2020 at 22:32

Ed Lucas

7,4644 gold badges41 silver badges52 bronze badges

2 Comments

Barmar Over a year ago

You should explain what the problem was and how you solved it, not just post code.

Ed Lucas Over a year ago

Yep. I think I whacked it by accident.

Tony · Accepted Answer · 2020-02-18 22:38:51Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related