Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript
I have spent many hours trying to figure this out. I am trying to get all of the data entered in the form to be placed into the text box at the end, also with an alert box confirming what was done. But Nothing is happening!!
 

[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--< html xmlns="http://www.w3.org/1999/xhtml"> -->
<h1>
    Pizzeria</h1>
<p>
    &nbsp;</p>
<p>
    <b>Name:</b>&nbsp;
    <input id="txtName" type="text" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <b>Pickup:</b>
    <input id="rdbPickUp" name="DeliveryMethod" type="radio" value="PickUp" />&nbsp;&nbsp;&nbsp;<b>Delivery:</b>
    <input id="rdbDelivery" name="DeliveryMethod" type="radio" value="Delivery" /></p>
<p>
    <!--      create ddl for style and size-->
    <!-- make ddl have a set value-->
    <b>Style:</b> &nbsp; &nbsp;
    <select id="ddlStyle">
        <option selected="selected">Choose Style</option>
        <option value="empty"></option>
        <option value="deepDish">Deep Dish</option>
        <option value="TomatoPie">Tomato Pie</option>
        <option value="ThinCrust">Thin Crust</option>
        <option value="Stuffed Crust">Stuffed Crust</option>
    </select>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b>Size:</b>
    <select id="ddlSize">
        <option selected="selected">Choose Size</option>
        <option value="empty"></option>
        <option value="Small">Small</option>
        <option value="Medium">Medium</option>
        <option value="Large">Large</option>
        <option value="XLarge">Xtra Large</option>
        <!--   <option value="other">Other value</option>-->
    </select></p>
<p>
    <!--     Toppings:
        <select id="investment1" <optgroup="" label="" name="investment0">
            <option value="1000">$1,000</option>
            <option value="5000">$5,000</option>
            <option value="10000">$10,000</option>
            <option value="25000">$25,000</option>
            <option value="other">Other value</option>
        </select></p>-->
    <p>
        <b>Toppings: </b>&nbsp; <b>&nbsp;Pepperoni: </b>
        <input id="chkPepperoni" type="checkbox" /><b> Black Olives: </b>
        <input id="chkBlkOlives" type="checkbox" />
        <b>Meatballs: </b>
        <input id="chkMeatball" type="checkbox" /><b> Sausage: </b>
        <input id="chkSausage" type="checkbox" /></p>
    <p>
        &nbsp;</p>
    <p>
        &nbsp;<input id="btnConfirmOrder" type="button" value="Confirm Order" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input id="btnClrFrm" type="button" value="Clear Form" onclick="this.form.reset()" /></p>
    <!-- //does this work? -->
    <p>
        <textarea id="txtArea" rows='10' cols='40' disabled='disabled'></textarea></p>
    <p>
        &nbsp;</p>
    <script language="javascript" type="text/javascript">
 

        var $ = function (id) {
            return document.getElementById(id);
 
             }
 
      function () {
 
            //get buttons and assign a funtion to its onclick

            $("btnConfirmOrder").onclick = ConfirmOrder;
 
            $("btnClrFrm").onclick = ClrFrm;
 

        }
       function ConfirmOrder() {
 
            //alert
            var message = "You have ordered the following:\n\n";
 
            //test the toppings checkboxes
            //display the checked toppings in textbox

            if ($("chkPepperoni").checked) {
                message +=
 

             " - " + $("chkPepperoni").value + "\n";
            }
 

            else if ($("chkBlkOlives").checked) {
                message +=
 
             " - " + $("chkBlkOlives").value + "\n";
            }
            else if ($("chkMeatball").checked) {
                message +=
 
             " - " + $("chkMeatball").value + "\n";
            }
            else if ($("chkSausage").checked) {
                message +=
 
             " - " + $("chkSausage").value + "\n";
            }
 
            //confirm to user what they have accepted
            //confirm(message)

 
            $("txtArea").value = message;
 
            }
 

 

        }
 

 

 

 

 

 
    </script>
    <!--</body>-->
</html>
Posted 2-Oct-12 20:52pm
Comments
aspnet_regiis at 3-Oct-12 4:52am
   
I am deleting my solution since you downvoted it without reason....
dale disney at 3-Oct-12 4:55am
   
you called my code complete crap. And your solution didn't do anything, hence the downvote.
n.podbielski at 3-Oct-12 5:30am
   
I know that you may be upset when someone says something like that. But it's normal. You are human. You do something. You do it wrong, make mistakes. You learn. You are human after all. Please read this post very insteresting posts (they helped me a lot not sometime ago):
 
http://www.code-magazine.com/Article.aspx?quickid=1105121
http://www.codinghorror.com/blog/2006/05/the-ten-commandments-of-egoless-programming.html
 
Don't give up. My first programs I wroted without documentation and internet. I tried use one approach. If it wasn't working I tried something else. And another. And another one. Why to try and learn and achive something i want to do. It was hard by I did it.
 
Don't give up. I easy when you grasp it.
Happy coding.
aspnet_regiis at 3-Oct-12 7:22am
   
Right you are.. There can be no solution for a crap..Thats why it is called a crap and not as code.... And yes, get my solutions checked from somebody else since you don't know jQuery..

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

I think problem is this:
  var $ = function (id) {
            return document.getElementById(id);
 
             }
What the hell? Where this come from?
 
If you intent to use jQuery just use it. Don't make you code a clutter to anyone who gonna see it.
Solution above is example. If you using somewhere function $ anyone assume it's jQuery but in that case it's is not.
 
Use document.getElementById(id); or use jQuery don't mix those 2.
 
And for your problem those function are never being executed. Use jQuery or document.ready and change this
function () {
 
            //get buttons and assign a funtion to its onclick

            $("btnConfirmOrder").onclick = ConfirmOrder;
 
            $("btnClrFrm").onclick = ClrFrm;
 

        }
 
to
 
$(function () {
 
          //get buttons and assign a funtion to its onclick

          $("btnConfirmOrder").onclick = ConfirmOrder;
 
          $("btnClrFrm").onclick = ClrFrm;
 

      });
 
[EDITED]
 
You have to attach events to your form buttons. Without it your code is never executed.
 
Use document.onload event for that:
 
http://www.w3schools.com/jsref/event_onload.asp[^]
 
function load() {
 
            //get buttons and assign a funtion to its onclick

            $("btnConfirmOrder").onclick = ConfirmOrder;
 
            $("btnClrFrm").onclick = ClrFrm;
 

        }
document.onload=load;
 
or
 
<body  önload="load" />
 
Use firebug in ff for debuging your JS code (like opera dragonfly or IE developer tools). Observe console for any JS errors.
  Permalink  
v2
Comments
aspnet_regiis at 3-Oct-12 3:38am
   
@n.podbielski .. I know the complete code is a crap. He has just copypasted it from internet. But I did not want to discourage him ... So just trying to help him
n.podbielski at 3-Oct-12 4:27am
   
I did not said that. But you right I am a little cranky today. I am sory for that.
dale disney at 3-Oct-12 4:29am
   
I came on here for help and you and this other guy want to make fun of people who dont know as much as you guys. Remember, there was a time when you didn't know what your know now.
aspnet_regiis at 3-Oct-12 4:50am
   
Nobody is making fun of you.. Do you think we are paid to invest our time on you ? And yes.. there was a time when I did not know jQuery. Then I went to the jQuery site and started to learn basics and tried the examples myself. I did not go for writing the code directly by placing the $s everywhere. Instead I created small examples of the syntaxes and learned it..
dale disney at 3-Oct-12 4:14am
   
It's not copied or pasted from the internet. I'm relying heavily on code from class.
n.podbielski at 3-Oct-12 4:29am
   
Drop this class if they teaching you something like this. It's bad habit and bad design.
dale disney at 3-Oct-12 4:31am
   
It's too late to get any money back. Are you going to help me, please? I dont know what to do after this.
aspnet_regiis at 3-Oct-12 4:47am
   
You can't continue with this code. You will have to delete this code completely and write from the scratch...
 
1. Include jQuery in the HTML
2. Write the code to get the element using jQuery syntax
3. Write the code to call a a function.. learn all these steps seperately...Try creating seperate excercises for these....
dale disney at 3-Oct-12 4:53am
   
Thank you for your help. I gave up on the code about 15 minutes ago. I dont know jquerey yet. I am going to just use what I sorta know with document.getElementById. Hopefully Ill be able to figure it out this way.
n.podbielski at 3-Oct-12 5:19am
   
Damn. I wroted one comment more with more code for you. I probably did not submitted that. Anyway I edited my solution.
dale disney at 3-Oct-12 5:22am
   
thank you. I have all of my failed attempts saved. This program would probably take a experienced programmer 4 minutes to do. If it was .net I'd be able to do it easy. UGH!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 535
1 CPallini 450
2 OriginalGriff 270
3 George Jonsson 256
4 Suvabrata Roy 229
0 OriginalGriff 4,873
1 CPallini 3,900
2 Sergey Alexandrovich Kryukov 3,474
3 George Jonsson 2,646
4 Gihan Liyanage 2,236


Advertise | Privacy | Mobile
Web02 | 2.8.140905.1 | Last Updated 3 Oct 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100