时间戳

首页 > 解决方案 > 如何使用相应的值显示输入字段的 ID

javascript - 如何使用相应的值显示输入字段的 ID

问题描述

我有多种形式，如下所示：

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。

标签： javascriptjqueryhtml

解决方案

带有输入类型文本选择器的简单 $.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>

推荐阅读