我有多种表单,如下所示:
function chartsubmitbtn() {
var x = $('#x_axis_t1').val();
alert(x);
}
<div id="trace-div1">
<h4><b>Trace 1 </b></h4>
<form>
<table>
<tbody>
<tr>
<td><label>X Axis: </label></td>
<td><input type="text" name="t1_x_axis" id="x_axis_t1" size="50"></td>
</tr>
<tr>
<td><label>Y Axis: </label></td>
<td><input type="text" name="t1_y_axis" id="y_axis_t1" size="50"></td>
</tr>
</tbody>
</table>
</form>
</div>
<div id="trace-div2">
<h4><b>Trace 2 </b></h4>
<form>
<table>
<tbody>
<tr>
<td><label>X Axis: </label></td>
<td><input type="text" name="t1_x_axis" id="x_axis_t2" size="50"></td>
</tr>
<tr>
<td><label>Y Axis: </label></td>
<td><input type="text" name="t1_y_axis" id="y_axis_t2" size="50"></td>
</tr>
</tbody>
</table>
</form>
</div>
<button type="button" id="chart-report-submit" onclick="chartsubmitbtn();">Submit</button>
在上面的代码中,如果我单击提交按钮,它将显示与 id 相关的值。
我的预期输出是
x_axis_t1 = "x axis t1";
y_axis_t1 = "y axis t1";
x_axis_t2 = "x axis t2";
y_axis_t2 = "y axis t2";
上面的x_axis_t1,x_axis_t1,x_axis_t1
和x_axis_t1
是与输入文本值相关的ID。
最佳答案
带有输入类型文本选择器的简单 $.each 循环就足够了 $('input[type=text]')
function chartsubmitbtn(){
$('input[type=text]').each(function(){
console.log($(this).attr("id")+ '=' +$(this).val()+';');
})
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
function chartsubmitbtn(){
var x = $('#x_axis_t1').val();
alert(x);
}
</script>
</head>
<body>
<div id = "trace-div1">
<h4><b>Trace 1 </b></h4>
<form>
<table>
<tbody>
<tr>
<td><label>X Axis: </label></td>
<td><input type="text" name="t1_x_axis" id="x_axis_t1" size="50"></td>
</tr>
<tr>
<td><label>Y Axis: </label></td>
<td><input type="text" name="t1_y_axis" id="y_axis_t1" size="50"></td>
</tr>
</tbody>
</table>
</form>
</div>
<div id = "trace-div2">
<h4><b>Trace 2 </b></h4>
<form>
<table>
<tbody>
<tr>
<td><label>X Axis: </label></td>
<td><input type="text" name="t1_x_axis" id="x_axis_t2" size="50"></td>
</tr>
<tr>
<td><label>Y Axis: </label></td>
<td><input type="text" name="t1_y_axis" id="y_axis_t2" size="50"></td>
</tr>
</tbody>
</table>
</form>
</div>
<button type="button" id="chart-report-submit" onclick="chartsubmitbtn();">Submit</button>
</body>
</html>
关于javascript - 如何显示输入字段的 id 以及相应的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58027999/