Javascript 从表单获取序列化数据

我有这样一页：

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<form id="kelas">
<div class="span12">
    <div class="span2">
        <input type="text" name="nama_kelas" value="Nama Kelas" style="width: 200px" class="input-block-level">
    </div>
    <div class="span3">
        <span id="simpan_kelas"  onclick="simpan_kelas(this)" class="btn btn-success"> Kelas</span>
    </div>
</div>
</form>

<script>
    function simpan_kelas(elm) {
        var nama_kelas = $(elm).prev().val();

        if (nama_kelas != "") {
            var data = $(elm).parent().serializeArray();
            alert("input : "+nama_kelas);
            alert("data : "+data);
        }
    }
</script>

<form id="kelas">
    <div class="span12">
        <div class="span2">
            <input type="text" name="nama_kelas" value="Nama Kelas" style="width: 200px" class="input-block-level">
        </div>
        <div class="span3">
            <input type="button" id="simpan_kelas" value="Kelas" class="btn btn-success" />
        </div>
    </div>
</form>

$("#simpan_kelas").click(function() {
    var nama_kelas = $("#simpan_kelas").val();

    if (nama_kelas != "") {
        var data = $("#kelas").serializeArray();
        alert("input : "+nama_kelas);
        alert("data : "+data);
    }
});

卡拉斯
函数simpan_kelas（elm）{
var nama_kelas=$（elm.prev（）.val（）；
如果{
var data=$（elm.parent（）.serializeArray（）；
警报（“输入：+nama_kelas）；
警报（“数据：”+数据）；
}
}

如果输入不是空的

第一个警报将显示输入

第二个警报将显示来自串行输入的数据

---

我两次都不及格。

你的遍历不正确

查找兄弟姐妹，并且

没有兄弟姐妹

的格式是

而不是表单

建议我们先找到表单，然后在表单内部查找

---

我可能会这样做。因为您使用的是jQuery，所以使用提供的单击处理程序可能更容易（更清晰）

$("#cssSelector").click(function() {
    //do stuff
});

此外，由于您正在执行jQuery，直接获取输入元素的值可能更为清晰：

$("#cssSelector").val();

@charlietfl提供的答案将更多地使用您当前正在进行的工作。就我个人而言，我宁愿使用click处理程序并将我的功能全部保存在一个js文件中（而不是用html中的

onClick

stuff分割）

最终代码（链接到上面）如下所示：

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<form id="kelas">
<div class="span12">
    <div class="span2">
        <input type="text" name="nama_kelas" value="Nama Kelas" style="width: 200px" class="input-block-level">
    </div>
    <div class="span3">
        <span id="simpan_kelas"  onclick="simpan_kelas(this)" class="btn btn-success"> Kelas</span>
    </div>
</div>
</form>

<script>
    function simpan_kelas(elm) {
        var nama_kelas = $(elm).prev().val();

        if (nama_kelas != "") {
            var data = $(elm).parent().serializeArray();
            alert("input : "+nama_kelas);
            alert("data : "+data);
        }
    }
</script>

<form id="kelas">
    <div class="span12">
        <div class="span2">
            <input type="text" name="nama_kelas" value="Nama Kelas" style="width: 200px" class="input-block-level">
        </div>
        <div class="span3">
            <input type="button" id="simpan_kelas" value="Kelas" class="btn btn-success" />
        </div>
    </div>
</form>

$("#simpan_kelas").click(function() {
    var nama_kelas = $("#simpan_kelas").val();

    if (nama_kelas != "") {
        var data = $("#kelas").serializeArray();
        alert("input : "+nama_kelas);
        alert("data : "+data);
    }
});

$（“#simpan_kelas”）。单击（函数（）{
var nama_kelas=$（“#simpan_kelas”）.val（）；
如果{
var data=$（“#kelas”）.serializeArray（）；
警报（“输入：+nama_kelas）；
警报（“数据：”+数据）；
}
});

我认为，这可以帮助您：

序列化演示
主体，选择{
字体大小：12px；
}
形式{
保证金：5px；
}
p{
颜色：红色；
保证金：5px；
字体大小：14px；
}
b{
颜色：蓝色；
}
单身
单身2


倍数
倍数2
倍数3


支票1
支票2


无线电1
无线电2

函数showValues（）{
var str=$（“form”）.serialize（）；
$（“#结果”）.text（str）；
}
$（“输入[type='checkbox']，输入[type='radio']”）。在（“单击”，显示值）；
$（“选择”）。打开（“更改”，显示值）；
showValues（）；
因为
Kelas
没有prv Dom..
prev
查找以前的兄弟姐妹，但旁边没有兄弟姐妹
simpan_kelas
如果这是您问题的解决方案，您可以将其标记为这样吗？很抱歉，我是stackoverflow的新手，，