通过AJAX形式的类获取值提交
问题描述:
我正在尝试使用AJAX提交HTML。通过AJAX形式的类获取值提交
我的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 其在第一种形式,但不是在第二个工作,
答
您的代码似乎是有效的。我会改变.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已经在视图中。
编辑: 你有2个形式,而不是一个。它改变了事物。并且您有多个ID值为“歌曲”的;一个id应该是一个唯一的标识符。
通过var value = $("#song", this).val();
答
只需更换var value = $("#song").val();
也许你的形式是委托元素? (通过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;
});
});
如果没有尝试“上”,而不是“绑定”从kmsdev代码。它应该正常工作。当然,如果你的jQuery库加载正确。
答
在你提供的小提琴here你有两个输入相同的ID,“歌”。
你需要给你的输入唯一的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;
});
});
警报(值);工作,所以你的PHP在做什么? –
@ Suhindra你想要在哪里获得'歌曲价值' – ozil
你有收录jQuery吗?我已经在JSFiddle检查,它的工作原理 –