SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast pyro.699's Avatar
    Join Date
    Jan 2006
    Location
    Canada
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    SitePoint Enthusiast pyro.699's Avatar
    Join Date
    Jan 2006
    Location
    Canada
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this should work:
    Code:
            input_name = 'stats['+ id_value +'][value]';
            document.add_attributes.elements[input_name].disabled = true;
    I can't reproduce your first problem (using IE6), but you are replacing the innerHTML of the div every time you add a new select. Maybe you should use the DOM to append the new items to the div instead. Here's a simple way that puts the new innerHTML inside a new div and appends it to the container div, it should work ok:
    Code:
        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++;
        }

  4. #4
    SitePoint Enthusiast pyro.699's Avatar
    Join Date
    Jan 2006
    Location
    Canada
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Man, your awesome. Thanks a ton!

    I have one question left, how would i get the value of the options list?
    HTML Code:
    input_value = document.getElementByName('stats['+currcount+'][option]');
    input_name = 'stats['+ id_value +'][value]';
    if(input_value == 'ads')
    {
    document.add_attributes.elements[input_name].value = 'None';
    document.add_attributes.elements[input_name].disabled = true;
    }
    And how do i get readonly? because disabled will not send posting data...

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hope this helps:
    Code:
    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]'];
    	
    	// value of selected option
    	var optValue = theSelect.value;
    	
    	// make input read only
    	theInput.readOnly = true;
    	
    }

  6. #6
    SitePoint Enthusiast pyro.699's Avatar
    Join Date
    Jan 2006
    Location
    Canada
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, you rock!

    ok, one more problem, then im out of your hair

    I dont want the users to be able to choose the same value more than once. I dont care how it really happens.

    So, if any of the values are set to 'ads'. all select ads would be removed, except for the one that was originally selected.

    I would like it to beinside the Check_Value Function

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a more simple approach, there is one drop down and when you select an option it creates a text field with the appropriate default value if any and then removes itself from the drop down.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    // object to store default values for each item
    var defaultValues = {
    	"magicfind": "",	
    	"pointbonus_general": "this is a default value",
    	"pointbonus_char": "",
    	"pointbonus_thread": "",
    	"pointbonus_reply": "",
    	"strength": "",
    	"dexteriety": "",
    	"vitality": "this is also a default value",
    	"energy": "",
    	"usertitle_color": "",
    	"usertitle_glow": "",
    	"usertitle_style": "",
    	"ads": ""
    };
    
    function addAttribute(theOption) {
    	if( theOption.value != "" ) {
    		
    		// create a label using the text from the option that is selected
    		var myLabel = document.createElement("label");
    		myLabel.innerHTML = theOption.text;
    		
    		// create an input using the name from the value of the option that is selected
    		var myInput = document.createElement("input");
    		myInput.type = "text";
    		myInput.name = theOption.value;
    		
    		// check to see if this item has a default value, if so set the value of the new input and make the new input read only
    		if( defaultValues[theOption.value] != "" ) {
    			myInput.value = defaultValues[theOption.value];
    			myInput.readOnly = true;
    		}
    		
    		// append the label and input to a new div, then append the new div to the container
    		var newDiv = document.createElement("div");
    		newDiv.appendChild(myLabel);
    		newDiv.appendChild(myInput);
    		document.getElementById("inputs").appendChild(newDiv);
    		
    		// this option has already been used, so remove it from the select
    		theOption.parentNode.removeChild(theOption);
    	}
    }
    </script>
    </head>
    <body>
    <form name="add_attributes">
    <select name="selectthing" onchange="addAttribute(this.options[this.selectedIndex]);">
    	<option value="">Select something</option>
    	<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>
    <div id="inputs"></div>
    </form>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •