Same form, multiple times on page passing first form data to JQuery everytime

Using 开发者_开发问答ColdFusion to generate multiple forms based on DB recordset.

<div class="mrostatus"><form name="contact" method="post">
            <input type="text" name="userName">
            <input type="hidden" name="userFile" value="#FileName#.pdf" />
            <input type="button" id="userSubmit" name="userSubmit" value="Change Document Password">
            </form>
         </div>

The above form repeats for each record in the recordset. When pressing the "userSubmit" button only the first record's data show up every time. How do I make these unique? Here is where the data gets passed to:

    // JavaScript Document
$(document).ready(function(){
    $("input[name='userSubmit']").click(function(){
        //call a function to submit the form data
        submitForm();
    });

});
submitForm = function(){
var userPassword = $("input[name='userName']").val();
var userFile = $("input[name='userFile']").val();
//create a new instance of our proxy
var submission = new formData();

//set the handler to refresh the grid when the function has been run successfully
submission.setCallbackHandler(verifySubmission);

//set the error function in case the function does not run correctly
submission.setErrorHandler(errorHandler);

//call the method via the proxy
//submission.initSubmit(userPassword, userFile);
alert(userPassword +' '+ userFile);
}

It's unclear to me how to make JQuery understand each form is unique. Any help is appreciated. Thank you. -CK

1. $("input[name='userName']") finds all inputs in the document with a name attr set to userName.
2. The .val() method only acts on the first element in the collection on which it was called.

Thus your submission function is reading the value of the first userName input in the document every time it runs. You need to make it run in scope of the particular button which was clicked, and search within the form in which that button resides.

submitForm = function(){
  var $form = $( this ).closest( 'form' );

  var userPassword = $form.find("input[name='userName']").val();
  var userFile = $form.find("input[name='userFile']").val();
  //create a new instance of our proxy
  var submission = new formData();

  //set the handler to refresh the grid when the function has been run successfully
  submission.setCallbackHandler(verifySubmission);

  //set the error function in case the function does not run correctly
  submission.setErrorHandler(errorHandler);

  //call the method via the proxy
  //submission.initSubmit(userPassword, userFile);
  alert(userPassword +' '+ userFile);
};

// JavaScript Document
$(document).ready(function(){
  $("input[name='userSubmit']").click( submitForm );
});