How to display values in text area based on check boxes and radio buttons?

Quote:

---

Originally Posted by darkylord

Sure, for that we will need an other function that will be called when you click the checkbox with cheese. It will also tell the function weather or not it's checked (so it will disable them when you click to check and re-enable them when you click to uncheck it) :

HTML Code:

---

<input onclick="cheeseonly(this.checked);" type="checkbox" name = "size" id="cheese" value = "cheese"> Cheese Only <b />

---

And the function is :

Code:

---

function cheeseonly(onoff){
                document.getElementById('pepperoni').disabled=onoff;
                document.getElementById('olives').disabled=onoff;
                document.getElementById('sausage').disabled=onoff;
                document.getElementById('peppers').disabled=onoff;
                document.getElementById('onions').disabled=onoff;
                if(onoff==true){
                        document.getElementById('pepperoni').checked=false;
                        document.getElementById('olives').checked=false;
                        document.getElementById('sausage').checked=false;
                        document.getElementById('peppers').checked=false;
                        document.getElementById('onions').checked=false;
                }
        }

---

Sorry I didn't see the edit you made in time, check if the way I posted here works as well enough, if you insist to have the alert it's easy to add but you should know alerts are best to be avoided since they usually cause discomfort to your visitors.

---

Yeah the above code works, but could you show me how to make it so the alert pops up ONLY if there are other checkboxes checked and it also makes them unchecked? I know it is annoying but I wanted to see what it looks like first.

Here, with a small change in the cheeseonly function you can have an alert before it disables the rest of them, if any of them was checked :

Code:

---

function cheeseonly(onoff){
                if(onoff==true &&(document.getElementById('pepperoni').checked==onoff || document.getElementById('olives').checked==onoff || document.getElementById('sausage').checked==onoff || document.getElementById('peppers').checked==onoff || document.getElementById('onions').checked==onoff)){
                        alert('Other toppings will be disabled.');
                }
                document.getElementById('pepperoni').disabled=onoff;
                document.getElementById('olives').disabled=onoff;
                document.getElementById('sausage').disabled=onoff;
                document.getElementById('peppers').disabled=onoff;
                document.getElementById('onions').disabled=onoff;
                if(onoff==true){
                        document.getElementById('pepperoni').checked=false;
                        document.getElementById('olives').checked=false;
                        document.getElementById('sausage').checked=false;
                        document.getElementById('peppers').checked=false;
                        document.getElementById('onions').checked=false;
                }
        }

---

The code above will simply alert them.

The code here uses confirm which will give them the choice to cancel their action :

Code:

---

function cheeseonly(onoff){
                var reply=true;
                if(onoff==true &&(document.getElementById('pepperoni').checked==onoff || document.getElementById('olives').checked==onoff || document.getElementById('sausage').checked==onoff || document.getElementById('peppers').checked==onoff || document.getElementById('onions').checked==onoff)){
                        reply=confirm("Other toppings will be disabled.");
                }
                if(reply==true){
                        document.getElementById('pepperoni').disabled=onoff;
                        document.getElementById('olives').disabled=onoff;
                        document.getElementById('sausage').disabled=onoff;
                        document.getElementById('peppers').disabled=onoff;
                        document.getElementById('onions').disabled=onoff;
                        if(onoff==true){
                                document.getElementById('pepperoni').checked=false;
                                document.getElementById('olives').checked=false;
                                document.getElementById('sausage').checked=false;
                                document.getElementById('peppers').checked=false;
                                document.getElementById('onions').checked=false;
                        }
                }else{
                        document.getElementById('cheese').checked=false;
                }
        }

---

Quote:

---

Originally Posted by darkylord

Here, with a small change in the cheeseonly function you can have an alert before it disables the rest of them, if any of them was checked :

Code:

---

function cheeseonly(onoff){
                if(onoff==true &&(document.getElementById('pepperoni').checked==onoff || document.getElementById('olives').checked==onoff || document.getElementById('sausage').checked==onoff || document.getElementById('peppers').checked==onoff || document.getElementById('onions').checked==onoff)){
                        alert('Other toppings will be disabled.');
                }
                document.getElementById('pepperoni').disabled=onoff;
                document.getElementById('olives').disabled=onoff;
                document.getElementById('sausage').disabled=onoff;
                document.getElementById('peppers').disabled=onoff;
                document.getElementById('onions').disabled=onoff;
                if(onoff==true){
                        document.getElementById('pepperoni').checked=false;
                        document.getElementById('olives').checked=false;
                        document.getElementById('sausage').checked=false;
                        document.getElementById('peppers').checked=false;
                        document.getElementById('onions').checked=false;
                }
        }

---

The code above will simply alert them.

The code here uses confirm which will give them the choice to cancel their action :

Code:

---

function cheeseonly(onoff){
                var reply=true;
                if(onoff==true &&(document.getElementById('pepperoni').checked==onoff || document.getElementById('olives').checked==onoff || document.getElementById('sausage').checked==onoff || document.getElementById('peppers').checked==onoff || document.getElementById('onions').checked==onoff)){
                        reply=confirm("Other toppings will be disabled.");
                }
                if(reply==true){
                        document.getElementById('pepperoni').disabled=onoff;
                        document.getElementById('olives').disabled=onoff;
                        document.getElementById('sausage').disabled=onoff;
                        document.getElementById('peppers').disabled=onoff;
                        document.getElementById('onions').disabled=onoff;
                        if(onoff==true){
                                document.getElementById('pepperoni').checked=false;
                                document.getElementById('olives').checked=false;
                                document.getElementById('sausage').checked=false;
                                document.getElementById('peppers').checked=false;
                                document.getElementById('onions').checked=false;
                        }
                }else{
                        document.getElementById('cheese').checked=false;
                }
        }

---

---

Yes this works perfect, but only if I select a topping first and THEN select Cheese Only. If I select Cheese Only first and then another topping, it still allows the user to submit the order.

No it doesn't. If you select cheese only it disables the rest toppings so they can't be selected. One thing that needs to be fixed now is to restore the disabled toppings when you click reset. That's easy to do based on the rest of the code and hopefully you can do it alone by now. You can use parts of the cheeseonly function that will be placed on the cleanit function. I hope my examples have teach you enough things to manage it and that you aren't just copy pasting them :p

Quote:

---

Originally Posted by darkylord

No it doesn't. If you select cheese only it disables the rest toppings so they can't be selected. One thing that needs to be fixed now is to restore the disabled toppings when you click reset. That's easy to do based on the rest of the code and hopefully you can do it alone by now. You can use parts of the cheeseonly function that will be placed on the cleanit function. I hope my examples have teach you enough things to manage it and that you aren't just copy pasting them :p

---

Oh no I am not trying to just copy and paste them. I am just a little behind with HTML. I figured the rest out to be how I wanted it to work. I made it so if the Cheese Only box is checked and another box is checked it will pop up an alert and then uncheck the other boxes, but not disable them. Also if you check the Cheese Only box and no other boxes are checked, then it lets the user hit submit. It works no matter which box is checked first. I believe everything is working now. Thank you so much for helping me. I did learn a lot. Here is my finished code:

HTML Code:

---

<!DOCTYPE html>

<html lang="en">

 <head><title>Pizza Order Form</title>
    <style type="text/css">
       
      .outp {border-style:solid;background-color:white;
              border-color:red;padding:1em; border-width: .5em;}
               
                p {margin-left: 15%; width: 65%;}
               
                textarea {resize : none;}
               
                form {text-align: center}
               
                h2 {text-align: center}
               
    </style>
  <script type="text/javascript">
 
    function calculate(){
    var type;
    var newline= " ";
        var sum=0.00;
        var toppings="";
       
    if( document.getElementById("small").checked==true){
      type="Small Pizza";
          sum+=4.00;
    }
    if( document.getElementById("medium").checked==true){
      type="Medium Pizza";
          sum+=6.00;
    }
    if( document.getElementById("large").checked==true){
      type="Large Pizza";
          sum+=8.00;
    }
       
        if( document.getElementById("cheese").checked==true){
      toppings="Cheese Only, "
          }
         
        if( document.getElementById("pepperoni").checked==true){
      toppings=toppings+"Pepperoni, ";
          sum+=0.75;
    }
        if( document.getElementById("olives").checked==true){
      toppings=toppings+"Olives, ";
          sum+=0.60;
    }
        if( document.getElementById("sausage").checked==true){
      toppings=toppings+"Sausage, ";
          sum+=0.75;
    }
        if( document.getElementById("peppers").checked==true){
      toppings=toppings+"Peppers, ";
          sum+=0.50;
    }
        if( document.getElementById("onions").checked==true){
      toppings=toppings+"Onions, ";
          sum+=0.50;
    }
       
    var length = toppings.length;
    toppings = toppings.slice(0,length-2);

    document.getElementById("opta").innerHTML = type+newline+"Toppings:"+newline+toppings+newline+"Price - $"+sum.toFixed(2);
    }
       
        function erase(){
                document.getElementById("opta").innerHTML = "";
    }
       
        function checkcheese(){
                if( document.getElementById("cheese").checked==true)
                        {
                        alert("Can't select cheese and other toppings");
                        document.getElementById('pepperoni').checked=false;
                        document.getElementById('olives').checked=false;
                        document.getElementById('sausage').checked=false;
                        document.getElementById('peppers').checked=false;
                        document.getElementById('onions').checked=false;
                }
        }
       
        function cheeseonly() {
                if (document.getElementById('pepperoni').checked==true ||
                        document.getElementById('olives').checked==true ||
                        document.getElementById('sausage').checked==true ||
                        document.getElementById('peppers').checked==true ||
                        document.getElementById('onions').checked==true)
                        {
                                alert("Can't select cheese and other toppings");
                                document.getElementById('cheese').checked=true;
                                document.getElementById('pepperoni').checked=false;
                                document.getElementById('olives').checked=false;
                                document.getElementById('sausage').checked=false;
                                document.getElementById('peppers').checked=false;
                                document.getElementById('onions').checked=false;
                        }
                }
   
 
  </script>

 </head>
 <body>
 
  <h2>Joe's Pizza Palace
          <br />
          On-line Order Form
  </h2>
 
  <form name="wdfor" action="" method="post" >
 
    <p id = "op" class = "outp" > <b /> Select the size Pizza you want: &nbsp;&nbsp;
        <input type="radio" name = "size" id="small" value = "small" checked> Small - $4.00 <b />
                <input type="radio" name = "size" id="medium" value = "medium"> Medium - $6.00 <b />
                <input type="radio" name = "size" id="large" value = "large"> Large - $8.00 <b />
    </p>
       
    <p id = "op1" class = "outp" > <b /> Select the toppings: &nbsp;&nbsp;
        <input onclick="checkcheese();" type="checkbox" name = "size" id="pepperoni" value = "pepperoni"> Pepperoni ($0.75) <b />
                <input onclick="checkcheese();" type="checkbox" name = "size" id="olives" value = "olives"> Olives ($0.60) <b />
                <input onclick="checkcheese();" type="checkbox" name = "size" id="sausage" value = "sausage"> Sausage ($0.75) <b /> <br />
                <input onclick="checkcheese();" type="checkbox" name = "size" id="peppers" value = "peppers"> Peppers ($0.50) <b />                                                                                                                                                                         
                <input onclick="checkcheese();" type="checkbox" name = "size" id="onions" value = "onions"> Onions ($0.50) <b />
                <input onclick="cheeseonly();" type="checkbox" name = "size" id="cheese" value = "cheese"> Cheese Only <b />
               


  <p id="op2" class="outp">
    To obtain the price of your order click on the price button below:
       
        <br /><br />
       
       
       
        <input type="button" align = "left" onclick="calculate();" value="Price (Submit Button)"/>
                         
        <input type="reset" align = "left" onclick="erase();" value="Clear Form"/>
                         
        <br /><br />
                         
        <textarea class="outp" id="opta" style="border-color:black;" rows="6" cols="40" onfocus="this.blur()" >
    </textarea>
                         
  <br />
  </p>
  </form>


 </body>
</html>

---

Well done, I'm glad I could help.
Now you may want to check out javascripts a bit more a make some code shorter using loops and ids named as topping1, topping2, topping3.... so you can call them in the loop as "topping"+i . Just to loose some parts that are repeated anyway and make the code better to understand, shorter and easier to develop further or debug.

thanks for the info, I have been very useful

---

Elevadores de coches | Maquinaria para taller mecanico