Jquery多步骤表单收集数据并添加编辑链接
我正在编写一个多步骤表单。在这个表单的末尾,我希望有一个div来显示每个条目的值。一些入口需要格式化。例如,我将长度和宽度作为两个独立的输入,并希望将结果显示为长度X宽度。而其他人则在同一条线上。我希望每个条目旁边都有一个编辑按钮 我的HtmlJquery多步骤表单收集数据并添加编辑链接,jquery,forms,html,Jquery,Forms,Html,我正在编写一个多步骤表单。在这个表单的末尾,我希望有一个div来显示每个条目的值。一些入口需要格式化。例如,我将长度和宽度作为两个独立的输入,并希望将结果显示为长度X宽度。而其他人则在同一条线上。我希望每个条目旁边都有一个编辑按钮 我的Html <form> <article id="part1"> <input type"text" name="input1" id="input1"> <input type"text" name="input1" i
<form>
<article id="part1">
<input type"text" name="input1" id="input1">
<input type"text" name="input1" id="input2">
<input type"text" name="input1" id="input3">
<input class="next button" type="button" value="Next">
</article>
<article id="part2">
<input type"radio" name="radio" id="input4">
<input type"radio" name="radio" id="input5">
<input class="next button" type="button" value="Next">
</article>
<article id="part3">
<div id="results"></div>
<input name="Submit" type="submit" class="next button submitLast" value="Order">
</article>
</form>
每次有人点击“input.next”,就会出现下一篇文章
当他们在“article#part2”中单击“input.next”时,最后一篇文章就会出现。“div#results”中的文本应该是在所有其他步骤中输入的内容,包括选择了哪个收音机。每个条目都应该有一个按钮,允许该人员跳回。此外#input2和#input3应显示在一行上,如“#input2”+“x”+“#input3”,其余应显示在一行上
我知道我可以使用.serializeArray()来显示结果,但这给我留下了两个问题
function showValues () {
var line1 = $("#input1").val()
var line2 = $("#input2").val()+" x "+$("input3").val()
var option1 = $("#input4").is(":checked")
var option2 = $("#input5").is(":checked")
if (option1==true) {
var type = "option1"
}
if (option2==true) {
var type = "option2"
}
$("results").append(line1+"<br>"+line2+"<br>"+type);
}
函数showValues(){
var line1=$(“#input1”).val()
var line2=$(“#input2”).val()+“x”+$(“input3”).val()
var option1=$(“#input4”)。为(“:选中”)
var option2=$(“#输入5”)。为(“:选中”)
如果(选项1==true){
var type=“option1”
}
如果(选项2==true){
var type=“option2”
}
$(“结果”)。追加(第1行+”
“+2行+”
“+type);
}
但是,如何添加编辑按钮并在单击时告诉它转到正确的文章?请尝试以下代码
function showValues() {
var line1 = $("#input1").val()
var line2 = $("#input2").val() + " x " + $("#input3").val()
var option1 = $("#input4").is(":checked")
var option2 = $("#input5").is(":checked")
if (option1 == true) {
var type = "option1"
}
if (option2 == true) {
var type = "option2"
}
var data = new Array();
data[0] = { text: line1, edit: 0 };
data[1] = { text: line2, edit: 0 };
data[2] = { text: type, edit: 1 };
for (var i = 0; i < data.length; i++) {
$("#results").append(data[i].text);
$("#results").append("<input type='button' value='edit' onclick='changePage(" + data[i].edit + ")' /><br />");
}
}
function changePage(pageIndex) {
// Replace this with whatever code is needed to change the page
alert(pageIndex);
}
函数showValues(){
var line1=$(“#input1”).val()
var line2=$(“#input2”).val()+“x”+$(“#input3”).val()
var option1=$(“#input4”)。为(“:选中”)
var option2=$(“#输入5”)。为(“:选中”)
如果(选项1==true){
var type=“option1”
}
如果(选项2==true){
var type=“option2”
}
var data=新数组();
数据[0]={文本:第1行,编辑:0};
数据[1]={文本:第2行,编辑:0};
数据[2]={文本:类型,编辑:1};
对于(变量i=0;i );
}
}
函数更改页面(页面索引){
//将此替换为更改页面所需的任何代码
警报(页面索引);
}
这与您的代码基本相同,只是数据首先放入数组(每个项表示一行),然后一次插入一行。它还在每一行上添加编辑按钮
请注意,插入的edit按钮有一个click处理程序,它调用changePage方法并传递适当的页面索引值
这可能只是一个输入错误,但您在两个jQuery选择器中缺少了“#”