ajax只发送输入的第一个值，而不发送其他值

ajax only sends the first value of input and not the others?

本文关键字：其他 输入 ajax 第一个      更新时间：2023-09-26

我制作了一个学校网站，老师可以在那里上传学生的分数。到目前为止，我有这三个文件：

第一个，将根据科目和课程显示每个学生的姓名

<table class="check">
    <tr class="arrow">
        <th>Student</th>
        <th>Add Mark</th>
    </tr>
    @foreach(var users in user){
    <tr class="arrow">
        <td>@users.Nombre @users.Apellido</td>
        <td>
            <form method="post">
                <input type="text" id="user" style="display: none" name="user" @Validation.For("nombre") value="@users.UserId" />
                       <input type="text" id="galleryId" style="display: none" name="galleryId" @Validation.For("nombre") value="@galleryId" />
                       <input type="text" id="note" name="button2" name="note" @Validation.For("nombre") />
                       <input type="button"   value="Ready" title="Ready" onclick="loco(document.getElementById('user').value, document.getElementById('galleryId').value, document.getElementById('note').value)" />
            </form>
        </td>
    </tr>
    }
</table>

在这里你可以看到，我使用foreach来显示每个学生的名字，然后在它旁边应该显示一个输入文本框，供老师写下特定学生的分数。这就是我在foreach中包含该表单的原因

接下来是ajax文件：

function loco(user, gallery, note) {
    var xmlhttp;
    var user = document.getElementById("user").value;
    var galleryid = document.getElementById("galleryId").value;
    var note = document.getElementById("note").value;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "/Marks/add1/" + gallery + "/" + user + "/" + note, true);
    xmlhttp.send();
}

最后，我们有一个页面，它将把标记插入数据库，而不返回任何表或div，只上传标记。

@{
    var db2 = Database.Open("ica");
    var user = UrlData[1];
    var galleryId = UrlData[0];
    var note = UrlData[2].AsInt();
    db2.Execute("INSERT INTO Notas (Nota, UserId, Sub_Id) VALUES (@0, @1, @2)", note, user, galleryId);
}

那么，为什么ajax将第一个学生的值发送到上传文件，而不是第二个、第三个等？为什么当我点击第二个学生的提交按钮时，它会再次发送第一个学生的分数，而只发送第一个同学的分数？

您在for每个循环内的HTML中使用硬编码的ID，因此您将在页面上获得多个具有相同ID的user、galleryId和note元素。这意味着您的选择器只能选择第一个，无论您实际尝试使用哪个。您需要做一些事情，比如在ID的末尾添加一个索引号，而不是完全硬编码的ID，这样它们就可以相互区分。

注意：

我观察到你在同一输入中多次使用名称，请删除：

<input type="text" id="note" name="button2" name="note" @Validation.For("nombre") />

在这里，您将名称命名为button2和note，请删除button2

进行如下更改：

function loco(form) {
    var xmlhttp;
    var user = form.name.value;
    var gallery = form.galleryId.value;
    var note = form.note.value;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "/Marks/add1/" + gallery + "/" + user + "/" + note, true);
    xmlhttp.send();
    return false;
}

更改html相关代码如下：

<form onsubmit="return loco(this)">
    <input type="text" id="user" style="display: none" name="user" @Validation.For("nombre") value="@users.UserId" />
    <input type="text" id="galleryId" style="display: none" name="galleryId" @Validation.For("nombre") value="@galleryId" />
    <input type="text" id="note" name="note" @Validation.For("nombre") />
    <input type="submit" value="Ready" title="Ready" />
</form>
相关文章：