Я создаю бесшовную страницу регистрации, которая отправляет данные с одной страницы регистрации на другую страницу регистрации, которую я не контролирую, используя платформу, которую мы используем на своей работе. Некоторым клиентам нужна настраиваемая страница регистрации, отличная от той, которую предлагает платформа, поэтому нам нужно создавать reg страницы с нуля.
Итак, это то, что я создал до сих пор:
<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>
Первый страница рег будет выглядеть так же. Это просто эмуляция того, каким будет настоящий проект, поэтому значения не имеют смысла на этом этапе.
И это код 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 страницы выглядят неполными.
Как я уже сказал, это всего лишь шаблон, который я бы основывал на реальных проектах