Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Form help, checkboxes and field values

    I have a form that has 'your price', which you enter, a 'default pricing' which is hardcoded and checkboxes to set the 'your price' field = the value of the 'default price' field.

    Here is what I am trying to do

    1. If the user clicks on the 'Set to default' link, it checks all the boxes and in doing so, sets all the values of the fields under 'Your Price' = to the values under 'Default Price'.

    **it would be very cool, if when the link is clicked to do this, it also change the text in the link to now say 'Unset the defaults' so they know they can click it again to undo.

    2. If they click on the link again, it unchecks all the boxes and empties all the fields under 'your price' column.

    ***(I have #1 accomplished except for the changing the link text to say 'unset' )



    3. I would also like to be able to check each box individually and it set each field and unset it as the toggle all link does.


    here is a link to a test page

    testpage

    Thank you for any help with this

  • #2
    New Coder
    Join Date
    Nov 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Use onChange function in the <input type=checkbox />

  • #3
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ok, I updated my function for the checkall and now it sets all the 'Your Price' fields = to the 'Default' field's values and then when you uncheck it, it unsets them all. Now I want this to also happen on the individual checkboxes as well.

    Right now, I added a onChange event to handle this but I am not thinking the way I did it is correct...


    What I have right now, works like a charm in FF but in IE, you have to check the first checkbox in the list then the one below it in order for the value in row 1 to change. So you have to go one beyond to get the previous field to work...not sure why.

    Any ideas?

    thank you again for any help


    NOTE:In my actual code, I am using a php for loop to dynamically build this list from a DB query. so it is possible to have many results, not just the three I have here. I am just trying to keep it simple for now.

  • #4
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for the reply Ancora...The Post this reply was for has been removed from thread for some reason... here is the missing post


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    	function toggleDefault(nChoice){
    
    		if (nChoice == "all")
    			{
    			 var nBox = document.forms[0].getElementsByTagName('input');
    			 for (i=0; i<nBox.length; i++)
    				{
    				 if (nBox[i].type == 'checkbox')
    					{
    					 (nBox[i].checked) ? nBox[i].checked = false : nBox[i].checked = true;
    					}
    				 if (/^Default/.test(nBox[i].name))
    					{
    					 (nBox[i].previousSibling.previousSibling.value == "") ? nBox[i].previousSibling.previousSibling.value = nBox[i].value : nBox[i].previousSibling.previousSibling.value = "";
    
    					}
    				}
    			}
    		else 	{
    			 (nChoice.previousSibling.previousSibling.previousSibling.previousSibling.value == "") ? nChoice.previousSibling.previousSibling.previousSibling.previousSibling.value = nChoice.previousSibling.previousSibling.value : nChoice.previousSibling.previousSibling.previousSibling.previousSibling.value = "";
    			}
    	}
    	
    </script>
    <style type="text/css">
    
    	 body {background-color:#eae3c6;margin-top:60px}
    	 form {width:490px;margin:auto}
    	 fieldset {width:490px;background-color:#f0fff0;border:1px solid #87ceeb}
    	 legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
    	 label {font-family:times;font-size:12pt;color:#00008b;padding-left:5px;margin-top:5px}
    	 input {font-family:times;font-size:12pt;margin-left:25px}
    	.checkBox {margin-left:60px;margin-right:70px}
    	.submitBtn {display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}
    	
    </style>
    </head>
    	<body>
    		<form method="post" action="">
    		   <fieldset>
    			<legend>Wallets</legend>
    				<label style='margin-left:32px'>Product</label>
    				<label style='margin-left:38px'>Your Price</label>
    				<label style='margin-left:33px'>Default Prices</label>
    				<label style='margin-left:15px;color:red;cursor:pointer' onclick="toggleDefault('all');(this.firstChild.data=='[Set Default Prices]') ? this.firstChild.data='[Unset Default Prices]': this.firstChild.data='[Set Default Prices]'">[Set Default Prices]</label>
    				<label>Wallets (Lustre)</label>
    					<input type='text' size='6' name='Your[]'>
    					<input type='text' size='6' name='Default[]' value='1.25' readonly>
    					<input type='checkbox' name='check13' class='checkBox' onclick="toggleDefault(this)">
    				
    				<label>Wallets (Matte)</label>
    					<input type='text' size='6' name='Your[]'>
    					<input type='text' size='6' name='Default[]' value='.99' readonly>
    					<input type='checkbox' name='check13' class='checkBox' onclick="toggleDefault(this)">
    				
    				<label>Wallets (Gloss)</label>	
    					<input type='text' size='6' name='Your[]'>
    					<input type='text' size='6' name='Default[]' value='.99' readonly onclick="toggleDefault(this)">
    					<input type='checkbox' name='check13' class='checkBox' onclick="toggleDefault(this)">
    							
    			<input type='submit' name='submit' value="Submit" class='submitBtn' >
    		   </fieldset>
    		</form>
    	</body>
    </html>


    I pasted that into my test page and it worked perfectly. However, when I tried to plug it into my actual site, I am not having the same luck

    Could you take a look at this please and tell me what I am doing wrong? I thought I pretty much copy and pasted what worked into my code and made a few changes that were needed to work with my actual site page.

    Here is a link to my page Example
    Last edited by tripwater; 12-13-2006 at 02:54 PM. Reason: The post that this reply was for was removed...

  • #5
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ok, the person contacted me and explained why they removed their thread. Rather, that person attacked me with ridiculous, unfounded and rude comments. So the above posted code I now refuse to use.

    So please ignore the above snippet of code and I would greatly appreciate anyone that would lend another solution to what I am trying to accomplish.

    Thank you in advance.
    Last edited by tripwater; 12-13-2006 at 03:43 PM.

  • #6
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    So please refer to this example testpage again in order to start this process over. Please refer to post 1 in this thread for what I am trying to do.Please bare with me while I update the page to its original form...

    thank you again.
    Last edited by tripwater; 12-13-2006 at 03:49 PM.

  • #7
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    OK, I have my page updated. Again here it is testpage

    It does everything I need it to do, right now. But I know there is a cleaner and more intelligent way to pull this off.

    On my final page I have a DB query returning results that I loop through so this list can be longer or shorter so I can either

    A. as I loop through with my php code, build the JS dynamically so it literally has every checkbox and field listed in the function (which will work but is cumbersome.

    B. Use JS to loop through a form element array checking the same things.


    **the field names and checkbox names are not always sequential. I name them using the unique IDs from the database like so

    Code:
    <input type=\"text\" name=\"Your".$row["ID"]."\"
    
    <input type=\"text\" name=\"Default".$row["ID"]."\"
    
    <input type=\"checkbox\" name=\"check".$row["ID"]."\"
    Just wanted to throw that out there in case you might be thinking about looping and using i (or what ever counter) for the names. One more thing, there may be a another form at teh top of the page in the form of a search bar field. They have the ability to turn this off or on. so forms[0] may be broken (if used)as if they have the searchbar enabled, this pricing form would now be forms[1] but if not enabled it would be forms[0]...


    Like I said, I think what I have will work but I know there has to be a better way to do it.

    Thank you again for your time
    Last edited by tripwater; 12-13-2006 at 04:16 PM.

  • #8
    Regular Coder fishluvr's Avatar
    Join Date
    Nov 2005
    Posts
    110
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Here's a simple version of what you seem to be after...

    Code:
    function CheckAll() {
    	for (var i = 0; i < document.pricing.elements.length; i++) {
    		if(document.pricing.elements[i].type == 'checkbox') {
    			document.pricing.elements[i].checked = !(document.pricing.elements[i].checked);
    			var rowID = document.pricing.elements[i].name;
    			setit(rowID);
    		}
    	}
    }
    function setit(rowID) {
    	rowID = rowID.substring(5);
    	document.pricing['Your'+rowID].value = (document.pricing['check'+rowID].checked) ? document.pricing['Default'+rowID].value : '';
    }
    Using the above, you'll also need to make a change to the function calls in the checkboxes: setit(this.name)

    Hope this helps...

  • #9
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    perfect, fishluvr. Thanks.


  •  

    Posting Permissions

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