Question

I have a page with a form where I need to grab all the ID attributes of the A links in a certain div, and attach those to the form in a hidden form field before submission. How might I do this?

i.e

<form action="/myaction" id="myForm">
<div id="recipients">
<a id="1">recipient one</a>
<a id="2">recipient two</a>
<a id="3">recipient three</a>
</div>
<a href="javascript:void(0)" id="sendMail">Send</a>
</form>

<script>
//Capture form before sending
$("#sendMail").click( function() {
//Do something here to loop over the a tags in the recipients div, 
//and add as a list to a new hidden form field        
$('#myForm').trigger('submit');
});
</script>

Any ideas?

Answer 1

Something along these lines should get you started:

$("#sendMail").click(function() {
    var recipients = "";
    $("#recipients a").each(function() {
        recpients += this.id + ",";
    });
    $("#someHiddenField").val(recipients);
    $("#myForm").trigger("submit");
});

You can use each to iterate over the set of a elements, build up a string containing the id values, and use val to set the value of a hidden input element to that string. In the example above you will get a comma-separated string, with a trailing comma. I don’t know exactly what you’re looking for, so you may want to change that.