using a jquery action within a form

Question

I have two buttons contained within a form. One of which adds a class when clicked, while the other removes the added class.

<form action="newreply.php?do=postreply&amp;t=15" method="post" id="quickreply">
<!-- OTHER CODE HERE -->
<div class="toolbar-group pull-right editor-mode-dive-only">
  <button tabindex="-1" class="btn btn-default" title="Exit distraction-free mode." id="editor-button-exitdive">
    <i class="fa fa-compress"></i>
  </button>
</div>
<div class="toolbar-group pull-right editor-mode-dive-hidden">
  <button tabindex="-1" class="btn btn-default" title="“Dive” into distraction-free writing mode." id="editor-button-dive">
    <i class="fa fa-expand"></i>
  </button>
</div>
<!-- OTHER CODE HERE -->
<button class="btn btn-primary" type="submit" accesskey="s" name="sbutton" id="qr_submit" onclick="clickedelm = this.value">Post <span class='loading'></span></button>
</form>

The jQuery code for these buttons is as follows.

$('#editor-button-dive').click(function() {
  $("#vB_Editor_QR").addClass("editor-mode-dive");
});

$('#editor-button-exitdive').click(function() {
  $("#vB_Editor_QR").removeClass("editor-mode-dive");
});

Every time I click the expand button it is triggering the submit button, I have...

Watched console for any errors.
Attempted to rename variables.
Tried moving the buttons around.

I can't seem to get the button to not submit the form, and just simply add the class. This should be simple, but has managed to turn into one giant headache. I can post more of the code if needed, but I felt the issue lied somewhere in the code provided.

Do you see what I'm doing wrong, or know a way I can achieve adding a class to a div on click any other way?

Papa · Accepted Answer · 2020-05-21 05:22:09Z

2

Both of your buttons have id="editor-button-dive". Ids need to be unique. The second button's id should be id="editor-button-exitdive".

To stop the buttons submitting, move them outside of the form.

If you need to keep them inside the form for whatever reason, you can prevent the default submit event like so:

$('#editor-button-dive').click(function(e) {
  e.preventDefault();
  $("#vB_Editor_QR").addClass("editor-mode-dive");
});

answered May 21, 2020 at 5:22

Papa

1,6481 gold badge11 silver badges17 bronze badges

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

4 Comments

DrCustUmz Over a year ago

Thanks so much Papa, I overlooked the second ID. As for the rest, greatly appreciated.

DrCustUmz Over a year ago

Papa, after implementing this method (and fixing the duplicate ID) I am still receiving the same result. Clicking the button still only triggers the submit button. I am going to try moving the buttons out of the form (as long as I can keep their positions) and I will report back.

Papa Over a year ago

I just did this in a fiddle and it worked for me. If you want use preventDefault, please post updated code.

DrCustUmz Over a year ago

Papa, works flawlessly. Just had to move the script out of the form, left the buttons in place =)

Collectives™ on Stack Overflow

using a jquery action within a form

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related