vb.org Archive - Two Javascript Problems

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB3 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=15)

- - Two Javascript Problems (https://vborg.vbsupport.ru/showthread.php?t=124033)

Two Javascript Problems

One:

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

HTML Code:

<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.

HTML Code:

<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.

HTML Code:

<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

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

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.

Sorry, i just got help from another site.

HTML Code:

<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

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.

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

HTML Code:

<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.

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (5)bbcode_html_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (6)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01389 seconds Memory Usage 1,759KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (5)bbcode_html_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (6)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: