автозаполнение текстовых полей на основе значения, выбранного в раскрывающемся списке - PullRequest
Новая
       3

автозаполнение текстовых полей на основе значения, выбранного в раскрывающемся списке

0 голосов
/ 27 апреля 2019 
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Policy Creations</title>
    <script type="text/javascript">
        /* function autofillValues(country,state, city, pincode,branch,addrLine1,addrLine2){ */        
           function autofillValues(country){

        console.log(country);
           document.getElementById('country').value = country;
           alert(document.getElementById('country').value);
           /* document.getElementById('state').value = state;
           document.getElementById('city').value = city;
           document.getElementById('pincode').value = pincode;
           document.getElementById('branch').value = branch;
           document.getElementById('addrLine1').value = addrLine1;
           document.getElementById('addrLine2').value = addrLine2;  */
       }

    </script>
</head>
<body>
<h1># Policy Creation</h1>
<br>
<h2>Insurer Details</h2>
<form name="newPolicy" th:object="${insurerList}">
Insurer Name<sup>*</sup>
    <!-- onchange = "autofillValues()" -->

   <select  onchange = "autofillValues('${insurerList')" >
     <option  value="">Select</option>
    <option th:each = "insurer : ${insurerList}"
            th:value = "${insurer.name}"
            th:utext="${insurer.name}" />     
    </select>   



Country<sup>*</sup> <input type="text" name="country" id="country"/>
State<sup>*</sup> <input type="text" name="state" id="state" value=""> <br><br>
City<sup>*</sup> <input type="text" name="city" id="city" value="">
Pincode<sup>*</sup> <input type="text" name="pincode" id="pincode" value="">
Branch<sup>*</sup> <input type="text" name="branch" id="branch" value="">
Address Line 1<sup>*</sup> <input type="text" name="addrLine1" id="addrLine1" value="">
Address Line 2 <sup>*</sup> <input type="text" name="addrLine2" id="addrLine2" value="">
</form>

</body>

</html>

У меня есть требование в проекте, где раскрывающийся список должен быть показан пользователю.Данные для отображения в раскрывающемся списке поступают из базы данных и задаются в объекте.этот объект затем повторяется, чтобы показать выпадающий список .. в моем случае объект является массивом (insurerList) .. после отображения данных в раскрывающемся списке я хочу автоматически заполнить другие текстовые поля, значения которых присутствуют в объекте insurerlist ...

Может кто-нибудь сказать мне, как я могу добиться этой функциональности в HTML?

IAM с помощью Spring MVC .... значение insurerList устанавливается в атрибуте модели Spring MVC ... любой другой подход к этомупроблема тоже приветствуется ...

Ответы [ 2 ]

0 голосов
/ 27 апреля 2019

Я думаю, что лучший способ добиться этого - сохранить извлеченные данные в массив, а затем автоматически заполнить эти данные во введенных вами входных данных.

Проверьте этот код; 

   // Store the data in an array like the one below
   var values = ['Coder', 'Somalia', 'Puntland', 'Galkayo', '291', '2', 's-999', 'f-991'];		
   function autofillValues(insurer, name){
  document.getElementById('country').value = values[0];
  document.getElementById('state').value = values[1];
  document.getElementById('city').value = values[2];
  document.getElementById('pincode').value = values[3];
  document.getElementById('branch').value = values[4];
  document.getElementById('addrLine1').value = values[5];
  document.getElementById('addrLine2').value = values[6];
  alert('done!');
}
<h1># Policy Creation</h1>
<br>
<h2>Insurer Details</h2>
<form name="newPolicy" th:object="${insurerList}">
Insurer Name<sup>*</sup>
    <!-- onchange = "autofillValues()" -->

   <select  onchange = "autofillValues('${insurerList')" >
     <option  value="">Select</option>
    <option th:each = "insurer : ${insurerList}"
        th:value = "${insurer.name}"
        th:utext="${insurer.name}" >  Click Here </option>       
    </select>   



Country<sup>*</sup> <input type="text" name="country" id="country"/>
State<sup>*</sup> <input type="text" name="state" id="state" value=""> <br><br>
City<sup>*</sup> <input type="text" name="city" id="city" value="">
Pincode<sup>*</sup> <input type="text" name="pincode" id="pincode" value="">
Branch<sup>*</sup> <input type="text" name="branch" id="branch" value="">
Address Line 1<sup>*</sup> <input type="text" name="addrLine1" id="addrLine1" value="">
Address Line 2 <sup>*</sup> <input type="text" name="addrLine2" id="addrLine2" value="">
</form>
0 голосов
/ 27 апреля 2019

Сделайте это вместо 

<select onChange = "autofillValues('${insurer}', this.value)">
 <option  value="">Select</option>
 <option th:each = "insurer : ${insurerList}"
        th:value = "${insurer.name}"
        th:utext="${insurer.name}"/>     
</select>

Выбранное значение и массив страховщиков будут переданы в функцию autofillValues(). 

function autofillValues(insurer, name){
  //get index of the selected name in the array
  var i = insurer.map(function (d) { return d['name']; }).indexOf(name);
  document.getElementById('country').value = insurer[i].country;
  document.getElementById('state').value = insurer[i].state;
  document.getElementById('city').value = insurer[i].city;
  document.getElementById('pincode').value = insurer[i].pincode;
  document.getElementById('branch').value = insurer[i].branch;
  document.getElementById('addrLine1').value = insurer[i].addrLine1;
  document.getElementById('addrLine2').value = insurer[i].addrLine2;
}

Надеюсь, это сработает для вас.

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

Нет похожих вопросов

...