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, Oct 27 '14 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, Oct 27 '14 at 21:51
Thank goodness I wasn't born in Canada. It sounds real complex. — Roamer-1888, Oct 27 '14 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, Oct 27 '14 at 21:56
I think you're more likely to get an answer if you post the original, flawed code, with comment(s) to indicate the line(s) that need attention. — Roamer-1888, Oct 27 '14 at 22:23
In the ajax, (a) what is the nature of `xmlResponse` and (b) which table row(s) are supposed to be removed - those that don't match `xmlResponse` presumably? — Roamer-1888, Oct 27 '14 at 23:34
As written in the code sample, the comments in the HTML code says exactly what I want, in addition to the jQuery code selecting inevitably the first `txtSIN` input-text. What I want is to be able to correlate the two: `selectedMatch` and the input-text that shall be selected based on the name. — Will Marcouiller, Oct 28 '14 at 00:41
As for `xmlResponse`, this simply tells which participant matched to remove its added counterpart. — Will Marcouiller, Oct 28 '14 at 00:59
So how do those two table rows relate to #from1? Is the table inside the form? — Roamer-1888, Oct 28 '14 at 01:09
The thing I'm really not getting is that you can provide `TemporarySIN` and `NewSIN` in the AJAX request, so what added value does the server provide in its response? — Roamer-1888, Oct 28 '14 at 01:23
if only an each method existed where you could loop through each tr.... oh wait... http://api.jquery.com/jquery.each/ — morissette, Oct 28 '14 at 01:35
The `TemporarySIN` is provided by a first ajax call to the server which will, on the date of birth change, try to find a known participant with the same date of birth for whom the system has a SIN starting by "9". It is only when the user confirms the match, that the removal of the newly added participant which matches the criterion is removed, and the `newSIN` preserved and sent back to the server for an update. Because the system then changes an identifier, one can manage to identify uniquely the individual by her/his name and date of birth confirmed by user. — Will Marcouiller, Oct 28 '14 at 02:20
@morissette: If only you had looked more closely to the code sample, you would have seen that I intend to use the `.each()` loop. Besides, this is part of my thought solution, and because jQuery and Javascript in general isn't my speciality, I require some help from the community. So instead of mocking, bring forward your attempted answer with proper syntax and I shall give it a try. — Will Marcouiller, Oct 28 '14 at 02:23
if you need more than: http://jsfiddle.net/29ov2ynw/ let me know... i like to give a starting point than giving a solution. Helps everyone learn. — morissette, Oct 28 '14 at 02:32
@morissette: Thank you. I couldn't imagine this could be this "simple". From your fiddle, I should be able to go my way with some further tests, tries and fails. Thank's for you support. I shall let you know tomorrow when I'm back in the office how it worked. — Will Marcouiller, Oct 28 '14 at 02:57
fair enough always please feel to upvote my comment for points :) — morissette, Oct 28 '14 at 03:06
More questions: How does the user "confirm the match"? Am I right in assuming that confirmation of the match triggers `PerformSINChange()`? What is the mystery parameter `changeSIN` that is passed to `PerformSINChange`? Does the table have a unique id by which it can be addressed? — Roamer-1888, Oct 28 '14 at 11:44
Where is the string "999999999 | SURNAME18, GIVENNAME18 | 1986-09-14 | 9" composed and how is made accessible to `PerformSINChange()`? — Roamer-1888, Oct 28 '14 at 11:50
It is composed on server-side during the first ajax call to find the potential match. If any potential match found, the system prompts the user for confirmation. — Will Marcouiller, Oct 28 '14 at 12:23
Thanks, and the four questions in the previous comment ... ? — Roamer-1888, Oct 28 '14 at 12:27
I'm sorry, I hadn't seen them. The user confirms the match through a dialog prompt in which the match is selected and confirmed by clicking [Ok] button, otherwise the [Cancel] tells the potential match isn't a real match. In both cases, the `PerformSINChange` javascript method is performed, except for the `changeSIN` parameter changes. When the user confirms by clicking Ok, the `changeSIN` parameter value is `1`, otherwise `0`. I wouldn't have done that myself, except that this code was born before I work on the project, so my intention is to repair it, not change it entirely. =) — Will Marcouiller, Oct 28 '14 at 14:38
I've tried writing an answer for you but every line I write just asks more questions. I could only help if I had a full working version to play with. — Roamer-1888, Oct 28 '14 at 22:04
Thanks @Roamer-1888 for your time and will to help, I do appreciate it. — Will Marcouiller, Oct 29 '14 at 13:33

Will Marcouiller · Accepted Answer · 2014-10-30T13:47:41.857

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.

Select input from multiple inputs within a form?

1 Answers1