Two Javascript Problems

[pyro.699]

One:

I have been using innerHTML to dynamically update my page. I have added the following function

<script>
var currcount = 1;
function add_stats()
{
if(currcount>13) return false;
div = document.getElementById('inputs');
current_html = div.innerHTML;
div.innerHTML = current_html +
'<select id="stats'+ currcount +'" name="stats['+ currcount +'][option]" onChange="check_value(\''+ currcount +'\')">'
+'<option value="magicfind">Magic Find</option>'
+'<option value="pointbonus_general">Pointbonus General</option>'
+'<option value="pointbonus_char">Pointbonus Characters</option>'
+'<option value="pointbonus_thread">Pointbonus per New Thread</option>'
+'<option value="pointbonus_reply">Pointbonus per Reply</option>'
+'<option value="strength">Strength</option>'
+'<option value="dexteriety">Dexteriety</option>'
+'<option value="vitality">Vitality</option>'
+'<option value="energy">Energy</option>'
+'<option value="usertitle_color">Usertitle Color</option>'
+'<option value="usertitle_glow">Usertitle Glow</option>'
+'<option value="usertitle_style">Usertitle Style</option>'
+'<option value="ads">No Ads</option>'
+'</select>'
+'<input type="text" size="23" name="stats['+ currcount +'][value]" />'
+'<br />';
currcount++;
}
</script>
<a href="#" onClick="add_stats()">Add some more Attributes</a>
<div id="inputs">
<!-- Inputs Go Here -->
</div>


Here is the steps that i go threw and give me this problem.

1) I click on 'Add some more Attributes' three times.
the default value is 'magicfind'
2) I change the vale of the second one to 'ads'
3) I click on 'Add some more Attributes' once more
All the value of the second one has returned to 'magicfind'

So basically every time you click on 'Add some more Attributes' all the values are reset to the default value.


Two:

These two problems are related with one and other.

For some of the option values there will be default values.
Example:
For the attribute 'ads' there will have to be a default value, so i need to disable the input beside it, and put a value in it. Here is my function so far.

<script>
function check_value(id_value)
{
input_name = 'stats['+ id_value +'][value]';
document.add_attributes.input_name.disabled = true;
}
</script>

I know how document.add_attributes.input_name.disabled should look like document.form_name.input_name I have a feeling that the [ and ] are messing the function up.

I do have a proper form setup.

<a href="#" onClick="add_stats()">Add some more Attributes</a>
<form action="?subit=now" name="add_attributes" method="post">
<div id="inputs">
<!-- Inputs Go Here -->
</div>
<input type="submit">
</form>


Thankyou for all of your help
~Cody Woolaver

[pyro.699]

Sorry for the bump, its just that ive been working on this script for a good 3 weeks, and its getting exausting. After this part is done, i will be able to move on, but i cant go anyfurther without this script working. Please help me

[Code Monkey]

It would be better if you where creating the select menu dynamicaly using DOM and appending and removing as needed. Creating the whole select menu then using innerHTML is outdated and causes many issues.

As a side not. You should really put that in a seperate js page so that it will be cached by the users browser.

[pyro.699]

Sorry, i just got help from another site.

<script>
var currcount = 1;
function add_stats()
{
if(currcount>13) return false;
div = document.getElementById('inputs');
var newDiv = document.createElement("div");
newDiv.innerHTML = '<select id="stats'+ currcount +'" name="stats['+ currcount +'][option]" onChange="check_value(\''+ currcount +'\')">'
+'<option value="magicfind">Magic Find</option>'
+'<option value="pointbonus_general">Pointbonus General</option>'
+'<option value="pointbonus_char">Pointbonus Characters</option>'
+'<option value="pointbonus_thread">Pointbonus per New Thread</option>'
+'<option value="pointbonus_reply">Pointbonus per Reply</option>'
+'<option value="strength">Strength</option>'
+'<option value="dexteriety">Dexteriety</option>'
+'<option value="vitality">Vitality</option>'
+'<option value="energy">Energy</option>'
+'<option value="usertitle_color">Usertitle Color</option>'
+'<option value="usertitle_glow">Usertitle Glow</option>'
+'<option value="usertitle_style">Usertitle Style</option>'
+'<option value="ads">No Ads</option>'
+'</select>'
+'<input type="text" size="23" name="stats['+ currcount +'][value]" />'
+'<br />';
div.appendChild(newDiv);
currcount++;
}

function check_value(id_value)
{
var theForm = document.forms['add_attributes'];
var theSelect = theForm.elements['stats['+ id_value +'][option]'];
var theInput = theForm.elements['stats['+ id_value +'][value]'];
var optValue = theSelect.value;

if(optValue == 'ads')
{
theInput.readOnly = true;
theInput.value = 'None';
}
else
{
theInput.readOnly = false;
theInput.value = '';
}
}
</script>


Thanks Anyway.
~Cody Woolaver

[Code Monkey]

Here is a comprehensive list of select options.

http://www.w3schools.com/htmldom/dom_obj_select.asp

I still recomend you take a more comprehensive DOM aproach.

[Andrew Green]

Javascript is certainly not my strong suit, but here is a solution:

<script>
var currcount = 1;
function add_stats()
{
var temp = new Array()
for(c=1;c<currcount;c++){
temp[c] = document.getElementById("stats" + c).value;
}
if(currcount>13) return false;
div = document.getElementById('inputs');
current_html = div.innerHTML;
div.innerHTML = current_html +
'<select id="stats'+ currcount +'" name="stats['+ currcount +'][option]" onChange="check_value(\''+ currcount +'\')">'
+'<option value="magicfind">Magic Find</option>'
+'<option value="pointbonus_general">Pointbonus General</option>'
+'<option value="pointbonus_char">Pointbonus Characters</option>'
+'<option value="pointbonus_thread">Pointbonus per New Thread</option>'
+'<option value="pointbonus_reply">Pointbonus per Reply</option>'
+'<option value="strength">Strength</option>'
+'<option value="dexteriety">Dexteriety</option>'
+'<option value="vitality">Vitality</option>'
+'<option value="energy">Energy</option>'
+'<option value="usertitle_color">Usertitle Color</option>'
+'<option value="usertitle_glow">Usertitle Glow</option>'
+'<option value="usertitle_style">Usertitle Style</option>'
+'<option value="ads">No Ads</option>'
+'</select>'
+'<input type="text" size="23" name="stats['+ currcount +'][value]" />'
+'<br />';

for(c=1;c<currcount;c++){
document.getElementById("stats" + c).value = temp[c];
}
currcount++;
}


</script>

You'll have to do basically the same thing for the other field. For the second problem you could go with a "onChange" call off the select box, to call a function to check if it is one of the defaults, if it is fill it in.