Jump to content

How to add more form fields as required - dynamically


n1concepts

Recommended Posts

Hi,

 

I'm working on a form to where I need to be able to (dynamically) add additional input text box (as shown in the code below) as they are required:

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>

<link href="styles/list_style.css" rel="stylesheet" type="text/css" media="screen">

<!-- Start AJAX -->
<script type="text/javascript">
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","includes/getproducts.php?q="+str,true);
xmlhttp.send();
}
</script>
<!-- End AJAX -->

</head>

<body>
Body Content - Header
<div id="container">
Create 3 x7 Divs Here
  <div>Each Div is </div>
  
<div>
<form>


Product 1: <input type="text" name"product" onKeyUp="showUser(this.value)">

</form>
<br />
<div id="txtHint"><b>Product info will be listed here.</b></div>
</div>  
  
  
<!-- End "container" DIV -->
</div>


</body>
</html>

 

As with this example which currently show one text field

Q1: How can I add a button or link where when clicked, it will add an additional input text box?

Q2: In doing so, should I create a loop to add a number value to each 'name' - i.e. product1, product2, product3, etc... or can I just call the results back in the $product[] array?

 

Any examples and or suggestions appreciated as I'm lost on this one.

 

thanks!

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.