как отобразить идентификатор поля ввода с соответствующими значениями - PullRequest
Новая
       3

как отобразить идентификатор поля ввода с соответствующими значениями

1 голос
/ 20 сентября 2019

У меня есть несколько форм, как показано ниже: 

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>

в вышеприведенном коде, если я нажму кнопку отправки, он отобразит значения с указанным идентификатором.

мой ожидаемый выход - 

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 - это идентификаторы относительно входных текстовых значений.

Ответы [ 3 ]

0 голосов
/ 20 сентября 2019

Итак, вы хотите сделать что-то вроде ниже? 

    function chartsubmitbtn(){
         var x_axis_t1 = $('#x_axis_t1').val();
         var y_axis_t1 = $('#y_axis_t1').val();
         var x_axis_t2 = $('#x_axis_t2').val();
         var x_axis_t2 = $('#x_axis_t2').val();
         
         console.log('x_axis_t1 => ', x_axis_t1);
         console.log('y_axis_t1 => ', y_axis_t1);
         console.log('x_axis_t2 => ', x_axis_t2);
         console.log('x_axis_t2 => ', x_axis_t2);
        
    }
<html>
     <head>
     <script src="https://code.jquery.com/jquery-3.1.0.js"></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="x_axis_t2" size="50"></td>
                  </tr>
              </tbody>
          </table>
       </form>  
    </div> 
    <button type="button" id="chart-report-submit"  onclick="chartsubmitbtn();">Submit</button>
    </body>
</html>
0 голосов
/ 20 сентября 2019

Попробуйте получить выходные данные в виде предупреждения 

var str='';
 function chartsubmitbtn(){
    $('input[type=text]').each(function(){
     str += $(this).attr("id")+ '='  +$(this).val()+';'+'\n';
    });
    alert(str);
 }
<html>
     <head>
     <script src="https://code.jquery.com/jquery-3.1.0.js"></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>
0 голосов
/ 20 сентября 2019

Достаточно простого цикла $ .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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...