-3

I'm trying to use the solution from here to submit a form using the link it contains (instead of using the standard input submit button)

<form id="form-id">
   <button id="your-id">submit</button>
</form>

var form = document.getElementById("form-id");

document.getElementById("your-id").addEventListener("click", function () {
  form.submit();
});

The form is a table of records that each have an 'E' link in the left-most column used to load the record for editing

<td style="text-align:center;">
    <a id="a_edit_btn_#RecordId#">E</a>&nbsp;&nbsp;
</td>

and I would like to fire off the following when it is clicked

document.getElementById( $("a[id^='a_edit_btn_']").get(0).getAttribute("id") ).addEventListener("click", function () {
    ...
    form.submit();
});

but get the following error

Uncaught TypeError: Cannot read property 'getAttribute' of undefined

Is it possible to use a selector in this way to obtain the Id attribute?

Community
  • 1
  • 1
samus
  • 6,102
  • 6
  • 31
  • 69

1 Answers1

4

Forget that hodge-podge mix of jQuery and pure Javascript - your addEventListener code would only work on one element at a time, whereas a jQuery event handler can be bound to multiple elements at once:

$("a[id^='a_edit_btn_']").on('click', function() {
    // the ID of the clicked link will be in "this.id"
    var which = this.id;

    form.submit();
});

That said - is it really your intent that these multiple buttons all cause a form submit?

Alnitak
  • 334,560
  • 70
  • 407
  • 495
  • I though he wanted to only do it for the first item? – nem035 Jan 07 '16 at 16:59
  • @nem where does he say that? He said "each record has a link in the left column". – Alnitak Jan 07 '16 at 17:02
  • @Alnitak I just assumed it because he used [`get(0)`](https://api.jquery.com/get/) – nem035 Jan 07 '16 at 17:04
  • This is slick, I will try fer sure... We'll it's a ColdFusion thing. Each E link's name has encoded in it the associated RecordId. The form's "action page" (which is the same page) will use this record Id to requery the DB for the complete record so all fields can be edited. The original table is just summary info. – samus Jan 07 '16 at 17:04
  • This gives the error **Uncaught TypeError: $(...).on is not a function** – samus Jan 07 '16 at 17:12
  • 1
    @SamusArin the code is fine - if that doesn't work you've either got a *really* old version of jQuery (without the `.on` method) or jQuery hasn't loaded properly. – Alnitak Jan 07 '16 at 17:13
  • Running jquery-1.5.1.min.js to ensure browser compatibility or something. I'll grab latest, this is an in house inventory system. Thanks a lot! – samus Jan 07 '16 at 17:16
  • 2
    upgrading isn't to be taken lightly - if you can't upgrade replace `.on('click', ...)` with `.bind('click', ...)` – Alnitak Jan 07 '16 at 17:16
  • `bind` worked, after I moved it into `document.ready()`, and remembered to comment out the existing `click` override. I'm grateful for your expertise. – samus Jan 07 '16 at 19:55
  • 2
    @SamusArin FWIW, there's also a `.click` method, but I always avoid that because the same function can be used to both _register_ a click handler, and to _trigger_ a click event. Rather than risk reader confusion I always use `.on` (or previously `.bind`) for the former and `.trigger` for the latter to make it completely explicit which usage is intended. – Alnitak Jan 07 '16 at 20:36