gpt4 book ai didi

javascript - JQuery 点击功能未运行

转载 作者:行者123 更新时间:2023-11-28 04:44:06 25 4
gpt4 key购买 nike

我正在尝试学习 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>

最佳答案

我想你想要这样:-

已完成更改:-

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>

工作示例:-

$(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('');

}

});
});
<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>

关于javascript - JQuery 点击功能未运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43536426/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com