CODEWITHSUNDEEP
javascripthtmljqueryformsclass
DrCustUmz
DrCustUmz

Reputation: 388

using a jquery action within a form

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

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?

Upvotes: 0

Views: 51

Answers (1)

Papa
Papa

Reputation: 1638

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");
});

Upvotes: 2

Related Questions