在javascript函数中插入select标记

Question

I have a javascript function that displays and hides a div after select. The div contains fields of a form. The div test2 has the fields of the div test1 plus a select which grabs data from a database. All of the fields are required.

Issue:

1) I have difficulty to include in formgroup2 variable I mean (test2) ,the select, due to the php code.

 function hide () {
 console.log("whatever")
 }

function visibilite1(_this) {
var formgroup1 = '<div id="test1" class="divs"><label>Name </label>  
<input type="text" name= "name" id= "name" required>  </br><label>User 
name </label><input type="text" name= "username" id= "username"   
required>  </br><label >Password <em>*</em></label><input 
type="password"   name= "password" id= "password" required></br></div>'

var formgroup2 = '<div id="test2" class="divs"><label>Name </label> 
<input type="text" name= "name" id= "name" required><label>User name 
</label><input type="text" name= "username" id= "username"  required>
<label>Password <em>*</em></label><input type="password" name= "password"
id= "password" required><input type="text" name= "username"  
id=  "username"  required><label>Adress<em>*</em></label><input 
type="text" name= "adress" id= "adress" required></div>'

var formtestElement = document.getElementById('formtest'); 

if (_this.value == "test1") {
  formtestElement.innerHTML = formgroup1
 } else if (_this.value == "test2") {
  formtestElement.innerHTML = formgroup2
 };
 }
 </script>

<select name="role" id="role"
onchange="visibilite1(this);hide()" >
<option value='test1'>Year1</option>
<option value='test2'>Year2</option>
</select>

 <div id="formtest">
<div id="test1" class="divs">
<label>Name </label>
<input type="text" name="name" id="name" required>  </br>
<label>User name </label>
<input type="text" name="username" id="username" required></br>
<label>Password <em>*</em></label>
<input type="password" name="password" id="password" required></br>
</div>
</div>

Every thing works perfectly but I can't include after the address field this following select tag in formgroup2 variable due to the php code:

  <label>Client name</label>
  <?php 
  $sql="select ClientName from claims_follow_up.Client where id 
  !='10001' order by ClientName asc "; 
   $req=mysqli_query($dbc,$sql) or die("Erreur d'execution"); 
   ?> 
   <select name="ClientName" id="ClientName"
  onchange="
   var maVal = document.getElementById('ClientName').value;
    if (maVal == 'Create new client')
    {
  window.open('newClientCreate.php', 'blank', 'scrollbars=yes,    
   resizable=no, top=50, left=155, width=1200, height=700');
  };activer()" required disabled="true" onkeypress="activerSubmit()">
  <option value="">select client </option>
   <?php 
   while($d=mysqli_fetch_array($req)) 
   { 
   echo'<option
    value="'.$d['ClientName'].'">'.$d['ClientName'].'</option>'; 
     } 
   mysqli_free_result($req); 

   ?>
 <option value="Create new client"  style="color:blue;    
 font-weight:bold">create new client</option>

 </select>

Answer 1

Your question is not clear, neither your code. I have trouble to understand what you try to do.

Here are some tips to make your code more readable, and your question more accessible to us:

1. Structure your code: Think before coding
2. Indent your code in a decent way

3. Use functions ! Avoid to have such things in code:

   onchange="var maVal = document.getElementById('ClientName').value;if (maVal == 'Create new client'){ window.open('newClientCreate.php', 'blank', 'scrollbars=yes, resizable=no, top=50, left=155, width=1200, height=700'); };activer()"

4. Use proper id and class names. It's hard to understand the purphose of a div wich his id is "test1" or a span class="divs".. that's nonsense

5. Now, when you post here, you should always specify what you are trying to do, and when you provide source code, say us from wich part of your code it's taken. You provided us 2 sample of code. I'm still asking myself if they are both from the same "test.php" script or if they're part of "test1.php" and "test2.php".

6. Choose your words. Your question is "Insert a select tag in a javascript function" wich in french means "Insérer un select tag DANS une fonction javascript". It would be more correct like this "Insert a select tag with a js function" or even better: "Using javascript to insert select tag in html div"

I hope this answer will help you to improve your question :) I will be glad to help you with this problem. Clean up your code, and dont hesitate to post it ! Good luck voisin