Question

我正在尝试使用AJAX提交HTML。

我的HTML：

<form class="lyrics">
     <input type="text" value="" id="song" name="song">
     <button type="submit" class="btn btn-info lirik">lyrics</button>
</form>

我有动态表格。所以它可以超过1个表格。我的Javascript：

$(function() {
    $(".lyrics").bind("submit", function() {
        var value = $("#song").val();
        alert(value);
        $.post("lihat_lirik.php", {
            value: value
        }, function(data) {
             $("#lyric_results").html(data);
        });
        return false;
    });
});

如何从表单输入中获取歌曲值为var？

此处jsfidle 它以第一种形式工作，但不在第二种形式，

Answer 1

您的代码似乎有效。我会按.bind()更改.on()：

$(function() {
    $(".lyrics").on("submit",function() {
        var value = $("#song").val();  
        alert(value);
        $.post("lihat_lirik.php",{value:value}, function(data){
            $("#lyric_results").html(data);
        });
       return false;
    });
});

警报应正确显示值。因此，检查jQuery是否已成功加载，当您尝试获取其输入值时，html已经在视图中。

修改你有两个表格而不是一个。它改变了事情。你有多个有价值的ID＆＃34; song＆＃34; ; id应该是唯一标识符。

只需将var value = $("#song").val();替换为var value = $("#song", this).val();

Check your updated jsFiddle

Answer 2

也许您的表单是委托元素？（由javascript添加，例如在ajax动作中）。如果这是真的你应该使用这个代码：

$(function() {
    $(document).on('submit', '.lyrics', function() {
        var value = $("#song").val();
        alert(value);
        $.post("lihat_lirik.php", {
            value: value
        }, function(data) {
             $("#lyric_results").html(data);
        });
        return false;
    });
});

如果没有尝试使用“on”而不是“bind”的kmsdev代码。它应该正常工作。当然，如果正确加载了jQuery库。

Answer 3

在您提供here的小提琴中，您有两个输入具有相同的ID，＆＃34;歌曲＆＃34;。

您需要为输入提供唯一ID，才能访问其独特的值。

或者，您可以将查询更改为仅包含当前正在提交的表单的子元素，如下所示：

<form class="lyrics">
     <input type="text" value="5" name="song">
     <button type="submit" class="btn btn-info lirik">lyrics</button>
</form>
<form class="lyrics">
     <input type="text" value="6" name="song">
     <button type="submit" class="btn btn-info lirik">lyrics</button>
</form>

$(function() {
    $(".lyrics").bind("submit", function(event) {
        var value = $(event.target).children("#song").val();
        alert(value);
        $.post("lihat_lirik.php", {
            value: value
        }, function(data) {
             $("#lyric_results").html(data);
        });
        return false;
    });
});

在AJAX表单提交中通过类获取价值

3 个答案: