从多个文本框中读取值，并通过jQuery读取警报值

Question

当我点击"btnButton"时，我需要通过jquery中的alert函数循环和表示来自输入文件的所有值(值一，值二，值三和值四(。

<table cellspacing="0" cellpadding="4" id="MainContent_gvAllValues" style="color:#333333;border-collapse:collapse;">
  <tr style="color:White;background-color:#507CD1;font-weight:bold;">
    <th scope="col" vAllValues</th>
  </tr>
  <tr style="background-color:#EFF3FB;">
    <td>
      <input name="ctl00$MainContent$gvAllValues$ctl02vAllValues" type="text" value="RR Value One" id="MainContent_gvAllValues_0" />
    </td>
  </tr>
  <tr style="background-color:White;">
    <td>
      <input name="ctl00$MainContent$gvAllValues$ctl03vAllValues" type="text" value="RR Value Two" id="MainContent_gvAllValues_1" />
    </td>
  </tr>
  <tr style="background-color:#EFF3FB;">
    <td>
      <input name="ctl00$MainContent$gvAllValues$ctl04vAllValues" type="text" value="RR Value Three" id="MainContent_gvAllValues_2" />
    </td>
  </tr>
  <tr style="background-color:White;">
    <td>
      <input name="ctl00$MainContent$gvAllValues$ctl05vAllValues" type="text" value="RR Value Four" id="MainContent_gvAllValues_3" />
    </td>
  </tr>
</table>
<br />
<br />
<br />
<input type="submit" name="ctl00$MainContent$btnButton" value="Button" id="MainContent_btnButton" />

Answer 1

您可以在表单中可用的所有输入类型的文本框上使用 $.each 函数，并像这样提醒它们

$('#MainContent_btnButton').click(function(){
var alltextBoxMessages = "";
  $('input[type=text]').each(function(){
  alltextBoxMessages = alltextBoxMessages + " " + $(this).val();   
  }); 
   alert(alltextBoxMessages);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="4" id="MainContent_gvAllValues" style="color:#333333;border-collapse:collapse;">
            <tr style="color:White;background-color:#507CD1;font-weight:bold;">
                <th scope="col"vAllValues</th>
            </tr><tr style="background-color:#EFF3FB;">
                <td>
                            <input name="ctl00$MainContent$gvAllValues$ctl02vAllValues" type="text" value="RR Value One" id="MainContent_gvAllValues_0" />
                        </td>
            </tr><tr style="background-color:White;">
                <td>
                            <input name="ctl00$MainContent$gvAllValues$ctl03vAllValues" type="text" value="RR Value Two" id="MainContent_gvAllValues_1" />
                        </td>
            </tr><tr style="background-color:#EFF3FB;">
                <td>
                            <input name="ctl00$MainContent$gvAllValues$ctl04vAllValues" type="text" value="RR Value Three" id="MainContent_gvAllValues_2" />
                        </td>
            </tr><tr style="background-color:White;">
                <td>
                            <input name="ctl00$MainContent$gvAllValues$ctl05vAllValues" type="text" value="RR Value Four" id="MainContent_gvAllValues_3" />
                        </td>
            </tr>
        </table>
    </div>
            <br />
        <br />
        <br />
        <input type="submit" name="ctl00$MainContent$btnButton" value="Button" id="MainContent_btnButton" />

Answer 2

Try This ,Its Working fine.
html:
<input type="submit" name="ctl00$MainContent$btnButton" value="Button" id="MainContent_btnButton" onclick="ClickFunction()" />

//javascript
   function ClickFunction() {
            for (i = 0; i < 4; i++) {
                alert($('#MainContent_gvAllValues_'+i+'').val());
            }
        }

Answer 3

首先，在提交按钮中添加函数

<input type="submit" name="ctl00$MainContent$btnButton" value="Button" id="MainContent_btnButton" onclick="func()" />

创建一个JS并循环变量

 <script type="text/javascript">
        function func() {
            for (i = 0; i < 4; i++) {
                alert(document.getElementById('MainContent_gvAllValues_'+i).value);
            }
        }
    </script>