Одна и та же форма, несколько раз на странице, каждый раз передавая данные первой формы в JQuery

Question

Использование ColdFusion для создания нескольких форм на основе набора записей БД.

<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>

Приведенная выше форма повторяется для каждой записи в наборе записей.При нажатии кнопки «userSubmit» каждый раз отображаются только данные первой записи.Как мне сделать это уникальным?Вот где данные передаются:

    // 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);
}

Мне неясно, как заставить JQuery понимать, что каждая форма уникальна.Любая помощь приветствуется.Спасибо.-CK

Answer 1

1. $("input[name='userName']") находит все входные данные в документе с именем attr, установленным на userName.
2. Метод .val() действует только на первый элемент в коллекции, для которой он был вызван.

Таким образом, ваша функция отправки читает значение первого ввода userName в документе при каждом запуске. Вам нужно, чтобы она работала в пределах определенной кнопки, на которую нажали, и выполняйте поиск в форме, в которой находится эта кнопка.

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 );
});