Question

我正在尝试学习JQuery以及HTML。我试图附加一个新的输入数据表。我有一个提交按钮，应该运行JQUERY函数来附加表。我甚至在函数中放了一个警告框，看它是否至少在运行。是否有一个明显的原因导致我的功能根本没有运行？

HTML

<body>
<div class="form-style-2">
    <div class="form-style-2-heading">Provide your information</div>
    <form name="contactPage" id="contactPage">
        <label for="field1"><span>Name <span class="validated">*</span></span><input type="text" class="input-field" name="field1" id="name" value="" required /></label>
        <label for="field3"><span>Address <span class="validated">*</span></span><input type="text" class="input-field" name="field3" id="address" value="" required /></label>
        <label for="field2"><span>Email <span class="validated">*</span></span><input type="text" class="input-field" name="field2" id="email" value="" required /></label>


        <label><span>&nbsp;</span><input class="addrow" type="submit" value="Submit" /></label>
    </form>


    <table width="80%">
        <tr>
            <th>First Name</th>
            <th>Address</th>
            <th>Email</th>
        </tr>
        <tr>
        </tr>
    </table>
    <p>testtesttest</p>
</div>

JQUERY

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"> </script>
<script>
$(document).ready(function(){
    var mainElement = document.getElementById('contactPage');

    $(mainElement).find('form input[type="submit"]').click(function (evt) {
        evt.preventDefault();
        if ($(evt.target).parents('form')[0].checkValidity()) {
            alert("its working!!");

            var mainElement = document.getElementById('contactPage');

            var name = $("#name").val();
            var email = $("email").val();
            var address = $("address").val();

            var html = '<tr><td>' + name + '</td>' +
                         '<td>' + address + '</td>' +
                             '<td>' + email + '</td></tr>';

            $(mainElement).find('table tbody').append(html);
            $(mainElement).find('form :input[name]').val('')

        }

    });
});
</script>

Answer 1

正如@techfoobar在评论中指出的那样，你应该从你的选择器中删除“表单”，因为你在使用你的发现时已经在表单的“内部”。

curl.exe -k --url https://localhost/server/php/ping1.php

当您指定要分配表单容器的主要元素时，您的选择器无法在表单中找到任何提交，因为您已经在表单“内部”

Answer 2

我想你想要这样： -

完成的更改： -

1。$(mainElement).find('input[type="submit"]').click(function (evt) {

2。$('table tbody').append(html); $(mainElement).find('input[type="text"]').val('');

3.而不是<p>testtesttest</p>添加<tbody></tbody>

工作示例： -

＆＃13;

$(document).ready(function(){
  var mainElement = document.getElementById('contactPage');

  $(mainElement).find('input[type="submit"]').click(function (evt) {
    evt.preventDefault();
    if ($(evt.target).parents('form')[0].checkValidity()) {

      var mainElement = document.getElementById('contactPage');

      var name = $("#name").val();
      var email = $("#email").val();
      var address = $("#address").val();

      var html = '<tr><td>' + name + '</td><td>' + address + '</td><td>' + email + '</td></tr>';
      $('table tbody').append(html);
      $(mainElement).find('input[type="text"]').val('');

    }

  });
});

＆＃13;

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"> </script>
<body>
<div class="form-style-2">
    <div class="form-style-2-heading">Provide your information</div>
    <form name="contactPage" id="contactPage">
        <label for="field1"><span>Name <span class="validated">*</span></span><input type="text" class="input-field" name="field1" id="name" value="" required /></label>
        <label for="field3"><span>Address <span class="validated">*</span></span><input type="text" class="input-field" name="field3" id="address" value="" required /></label>
        <label for="field2"><span>Email <span class="validated">*</span></span><input type="text" class="input-field" name="field2" id="email" value="" required /></label>

        <label><span>&nbsp;</span><input class="addrow" type="submit" value="Submit" /></label>
    </form>
    <table width="100%">
        <tr>
            <th>First Name</th>
            <th>Address</th>
            <th>Email</th>
        </tr>
        <tr>
        </tr>
    </table>
    <tbody>
    </tbody>
</div>

＆＃13;

JQuery单击功能未运行

2 个答案: