stop submit button to not do post and return to same page

Question

<div>
  <div>
    <fieldset>
      <div style="min-height: 600px;">

           <div class="row">

    <div class="col-xs-12">
      <div class="form-group">
        <label class="control-label" for="Order">Order<span style="color:red !important;">*</span></label>
        <input class="form-control" name="Order" id="sortOrder" type="number" placeholder="Order" ng-model="vm.sortOrder" autocomplete="off" required/>
      </div>
    </div>
    <br>  <br>
  </div>




      <div class="row"></div>  
    <div class="row">
      <div class="col-xs-12 form-group">

        <md-button class="md-raised md-primary" type="button" ng-click="vm.doSomeThing()">Do</md-button>

      </div>  
    </div>

    </div>
    </fieldset>
  </div>
  </div>

When i click do button. i want it to to fire doSomething and then come back to same place and do not submit form or change page. Even though i put type =" button" and not submit , it redirecting me away from the modal i am on. I don't understand why? I tried some solutions from this page Can I make a <button> not submit a form?... They did not work somehow

score 1 · Answer 1 · answered Jun 15 '20 at 18:16

1

You can use the 'preventDefault' event to stop the button from submitting. Use the fallowing for your reference. https://www.w3schools.com/jsref/event_preventdefault.asp

answered Jun 15 '20 at 18:16

Wassaf Shahzad

158
5

Some how that didn't help. There is a simple problem i cannot see here i think. – NoStressDeveloper Jun 15 '20 at 19:36
could you share the function doSomething as well – Wassaf Shahzad Jun 15 '20 at 20:35
check my answer @wassaf – NoStressDeveloper Jun 16 '20 at 14:03

score 1 · Answer 2 · answered Jun 15 '20 at 20:36

1

I see you are using Angular. I used simple JavaScript and HTML in this solution. You can modify to have your code return the proper boolean or just hard code a "return false" if you wish. The key element is the onclick clause: onclick="return doSomeThing();"

<script>
    function doSomeThing() {
        var shouldISubmit = false;
        return shouldISubmit;   // You can conditionally return true (submit) or false (do not submit)
    };
</script>

<form>
    <div class="col-xs-12 form-group">
        <button type="submit" onclick="return doSomeThing();">Do</button>
    </div>
</form>

answered Jun 15 '20 at 20:36

George

21
4

I tried this solution before like returning false, i tried it again after your suggestion. Still it does not work. Something is overriding everything may be – NoStressDeveloper Jun 15 '20 at 20:45
Agreed, there must be something else going on. I would suggest simplifying down to the bare minimum in a test file to find out what is wrong. – George Jun 15 '20 at 22:03
I found it, Check my answer @Geroge – NoStressDeveloper Jun 16 '20 at 14:04
Glad you found it! It would be nice if I got an upvote on my solution :) – George Jun 19 '20 at 18:42

score 1 · Accepted Answer · answered Jun 16 '20 at 14:02

Something completely unrelated happening in my project which is making the problem. There is a method which redirects it to a different page when i click submit. I just changed that method and now it does not post and returns to same page. This is very specific to my project.

stop submit button to not do post and return to same page

3 Answers3