View Full Version : Form help, checkboxes and field values

12-09-2006, 12:25 AM
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 (http://www.photogap.net/test/testform.html)

Thank you for any help with this

12-09-2006, 02:44 AM
Use onChange function in the <input type=checkbox />

12-11-2006, 03:57 PM
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.

12-11-2006, 09:03 PM
Thanks for the reply Ancora...The Post this reply was for has been removed from thread for some reason... here is the missing post

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<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 = "";

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

<form method="post" action="">
<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' >

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 (http://www.photogap.net/common/pricing.php?galleryid=5)

12-13-2006, 03:40 PM
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.

12-13-2006, 04:46 PM
So please refer to this example testpage (http://www.photogap.net/test/testform.html) 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.

12-13-2006, 05:12 PM
OK, I have my page updated. Again here it is testpage (http://www.photogap.net/test/testform.html)

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

<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

12-13-2006, 11:16 PM
Here's a simple version of what you seem to be after...

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

12-13-2006, 11:36 PM
perfect,:thumbsup: fishluvr. Thanks.