我有以下帶有表單的 html 代碼
<form id="msg-form-nota">
<input type="hidden" name="id_nota" id="id_nota" value="${project.id}">
<label for="textfield">Calificación obtenida:</label>
<input type="text" name="nota" id="nota" class="form-control form-control-sm" value="${project.nota}" placeholder="Introducir calificación"><br>
<input type="submit" name="submit" id="submit" class="btn btn-success btn-sm" value="A?adir/modificar calificación">
</form>
然后我使用以下 javascript/ajax 代碼來管理表單
$('#msg-form-nota').submit(e => {
e.preventDefault();
const postData = {
nota: $('#nota').val(),
id: $('#id_nota').val()
};
const url ='accion.php';
$.post(url, postData, (response) => {
toastr.success('a?adidas!', 'Actualización ', {"hideDuration": 1500});
});
});
我檢測到但我不知道如何解決的問題是，例如，當使用一段時間時，會創建 5 個具有相同名稱 id 的表單，如果我使用第一個加載我的表單，它可以正常作業，但是如果我使用其余的，則表單不起作用如果不是表單的所有內容都進入 url，就好像方法是 get 一樣，我該怎么辦？謝謝
uj5u.com熱心網友回復：
如果您想從表單/元素中完全洗掉 ID 屬性，您可以通過使用參考作為單個引數提供的FormData物件來輕松簡化整個代碼。form該FormData物件將整理用于 ajax 請求的各種輸入元素 - 因此無需嘗試顯式識別各個輸入元素。
document.querySelectorAll('[type="submit"]').forEach(input => input.addEventListener('click',e=>{
e.preventDefault();
/*
The `submit` button raised the event so the `event.target` refers to that button.
From the button we know the `form` is the parentNode - but you can use `closest`
to find the parent form.
*/
let fd = new FormData( e.target.parentNode );
fetch( 'accion.php', { method:'post', body:fd })
.then(r=>r.text())
.then(data=>{
console.log(data);
// call your success function.
toastr.success('a?adidas!', 'Actualización ', {
"hideDuration": 1500
});
});
}))<form data-id='msg-form-nota'>
<input type='hidden' name='id_nota' value='123' />
<label>
Calificación obtenida:
<input type='text' name='nota' class='form-control form-control-sm' value='Geronimo' placeholder='Introducir calificación' />
</label>
<input type='submit' class='btn btn-success btn-sm' value='A?adir/modificar calificación' />
</form>
<form data-id='msg-form-nota'>
<input type='hidden' name='id_nota' value='456' />
<label>
Calificación obtenida:
<input type='text' name='nota' class='form-control form-control-sm' value='Fred Flintsone' placeholder='Introducir calificación' />
</label>
<input type='submit' class='btn btn-success btn-sm' value='A?adir/modificar calificación' />
</form>
<form data-id='msg-form-nota'>
<input type='hidden' name='id_nota' value='789' />
<label>
Calificación obtenida:
<input type='text' name='nota' class='form-control form-control-sm' value='Spitfire' placeholder='Introducir calificación' />
</label>
<input type='submit' class='btn btn-success btn-sm' value='A?adir/modificar calificación' />
</form>在 PHP 腳本accion.php中，請求會發送 2 個 POST 引數fetch。這兩個引數與表單輸入元素具有相同的名稱。例如：-
<?php
#accion.php
if( $_SERVER['REQUEST_METHOD']=='POST' && isset(
$_POST['id_nota'],
$_POST['nota']
)){
// ... etc do whatever
}
?>
uj5u.com熱心網友回復：
正如您的問題所暗示的那樣，這個問題是因為您id在回圈中生成 HTML 時多次重復相同的屬性。
解決此問題的最佳方法是class在元素上使用公共屬性。然后，您可以從target引發并作為引數傳遞給事件處理函式的事件屬性中定位特定實體。您還可以使用 DOM 遍歷方法來查找相關元素并檢索它們的值。
另請注意，我將 包裹在input 元素內label。這消除了對這些元素的forandid屬性的需求，但保留了相同的功能。
$('.msg-form-nota').on('submit', e => {
e.preventDefault();
let $form = $(e.target);
const postData = {
nota: $form.find('.nota').val(),
id: $form.find('.id_nota').val()
};
console.log(postData);
/* make your AJAX request here... */
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form class="msg-form-nota">
<input type="hidden" name="id_nota" class="id_nota" value="ID_001">
<label>
Calificación obtenida:
<input type="text" name="nota" class="nota form-control form-control-sm" value="Nota_001" placeholder="Introducir calificación">
</label>
<input type="submit" name="submit" class="btn btn-success btn-sm" value="A?adir/modificar calificación">
</form>
<form class="msg-form-nota">
<input type="hidden" name="id_nota" class="id_nota" value="ID_002">
<label>
Calificación obtenida:
<input type="text" name="nota" class="nota form-control form-control-sm" value="Nota_002" placeholder="Introducir calificación">
</label>
<input type="submit" name="submit" class="btn btn-success btn-sm" value="A?adir/modificar calificación">
</form>
<form class="msg-form-nota">
<input type="hidden" name="id_nota" class="id_nota" value="ID_003">
<label>
Calificación obtenida:
<input type="text" name="nota" class="nota form-control form-control-sm" value="Nota_003" placeholder="Introducir calificación">
</label>
<input type="submit" name="submit" class="btn btn-success btn-sm" value="A?adir/modificar calificación">
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/488918.html
標籤：javascript php html jQuery 阿贾克斯