Передача информации формы из одного поля в другое с использованием jQuery - PullRequest
0 голосов
/ 09 февраля 2020

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

Как я уже сказал, это всего лишь шаблон, который я бы основывал на реальных проектах

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...