编辑和删除按钮在表单中不起作用如何修复
[英]Edit and Delete buttons are not working in form how to fix it
问题描述
The code is incorrect for edit button when click on edit button it has to show the data of person which we clicked, and delete button also has to delete the selected person's data can't solve this issue buttons are not working properly give some advice how to fix it. 
单击编辑按钮时，它必须显示我们单击的人员的数据，而编辑按钮的代码不正确，而删除按钮也必须删除所选人员的数据，无法解决此问题。按钮不能正常工作，请提供一些建议要解决这个问题。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wizard form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./css/form.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min
.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
//css // css
.nav-item{width:160px;text-align: center;}
h2 {text-align: center; text-transform: uppercase;font-weight: bold}
li a :hover{}
.tab-content{display: none;}
.tab-content.active{display: block}
.next{padding: 5px 10px;border: 1px solid grey;
border-radius: 5px;
float: right;
text-align: center;
font-weight: 700;
cursor: pointer;}
.prev{padding: 5px 10px;border: 1px solid grey;
border-radius: 5px;
float: left;
text-align: center;
font-weight: 700;
cursor: pointer;}
.next:hover{background-color: #ccc}
.prev:hover{background-color: #ccc}
.wrap{padding:200px 30px 0 30px;}
table{width:100%}
tr{width:100%;}
tr th{width:8%; text-align:center; font-size:12px; border-bottom: 1px solid grey }
tr td{width:8%; text-align:center; font-size:12px; }
java script jquery started Java脚本jQuery启动
<script> // variables used
var tab_id;
var id=0;
var fnm;
var lnm;
var gen;
var mail;
var num;
var dob;
var sport;
var about;
var tcn;
var target;
var edit;
var count;
$(document).ready(function () {
$(".next").click(function () { //click function for next button
count = $(this).attr('data-tab');
show_form(count);
fnm = $("#fname").val();
lnm = $("#lname").val();
gen = $("input[name='gender']:checked").val();
mail = $("#mail").val();
num = $("#number").val();
dob = $("#dob").val();
});
$(".prev").click(function () {
count = $(this).attr('data-tab');
show_form(count);
});
function show_form(count) {
tab_id = count;
$('li a').removeClass('active');
$('.tab-content').hide();
$("." + tab_id).addClass("active");
$("#" + tab_id).show();
}
function reset() {
$("#fname").val("");
$("#lname").val("");
$("input[name='gender']").prop("checked", false);
$("#mail").val(" ");
$("#number").val(" ");
$("#dob").val("");
$("#sport").val("");
$("#about").val("");
$("#tc").prop("checked", false);
console.log(id, fnm, lnm, gen, mail, num, dob, sport, about, tcn);
}
$("#sbmt").click(function () {
if ($('#tc').is(":checked")) {
tcn = "agree";
} else {
tcn = "disagree";
}
sport = $("#sport").val();
about = $("#about").val();
tab_data();
reset();
});
function tab_data() {
id++;
var data_dlt = "<button class='next delete'>delete</button>";
var data_edt = "<a class='edit next' data-tab='tab1'>edit</a>";
$("table").append("<tr>" + "<td id='uid'>" + id + "</td>" + "<td>" + fnm + "</td>" + "<td>" + lnm + "</td>" +
"<td>" + gen + "</td>" + "<td>" + mail + "</td>" + "<td>" + num + "</td>" + "<td>" + dob + "</td>" +
"<td>" + sport + "</td>" + "<td>" + about + "</td>" + "<td>" + tcn + "</td>" + "<td>" + data_edt + "</td>" + "<td>" + data_dlt + "</td>" + "</tr>");
$(".edit").click(function () {
count = $(this).attr('data-tab');
show_form(count);
edit = ($(this).index());
console.log(edit);
$("#fname").val(fnm);
$("#lname").val(lnm);
$("input[name='gender']").prop("checked", false);
$("#mail").val(mail);
$("#number").val(num);
$("#dob").val(dob);
$("#sport").val(sport);
$("#about").val(about);
$("#tc").prop("checked", false);
console.log(id, fnm, lnm, gen, mail, num, dob, sport, about, tcn);
});
$("#del").click(function () {
target = $("td button .delete").index(this);
console.log(target);
});
}
})
</script>
HTML with Bootstrap 带Bootstrap的HTML
<div class="container clearfix" style="padding:30px 20%;">
<h2>Wizard Form</h2>
<br>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link tab1 active" data-tab="tab1" >STEP 1</a>
</li>
<li class="nav-item">
<a class="nav-link tab2" data-tab="tab2" >STEP 2</a>
</li>
<li class="nav-item">
<a class="nav-link tab3" data-tab="tab3">STEP 3</a>
</li>
</ul>
<!-- Tab panes -->
<div id="tab1" class=" tab-pane tab-content active"><br>
<form>
<div class="form-group row">
<label for="fname" class="col-sm-3 col-form-label">First Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="fname" placeholder="Enter first name">
</div>
</div>
<div class="form-group row">
<label for="lname" class="col-sm-3 col-form-label">Last Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="lname" placeholder="Enter last name">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-3 pt-0">Gender:</legend>
<div class="col-sm-8">
<div class="form-check">
<label><input type="radio" name="gender" value="male">Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
</div>
</div>
</div>
</fieldset>
<div>
<a data-tab="tab2" class="next" >SAVE & NEXT</a>
</div>
</form>
</div>
<div id="tab2" class="tab-pane tab-content"><br>
<form action="#" method="post">
<div class="form-group row">
<label for="mail" class="col-sm-3 col-form-label">Email:</label>
<div class="col-sm-8">
<input id="mail" type="email" placeholder="Enter Email" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="number" class="col-sm-3 col-form-label">Contact No:</label>
<div class="col-sm-8">
<input id="number" type="text" placeholder="Enter contact number" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="dob" class="col-sm-3 col-form-label">Date Of Birth: </label>
<div class="col-sm-8">
<input id="dob" type="text" placeholder="dd/mm/yyyy" class="form-control">
</div>
</div>
<div style="margin-top:20px;">
<a data-tab="tab1" class=" prev">PREVIOUS</a>
<a data-tab="tab3" class=" next">SAVE & NEXT</a>
</div>
</form>
</div>
<div id="tab3" class="tab-pane tab-content"><br>
<form action="#" methos="post">
<div class="form-group row">
<label for="sport" class="col-sm-3 col-form-label"> Favourite Sport</label>
<div class="col-sm-8">
<select id="sport" class="form-control">
<option selected></option>
<option >Cricket</option>
<option >Tennis</option>
<option >Soccer</option>
<option >Hockey</option>
<option >Wrestling</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="about" class="col-sm-3 col-form-label">About Yourself</label>
<div class="col-sm-8">
<textarea class="form-control" id="about" rows="1"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-3"></div>
<div class="col-sm-8">
<input type="checkbox" id="tc" value="agree">
<label for="tc" class=" col-form-label" >I agree to <a href="#">Terms & Conditions</a></label>
</div>
</div>
<a data-tab="tab2 " class="prev">PREVIOUS</a>
<a class="next " data-tab="tab1" id="sbmt" >submit</a>
</form>
</div>
</div>
<div class="wrap">
<table>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Email</th>
<th>Contact no </th>
<th>DOB</th>
<th>sports</th>
<th>About </th>
<th>T&C</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</table>
</div>
</body>
</html>
1 个解决方案
解决方案1
0 2019-09-02 15:42:54
Replace 更换
var data_dlt = "<button class='next delete'>delete</button>";
With 用
var data_dlt = "<button class='next delete' id='del' name='del'>delete</button>";
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
jqGrid | 添加编辑删除按钮不起作用 - jqGrid | add-edit-delete buttons not working
如何在数据表中添加编辑和删除按钮 - How to add edit and delete buttons in datatable
当我使用编辑和删除按钮提交表单时显示所有值 - display all the values when i submit in form with edit and delete buttons
如何修复无法使用按钮网格的工具提示？ - How to fix my tooltip that is not working with grid of buttons?
如何在 vuejs 和 bootstrap 的字段操作中显示按钮删除和编辑 - how to display to buttons delete and edit in field action in vuejs and bootstrap
如何在数据表的每一行中添加编辑/删除按钮 - how to add edit/delete buttons in each row of datatable
jQuery如何开具发票并删除按钮的添加方式 - How jQuery invoices form and delete how buttons add
Datatables 1.10为“编辑”和“删除”按钮添加列 - Datatables 1.10 add column for Edit and Delete buttons
在数据表中添加删除和编辑按钮 - Add delete and edit buttons in Data Table
按钮不适用于“注册”表单 - The Buttons are not working in SignUp form
相关标签