javascript - 不使用id提交

标签 javascript php jquery html

我想在不使用id的情况下将表单提交到reporturl.php

<script >
$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
$.post("reporturl.php", {
url1: name,
}, function(data) {
alert(data);
$('#form')[0].reset(); // To reset form fields
});

});
});

</script>

只有第一个被提交,其余的则不会。帮助我找到一种方法,以便所有内容都可以在各自的点击时提交,可能在 Jquery 代码中使用 $(this) ,但我是 Jquery 的新手,不熟悉知道如何实现

 <body>
<div>
<input id="name" value="first " type="hidden">
<input id="submit" type="button" value="Submit">
</div>
<div>
<input id="name" value="second " type="hidden">
<input id="submit" type="button" value="Submit">
</div>
<div>
<input id="name" value="third " type="hidden">
<input id="submit" type="button" value="Submit">
</div>
<div>
<input id="name" value="fourth" type="hidden">
<input id="submit" type="button" value="Submit">
</div>
<div>
<input id="name" value="fifth " type="hidden">
<input id="submit" type="button" value="Submit">
</div>
<div>
<input id="name" value="sixth " type="hidden">
<input id="submit" type="button" value="Submit">
</div>
<div>
<input id="name" value="seventh " type="hidden" >
<input id="submit" type="button" value="Submit">
</div>
</body>

最佳答案

您需要做一些更改:

  1. 将所有输入id更改为class

    <div>
        <input class="name" value="first " type="hidden">
        <input class="submit" type="button" value="Submit">
    </div>
    <div>
        <input class="name" value="second " type="hidden">
        <input class="submit" type="button" value="Submit">
    </div>
    
    ...
    
  2. 相应地更新您的脚本

    $(document).ready(function() {
    
        $(".submit").click(function() {  // listen to class, not id
            var name = $(this).prev().val(); // take the value from preceding input
            $.post("reporturl.php", {
                url1: name,
            }, function(data) {
                alert(data);
                $('#form')[0].reset(); // To reset form fields
            });
    
        });
    
    });
    

关于javascript - 不使用id提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39872662/

相关文章:

javascript - jQuery 中的 setInterval 发生得太快

javascript - 为什么我会收到此错误? dest.on 不是一个函数 - 使用 gulp-file-include

javascript - 用纯js创建任务列表并上下移动项目

javascript - d3js : adding same type of elements with different data

javascript - 一旦第一个 promise 解决,就停止 promise 执行

phpinfo() 显示已启用 cURL,但我仍然无法使用它

php - HTML 布局技术(用于管理面板)

php - 保留更改 MySQL

jquery - 一个 Controller 操作同时用于完整回发和 AJAX 回发还是分为两个操作?

javascript - 在 Knockout.js 中复制数组