#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. Хорошо, спасибо за объяснение.