FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

i need this simple javascript

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


imagefree
i need a javascript the can do the following work.


In a text box the user enters a number (and optionally clicks the generate button) and it generates a couple of form fields that much times.

FOr example:

if someone enters 13 in the text box, the following HTML repeats 13 times with a different variable name in it each time.

Code:
Text: <input type="text" name="text[0]" />     Link<input type="text" name="link[0]" />


and becomes:


Code:
Text: <input type="text" name="text[0]" />     Link<input type="text" name="link[0]" />
Text: <input type="text" name="text[1]" />     Link<input type="text" name="link[1]" />
Text: <input type="text" name="text[2]" />     Link<input type="text" name="link[2]" />
Text: <input type="text" name="text[3]" />     Link<input type="text" name="link[3]" />
Text: <input type="text" name="text[4]" />     Link<input type="text" name="link[4]" />
Text: <input type="text" name="text[5]" />     Link<input type="text" name="link[5]" />
Text: <input type="text" name="text[6]" />     Link<input type="text" name="link[6]" />
Text: <input type="text" name="text[7] />     Link<input type="text" name="link[7]" />
Text: <input type="text" name="text[8] />     Link<input type="text" name="link[8]" />
Text: <input type="text" name="text[9]" />     Link<input type="text" name="link[9]" />
Text: <input type="text" name="text[10]" />     Link<input type="text" name="link[10]" />
Text: <input type="text" name="text[11]" />     Link<input type="text" name="link[11]" />
Text: <input type="text" name="text[12]" />     Link<input type="text" name="link[12]" />


please help me providing this.

Last edited by imagefree on Fri Feb 15, 2008 5:09 pm; edited 1 time in total
AOP Web Development
I hope this find helpful but i didn't tried it yet

# so this is what you want to work at first but regarding your request i guess there is a html violation as there will be duplication in names in text[0] and link[0].



Code:

Text: <input type="text" name="text[0]" />     Link<input type="text" name="link[0]" />

#I prefer to work like:

<input type="text" id="text" name="text[]" />     Link<input type="text" id="link" name="link[]" />



function display_text(txt){

var max = document.getElementById('text')[0].value;
for(var i=0; i<max;i++){
document.write('<input type="text" id="text" name="text[]" />     Link<input type="text" id="link" name="link[]" />');

}


The reason i used it instead becaus it would be easy to get the value in php and handling it via javascript


I hope this things would greatly appreciate
imagefree
its not working.

Here is what i was using.



Code:
<html><head><title>The home page</title></head>
<body>
<form action="index.php" method="post">

function display_text(txt){

var max = document.getElementById('text')[0].value;
for(var i=0; i<max;i++){
document.write('<input type="text" id="text" name="text[]" />     Link<input type="text"

id="link" name="link[]" />');
}
</form>

</body>
</html>


I even dont know how to use javascript (because in this case, browser (opers) displays it as HTML).

Thanks for you help.
imagefree
Someone please help me.
BlueVD
here's the "thing"
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function addInputs(vNum,vElem,dElem){
   var resStr="";
   for(i=0;i<vNum;i++){
      resStr+=vElem.replace("%n",i)+"\n\r";
   }
   tmpElem=document.getElementById(dElem);
   tmpElem.innerHTML=resStr;
}

function addInputsNum(vElem,dElem){
   var resStr="";
   vNum=document.getElementById('num').value;
   for(i=0;i<vNum;i++){
      resStr+=vElem.replace("%n",i)+"\n\r";
   }
   tmpElem=document.getElementById(dElem);
   tmpElem.innerHTML=resStr;
}
</script>
</head>

<body>
<button onmouseup="addInputs(5,'<input type=\'text\' name=\'input%n\' id=\'input%n\'><br />','div1');">Add 5 inputs</button><br />
<input type="text" id="num" /><br />
<button onmouseup="addInputsNum('<input type=\'text\' name=\'input%n\' id=\'input%n\'><br />','div1');">Add inputs</button>
<div id="div1"></div>
</body>
</html>
imagefree
BlueVD wrote:
here's the "thing"
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function addInputs(vNum,vElem,dElem){
   var resStr="";
   for(i=0;i<vNum;i++){
      resStr+=vElem.replace("%n",i)+"\n\r";
   }
   tmpElem=document.getElementById(dElem);
   tmpElem.innerHTML=resStr;
}

function addInputsNum(vElem,dElem){
   var resStr="";
   vNum=document.getElementById('num').value;
   for(i=0;i<vNum;i++){
      resStr+=vElem.replace("%n",i)+"\n\r";
   }
   tmpElem=document.getElementById(dElem);
   tmpElem.innerHTML=resStr;
}
</script>
</head>

<body>
<button onmouseup="addInputs(5,'<input type=\'text\' name=\'input%n\' id=\'input%n\'><br />','div1');">Add 5 inputs</button><br />
<input type="text" id="num" /><br />
<button onmouseup="addInputsNum('<input type=\'text\' name=\'input%n\' id=\'input%n\'><br />','div1');">Add inputs</button>
<div id="div1"></div>
</body>
</html>


Thanks! It almost worked. I need 1 extra thing ie it generates a pair of boxes multiple time as shown in my first post to this thread (please also add the lable Text and Link to it). You may remove the "Add 5 inputs" btton.


Thanks
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.