Update form fieldy dynamically without refreshing

Discussion in 'Programming' started by Lukaslo, Dec 27, 2009.

0
  1. #1
    I have a HTML form with menu (select/option) where you can choose 1, 2, 3, 4 or 5 (people). I would like that at the moment someone chooses the number of people that number of NAME SURNAME text fields appears.

    For example someone just selected 3, so under that menu the folowing would appear:

    Name: _____________ Surname: _____________
    Name: _____________ Surname: _____________
    Name: _____________ Surname: _____________

    iI would be very pleased, If someone could just point me in the right direction or give me a link to a tutorial that deals with simmilar problem.

    Thank you
     
    Lukaslo, Dec 27, 2009 IP
  2. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #2
    I guess this will help you

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>People</title>
</head>

<script>
function change_people_count(){
    string = "";
    people_name_surname_string = "Name: _____________ Surname: _____________<br>";

    selected_people_count = parseInt(document.getElementById("people_count").value);

    if(selected_people_count>0){
      for(var i=0; i<selected_people_count; i++){
        string += people_name_surname_string;
      }
      
      document.getElementById("people_name_surname").innerHTML = string;
    }
}
</script>

<body>

<select name="people_count" id="people_count" onchange="change_people_count();">
    <option value="0">-- Select People Count --</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<div id="people_name_surname">
</div>

</body>

</html>
    Code (markup):
     
    s_ruben, Dec 27, 2009 IP
    Lukaslo likes this.
  3. Lukaslo

    Lukaslo Peon

    Messages:
    751
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you very much this is almost exactly what I needed, I'll just do a little modification and it will work exactly as I wanted.

    Thank you, Rep ADDED ;)

    Here is a simplified version of what exactly I wanted:
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>People</title>
</head>

<script>
function change_people_count(){
    string = "";
    

    selected_people_count = parseInt(document.getElementById("people_count").value);

    if(selected_people_count>0){
      for(var i=1; i<=selected_people_count; i++){
        string +=  'Name: <input name="name' + i + '" type="text" size="25"> Surname: <input name="surname' + i +   '" type="text" size="25"><br />';
      }
      
      document.getElementById("people_name_surname").innerHTML = string;
    }
}
</script>

<body>
<?php 
	for($i=1; $i<=$_GET[people_count]; $i++){
		$name="name" . $i;
		$surname="surname" . $i;
		echo "$_GET[$name] $_GET[$surname] <br />";
	}
?>

<form action="people.php">
	<select name="people_count" id="people_count" onchange="change_people_count();">
    	<option value="0">-- Select People Count --</option>
    	<option value="1">1</option>
    	<option value="2">2</option>
    	<option value="3">3</option>
    	<option value="4">4</option>
    	<option value="5">5</option>
	</select>

	<div id="people_name_surname">
	</div>
	<input type="submit">
</form>
</body>

</html>
    Code (markup):
     
    Last edited: Dec 27, 2009
    Lukaslo, Dec 27, 2009 IP