我正在构建一个无缝注册页面,该页面将数据从一个注册页面发送到另一个注册页面,而我无法控制使用我在工作中使用的平台。除了平台提供的注册页面外,有些客户希望使用自定义注册页面,因此我们需要从头开始创建注册页面。
这就是我到目前为止所创建的:
<h1>Form 2</h1>
<form action="
" method="get">
<label for ="first">First:</label>
<input type="text" name="FirstName" id="first"><br>
<label for ="last">Last:</label>
<input type="text" name="LastName" id="last"><br>
<label for ="company">Job Title:</label>
<input type="text" name="JobTitle" id="JobTitle"><br>
<label for ="city">City:</label>
<select name="City">
<option value="BuenosAires">Buenos Aires</option>
<option value="Toronto">Toronto</option>
<option value="Madrid">Madrid</option>
<option value="MexicoDF">Mexico DF</option>
</select><br/>
<label for ="country">Country:</label>
<select name="Country">
<option value="Argentina">Argentina</option>
<option value="Canada">Canada</option>
<option value="Spain">Spain</option>
<option value="Mexico">Mexico</option>
</select><br/>
<input type="radio" name="joke" value="bed" /> A Bed<br>
<input type="radio" name="joke" value="pillow" /> pillow<br>
<input type="radio" name="joke" value="chair" /> chair<br>
<input type="radio" name="joke" value="light" /> light<br>
<label for ="email">Email:</label>
<input type="text" name="EMailAddress" id="email"><br>
This is Checked <input type="checkbox" id="scales" name="scales"
><br/>
<input type="submit">
</form>
第一个reg页面看起来一样。它只是在模拟真实项目的样子,因此此时的值没有意义。
这是Jquery代码:
$(document).ready(function(){
function processForm(){
var parameters = location.search.substring(1);
//var substr = parameters.substr(parameters.indexOf('FirstName'), parameters.length-1);
var substr = parameters.substr(0, parameters.length);
var temp = (substr.split("&"));
//names that appear in the URL on top
var values=[];
var urlName;
var urlNameArr=[];
var urlResult;
var urlResultArr=[];
var urlBoth;
var urlBothArr=[];
var name;
var value;
for(var i=0; i<temp.length;i++){
//values.push(decodeURIComponent(temp[i].substr(temp[i].indexOf('=')+1, temp[i].length )));
urlName = temp[i].substr(0,temp[i].indexOf("="));
urlNameArr.push(urlName);
urlResult = temp[i].substr(temp[i].indexOf("=")+1, temp[i].length);
urlResultArr.push(decodeURIComponent(urlResult));
urlBothArr.push([urlName, decodeURIComponent(urlResult)]);
}//urlNames
var inputNameArr=[];
var result=[];
var input=$('form input, select ');
//console.log(input);
var inputRadio =$('form [type=radio] ');
//console.log(inputRadio.length);
console.log($('form [type=text] '));
//This is used for the input radio. It works*
for (x in inputRadio){
//console.log(inputRadio[x].value);
for(var y=0;y<urlBothArr.length;y++){
//console.log(urlBothArr[y][0]);
if(urlBothArr[y][1]===inputRadio[x].value){
$("input[type=radio][name='"+urlBothArr[y][0]+"'][value='"+urlBothArr[y][1]+"']").prop('checked', true);
};
};
}
for (j in input){
//var j=0;j<input.length; j++
inputNameArr.push(input[j].name);
//console.log(inputNameArr);
//console.log(input[j].value);
function sortFunc(a,b){
return inputNameArr.indexOf(a[0]) - inputNameArr.indexOf(b[0]);
}//sort
urlBothArr.sort(sortFunc);
//console.log(urlBothArr);
urlBothArr.map(function(x, i){
//console.log(inputNameArr);
if(x[0] === inputNameArr[i]){
input[i].value = urlBothArr[i][1];
//console.log(input[i].value);
//$("input[name='"+x[0]+"'][value='"+urlBothArr[i][1]+"']").prop('checked', true);//check this code later
}
//console.log(input[i].value)
//if(x[1] === input[i].value){//Check later
//$("input[type=radio][name='"+x[0]+"'][value='"+urlBothArr[i][1]+"']").prop('checked', true);
//}
//console.log(x);
})//map
}//for
name=urlBothArr[urlBothArr.length-1][0];
value =urlBothArr[urlBothArr.length-1][1];
//console.log(inputNameArr)
}//processForm
processForm();
})
基本上,此代码执行的操作是获取出现在第二个表单的URL中的信息,并获取该信息并填充字段。 如果我按此顺序保持字段有效,但是当我开始将无线电输入位置的位置移动到另一个位置时,假设将整个块放在电子邮件字段的顶部,该字段将变为空白,并且reg页面看起来不完整。
正如我所说的,这只是一个模板,可以作为实际项目的基础