JQuery .on(click) event handler not stopping submit when element is clicked

Question

I have a form with a table inside it. The table has four input elements each with type=submit. The form also has a hidden input element. What I want to do is the following:

When one of the four input elements is clicked, a jQuery event should fire that:

Stops submission
Sets the id of the clicked element as the value of the hidden input
Submits the form

The event is not firing and the form is being submitted normally. I can't see what the issue is. Any help is appreciated.

<form id="myForm" method="post" action="" style="background-color: antiquewhite; margin: 0; padding: 0;">
  {% csrf_token %}
  <input type="hidden" id="op" name="op" value="">
  <table align="center" style="width: 100%;" border="1" style="background-color: antiquewhite; margin: 0; padding: 0;">
    <tr>
      <td rowspan="2">
        <h3>Is this an <i>origin</i> for the <i>claim?</i></h3>
      </td>
      <td><input type="submit" id="1" value="Yes"></td>
      <td><input type="submit" id="2" value="No"></td>
    </tr>
    <tr>
      <td><input type="submit" id="3" value="Invalid Input"></td>
      <td><input type="submit" id="4" value="Don't Know"></td>
    </tr>
  </table>
</form>

$("input").on('click', function(e) {
  e.preventDefault();
  let choice = e.target.id;
  document.getElementById("op").value = choice;
  $("#myForm").submit();
});

Given that the `value` of the button that's clicked will be sent in the request if you give it a `name` attribute, why not just do that, and remove all the unnecessary JS and hidden field(s) — Rory McCrossan, Jul 08 '19 at 15:18
@RoryMcCrossan if you can show me how would I get that value in Django (which is where I am submitting this form) I can just do that. Otherwise I am stuck as I have no idea how to get it from Django. — Mohamad Moustafa, Jul 08 '19 at 15:21
You receive it in the exact same way you would the `op` value right now, you just change `op` to whatever you name the buttons — Rory McCrossan, Jul 08 '19 at 15:21
Here's an example: https://stackoverflow.com/questions/10607091/how-can-i-access-the-form-submit-button-value-in-django — Rory McCrossan, Jul 08 '19 at 15:23
Is your table generated *after* your jquery `$("input").on("click...` has run? Change to `$(document).on('click', 'input', function() ...` (maybe give them a class to be clearer, `$(document).on('click', 'input.button', function() ...` — freedomn-m, Jul 08 '19 at 15:34
Might even just be that you need to wrap your click handler in doc ready: `$(function() { $("input").on("click"....` — freedomn-m, Jul 08 '19 at 15:36
@FlashThunder that's what `e.preventDefault();` does (more or less), except `e.preventDefault();` as the first line also works when there's a script error and the `return false` doesn't get hit. — freedomn-m, Jul 08 '19 at 15:37
@RoryMcCrossan I ended up just using the value of the buttons. Works fine — Mohamad Moustafa, Jul 08 '19 at 15:42
@freedomn-m The script tags with the JQuery are before the table, but I wait for both table and function to load before clicking. — Mohamad Moustafa, Jul 08 '19 at 15:42
There's your problem them. Move the code to the end or wrap it in doc ready. Or use event delegation. When you run `$("input"..` it only affects the elements that exist at the time the code runs - in your case, before they exist. — freedomn-m, Jul 08 '19 at 15:45
While not strictly "dynamically created" elements, this also applies to "elements created after the code runs": https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — freedomn-m, Jul 08 '19 at 15:46

score 1 · Answer 1 · answered Jul 08 '19 at 15:43

1

The line:

$("#myForm").submit();

causes the submission of the form, even though you have earlier prevented the default button click submission with the line

e.preventDefault();

answered Jul 08 '19 at 15:43

DrCord

3,750
2
31
44

Charles. Hi · Answer 2 · 2019-07-08T16:04:50.360

You can create a class and just attach it to your inputs

 <form id="myForm" method="post" action="" style="background-color: antiquewhite; margin: 0; padding: 0;">
  {% csrf_token %}
  <input type="hidden" id="op" name="op" value="">
  <table align="center" style="width: 100%;" border="1" style="background-color: antiquewhite; margin: 0; padding: 0;">
    <tr>
      <td rowspan="2">
        <h3>Is this an <i>origin</i> for the <i>claim?</i></h3>
      </td>
      <td><input type="text" class="custom-trigger" id="1" value="Yes"></td>
      <td><input type="text" class="custom-trigger" id="2" value="No"></td>
    </tr>
    <tr>
      <td><input type="text" class="custom-trigger" id="3" value="Invalid Input"></td>
      <td><input type="text" class="custom-trigger" id="4" value="Don't Know"></td>
    </tr>
  </table>
</form>

and then just get it in the js

$(".custom-trigger").on('click', function(e) {
   let choice = e.target.id;
   document.getElementById("op").value = choice;
  $("#myForm").submit();
});

Doing that you won't need to submit the form until it is ready with what you need.

JQuery .on(click) event handler not stopping submit when element is clicked

2 Answers2