Add a new input box using js [Archive]

pyro.699

08-03-2006, 10:33 PM

Hello,

I should really get a js manual and read up on it -.- but, im looking for a way to optimize my code.

Again, i am making a diablo 2 like inventory. here is how i have the stats setup

Attributes
The bonus stats the user will receive for equipping this item.
Examples:
ads:none //this will display absolutely no ads!
magicfind:#%
pointbonus_general:+/-#
pointbonus_char:+/-#
pointbonus_thread:+/-#
pointbonus_reply:+/-#
pointbonus_post:+/-#
strength:+/-#
dexterity:+/-#
vitality:+/-#
energy:+/-#
usertitle_color:hex
usertitle_glow:hex
usertitle_style:style
Separate each with a new line.

It would be nice to be able to have single input boxes, like

<select name="type[$id]">
<optgroup label="Stats:">
<option value="ads">No Ads</option>
<option value="magicfind">Magic Find</option>
<option value="pointbonus_general">Bonus Points</option>
<option value="pointbonus_char">Bonus Points per Character</option>
<option value="pointbonus_thread">Bonus Points for new Thread</option>
<option value="pointbonus_reply">Bonus Points per Reply</option>
<option value="pointbonus_post">Bonus Points per Post</option>
<option value="strength">Bonus Strength</option>
<option value="dexterity">Bonus</option>
<option value="vitality">Bonus</option>
<option value="energy">Bonus</option>
<option value="usertitle_color">User Title Color</option>
<option value="usertitle_glow">User Title Glow</option>
<option value="usertitle_style">User Title's Style</option>
</optgroup>
</select>
<input type="text" name="options[$id]" value="" />

There are certain ones where i would like to have be able to put a value in the text box, and make it read only:

<select name="type[$id]">
<optgroup label="Stats:">
<option value="ads">No Ads</option>
</optgroup>
</select>
<input type="text" name="options[$id]" value="No Ads" readonly="readonly" />

But, if they select noads, then go to strength. The textarea is then editable again, and the value is set to =""

Sorry if this sounds confusing, but to wrap this up, i want to click on a text link that will add a new input line, without refreshing the page. and i can also set ones that are a default value, like noads

Thanks
~Cody Woolaver

pyro.699

08-06-2006, 11:52 AM

I found a way to make them appear.

<html>
<head></head>
<body>
<script>
var currcount = 1;
function add_stats(addremove)
{
if(currcount>=20)
{
var el = document.getElementById('addstats');
el.style.display = 'none';
return false;
}
else
{
currcount++;
el.style.display = 'inline';
}
}
</script>
<span id="stats">
<span id="addstats" style="display:inline"><a href="#" onClick="add_stats();return false;">Add Attributes</a></span>
<span id="stats1" style='display:inline'> <input type="text" name="stats[1]" size="72"></span>
<span id="stats2" style='display:none'> <br /><input type="text" name="stats[2]" size="72"></span>
<span id="stats3" style='display:none'> <br /><input type="text" name="stats[3]" size="72"></span>
<span id="stats4" style='display:none'> <br /><input type="text" name="stats[4]" size="72"></span>
<span id="stats5" style='display:none'> <br /><input type="text" name="stats[5]" size="72"></span>
<span id="stats6" style='display:none'> <br /><input type="text" name="stats[6]" size="72"></span>
<span id="stats7" style='display:none'> <br /><input type="text" name="stats[7]" size="72"></span>
<span id="stats8" style='display:none'> <br /><input type="text" name="stats[8]" size="72"></span>
<span id="stats9" style='display:none'> <br /><input type="text" name="stats[9]" size="72"></span>
<span id="stats10" style='display:none'><br /><input type="text" name="stats[10]" size="72"></span>
<span id="stats11" style='display:none'><br /><input type="text" name="stats[11" size="72"></span>
<span id="stats12" style='display:none'><br /><input type="text" name="stats[12]" size="72"></span>
<span id="stats13" style='display:none'><br /><input type="text" name="stats[13]" size="72"></span>
<span id="stats14" style='display:none'><br /><input type="text" name="stats[14]" size="72"></span>
<span id="stats15" style='display:none'><br /><input type="text" name="stats[15]" size="72"></span>
<span id="stats16" style='display:none'><br /><input type="text" name="stats[16]" size="72"></span>
<span id="stats17" style='display:none'><br /><input type="text" name="stats[17]" size="72"></span>
<span id="stats18" style='display:none'><br /><input type="text" name="stats[18]" size="72"></span>
<span id="stats19" style='display:none'><br /><input type="text" name="stats[19]" size="72"></span>
<span id="stats20" style='display:none'><br /><input type="text" name="stats[20]" size="72"></span>
</span>
<br />
<b>:)</b>
</body>
</html>

That changes the style from display:none to display:inline.

This dosent really work, because i need to be able to have many more (i know add more lines :P). Theres an upwards of 50 different variables, and i would have to write 37 lines of code for each one... 37 * 50 -.- thats a good 1850 lines of excess code!