Select input from multiple inputs within a form?

Question

Context Summary

In Canada, there are temporary SIN which begin by '9' attibuted to immigrants awaiting their very SIN.

Once they receive their new "real" SIN, we must be able to update the value based on citizen name and date of birth (this is sufficient for the very system I'm working on).

Once a new citizen is added to a contract, and her/his date of birth is input, an ajax call is made to figure out whether a matching participant matches, and suggest the possible match to the user who then confirm whether there is a real match.

Once matched, the system has to update the existing user and remove the newly added one so to avoid duplicate entries. This means that in order to change a SIN for a given participant, one has to add a new participant in a previous step, and the system reports the newly created participants and prompt the user to enter further information details such as the date of birth. When the "date-time picker" closes, an ajax is called to find this match as explained above.

However, the code selecting the new SIN number item, doesn't work as expected. Instead of targeting the found participant, it selects the first participant found, which actually is a "real" new participant.

Code Sample

The new participants are listed as follows in the Web page:

<!-- Here is the very new participant -->
<tr id="17" rel="17">
    <input type="text" value="SURNAME17, GIVENNAME17">
    <input type="text" id="txtSIN17" value="123456789">
</tr>
<!-- Here is the participant I'd like to get the SIN from -->
<tr id="18" rel="18">
    <input type="text" value="SURNAME18, GIVENNAME18">
    <input type="text" id="txtSIN18" value="487654321">
</tr>

The way the system selects the participant is:

$("input[id^=txtSIN]").val();

Which inevitably always returns the first occurence, that is, SIN: 123456789. I'd like to obtain the other SIN: 487654321.

However, I can't predict what will be the tr id which shall be required from time to time, and I believe I need to rely on the first input-text in order to know this "id".

Before I go with my thoughts, I have to mention that I have collected the name and temporary SIN from the underlying database whilst the system asked for the match. The only way I might establish a relation is by the name and date of birth of the match found.

So far...

I thought, having the value of my matched participant in a concatenated ListBox value, to do as follows:

function PerformSINChange(changeSIN) {
    if (changeSIN != 0) {
        // pseudo-code, since I don't yet know how to achieve what I want in jQuery.

        // So I have the confirmed match here formatted as:
        // "999999999 | SURNAME18, GIVENNAME18 | 1986-09-14 | 9"
        var selectedMatch = $('select[id$=lstExistingParticipant]').val();
        var selectedMatchName = selectedMatch.Split("|")[1].Trim();
        var inputTextIdToSelect;

        $("#form1 input[type=text], select").each(function(inputText) {
            if (selectedName == $(inputText).val()) {
                inputTextIdToSelect = $(inputText).Id();
                break;
            }
        });

        var newSINInputText = "txtSIN" + inputTextIdToSelect;
        var newSINValue = $(newSINInputText).val();
          
        var matchedParticipant = new Object();
        matchedParticipant.TemporarySIN = selectedMatch
        matchedParticipant.NewSIN = newSINValue;

        if (matchedParticipant.TemporarySIN != "" && matchedParticipant.TemporarySIN != null)
            $.ajax({
                type: 'POST'
                , data: matchedParticipant
                , url:  p.transformURL("ajax/verify_participant.ashx");
                , async: false
                , cache: false
                , success: function (xmlResponse) {
                      if (xmlResponse != "") {
                          $('tr[id$=' + xmlResponse + ']').unbind();
                          $('tr[id$=' + xmlResponse + ']').remove();

                          var tableRow = $('.datatable_table_part tbody tr')
                          var tableBody = $('.datatable_table_part tbody') 

                          if (tableRow.length == 0)
                              tableBody.append('<tr><td colspan="6">' + emptyTableMsg + '</td></tr>');
                      }
                  }
             });
        } 
    }

    $.fancybox.close();
}

And I'm not quite sure on how to go about it from here.

How shall I go about it from here, is my idea any good? And if so, what is the correct syntax to achieve this?

Some related findings

"... added to a contract". Where did this contract suddenly come from? — Roamer-1888
– Roamer-1888, Commented Oct 27, 2014 at 21:46
The system consists of an RRSP assessments management where employers may enter their employees assessments for a given period. So first, the employer has to choose the contract for which to input the dues. This question is related to the feature of entering the participant assessments. And in order to specify a change of SIN, the employer simply add a new participant for which he will have to give the date of birth, then the system will find the individual and ask for a match confirmation, all within the current selected contract for which the contributions must be entered. — Will Marcouiller
– Will Marcouiller, Commented Oct 27, 2014 at 21:51
Thank goodness I wasn't born in Canada. It sounds real complex. — Roamer-1888
– Roamer-1888, Commented Oct 27, 2014 at 21:54
The functional concept itself is real simple, and this is not for new Canadian-born people, only for immigrants. The complexity resides in the way the system was (or wasn't) architectured. — Will Marcouiller
– Will Marcouiller, Commented Oct 27, 2014 at 21:56
if you need more than: jsfiddle.net/29ov2ynw let me know... i like to give a starting point than giving a solution. Helps everyone learn. — morissette
– morissette, Commented Oct 28, 2014 at 2:32

Will Marcouiller · Accepted Answer · 2014-10-30 13:47:41Z

Based on @morissette's proposition in comments of my question:

if you need more than: jsfiddle.net/29ov2ynw let me know... i like to give a starting point than giving a solution. Helps everyone learn.

My question should have better been:

How to loop through multiple table rows using jQuery?

From what @morissette's gave me to initiate my digging, here what I came up with which solves my problem.

var participantNameIndex = 1;
var selectedMatch = '987654321 | SURNAME18, GIVENNAME18 | 1986-09-14 | 9';
var existingName = selectedMatch.split('|')[participantNameIndex].trim();    

$('table tr').each(function (i, row) {
    var newParticipantName = $(':last-child', this).val();
    var isMatch = existing == newParticipantName;

    if (isMatch) {
        var sinId = $(row).attr('id');
        var newSinInputName = "input[id^='txtSIN" + sinId +"']";
        var newSin = $(newSinInputName).val();
        alert(newSin); // Finally obtained the new SIN!!!

        return false; // Simple loop break
    }
});

The most problematic afterwards was to find the correct selector in my production code which I found. Now this works as expected.

Collectives™ on Stack Overflow

Select input from multiple inputs within a form?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related