Передача динамических значений в селектор элементов jQuery

#jquery #ajax

#jquery #аякс

Вопрос:

У меня есть html-код с несколькими формами, имеющими идентификаторы form01, form02 и т.д.

Я отправляю форму с помощью jQuery. Для каждой формы я написал один и тот же код с помощью javascript и jQuery для разных идентификаторов форм (form01, form02 и т.д.). Если я это сделаю, это сработает, но это не способ хорошего программирования. Поэтому я создал функцию javascript с идентификатором формы в качестве входного параметра и вызвал эту функцию с помощью события onclick кнопки отправки.

Внутри функции я использую этот аргумент (из идентификатора) для отправки формы, но это не работает. Кто-нибудь может мне в этом помочь?

Заранее спасибо.

Мой код приведен ниже:


 lt;htmlgt; lt;headgt;  lt;titlegt;Main Pagelt;/titlegt;  lt;link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"gt;  lt;link rel="stylesheet" href="include/jquery-ui-1.13.0.custom/jquery-ui.css"gt;  lt;script type="text/javascript" src="include/jscript/jquery-3.6.0.min.js "gt;lt;/scriptgt;  lt;script type="text/javascript" src="include/jquery-ui-1.13.0.custom/jquery-ui.js"gt;lt;/scriptgt;    lt;scriptgt;  $(document).ready(function(){  $("#form01").on("submit", function(event){  event.preventDefault();    var formValues= $(this).serialize();    $.post("./form01OutPut.php", formValues, function(data){  // Display the returned data in browser  $("#divOutPut").html(data);  });  });  });  $(document).ready(function(){  $("#form02").on("submit", function(event){  event.preventDefault();    var formValues= $(this).serialize();    $.post("./form01OutPut.php", formValues, function(data){  // Display the returned data in browser  $("#divOutPut").html(data);  });  });  });   function submitFrm(x)  {  alert(x);  $(document).ready(function(){  $(x).on("submit", function(event){  event.preventDefault();    var formValues= $(this).serialize();    $.post("./form01OutPut.php", formValues, function(data){  // Display the returned data in browser  $("#divOutPut").html(data);  });  });  });     }    lt;/scriptgt; lt;/headgt; lt;bodygt;  lt;tablegt;  lt;form id="form01" name="form01" action="./form01OutPut.php" method="post"gt;    lt;trgt;  lt;tdgt;  Enter text:  lt;/tdgt;  lt;tdgt;  lt;input type="text" id="txt01" name="txt01" size=10gt;  lt;/tdgt;  lt;tdgt;  lt;input type="button" id="submitBtn01" name="submitBtn01" value="Submit" onclick="submitFrm('#form01')"gt;  lt;!-- lt;input type="submit" id="submitBtn01" name="submitBtn01" value="Submit"gt; --gt;  lt;!-- lt;input type="submit" value="Submit"gt; --gt;  lt;/tdgt;  lt;/trgt;  lt;/formgt;  lt;form id="form02" name="form02" action="./form01OutPut.php" method="post"gt;    lt;trgt;  lt;tdgt;  Enter text:  lt;/tdgt;  lt;tdgt;  lt;input type="text" id="txt02" name="txt02" size=10gt;  lt;/tdgt;  lt;tdgt;  lt;!-- lt;input type="button" id="submitBtn" name="submitBtn" value="Submit"gt; --gt;  lt;input type="submit" id="submitBtn02" name="submitBtn02" value="Submit"gt;  lt;!-- lt;input type="submit" value="Submit"gt; --gt;  lt;/tdgt;  lt;/trgt;  lt;/formgt;  lt;/tablegt;  lt;div id="divOutPut"gt;   lt;/divgt; lt;/bodygt;  

Ответ №1:

Удалите это document.ready и $(x).on("submit", function(event) из функции. Также для этой строки var formValues= $(this).serialize(); this здесь работать не будет, замените его на x

 function submitFrm(x) {  alert(x);    var formValues= $(x).serialize();    $.post("./form01OutPut.php", formValues, function(data){  // Display the returned data in browser  $("#divOutPut").html(data);  });    }  

Комментарии:

1. Большое спасибо за ваш быстрый ответ и точное решение. Теперь это работает.

2. Добро пожаловать, если возможно, пожалуйста, поднимите голос.

3. Как повысить голос? Я нажал на галочку, это голосует? Я здесь новичок.

4. К вашему сведению: $(document).ready(function(){ ничего не делает, если документ уже готов, но помещение его в обработчик событий просто сбивает с толку. Однако не удаляйте другие вызовы doc.ready.

5. Хорошо, спасибо за объяснение.