javascript - 如何显示输入字段的 id 以及相应的值

标签 javascript jquery html

我有多种表单,如下所示:

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_t1x_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/

相关文章:

javascript - 使用其上下文调用原始回调函数

Javascript 12 小时制到 24 小时制格式转换器

javascript - JointJS 通过单击选择元素

javascript - 移动 View 中重叠的 Bootstrap 内容

javascript - jQuery 验证 : live and ajax val not working correctly

html - div 元素和显示 inline-block

javascript - 从字符串 : 'matrix(1, 0, 0, 1, 3, 5)' 中获取最后 2 个数字

javascript - 从 javascript 内部设置函数时获取 onmouseover 'event' 对象

java - 如何确保目录中的图像在更改后刷新?

javascript - 基于 w3 学校教程的响应式导航栏无法使用 javascript 打开