www.webdeveloper.com
Results 1 to 9 of 9

Thread: Simple site aplication example needed in Javascript

  1. #1
    Join Date
    Jan 2014
    Posts
    5

    Lightbulb Simple site aplication example needed in Javascript

    Hello guys!
    Thanks for taking the time on reading this.
    Let me explain to you what I need.
    I'm really new at programming javascriot (I started lessons only a few days ago with a site calles Codeacademy). I want to make a simple site with an application but I'm getting really frustrated on it.
    What i need is the following: I need an application that allows the user to select from options A B and/or C from checkmarks and that when the option is clicked some text appears and then that allows the user to click on COPY to clipboard.
    Let me give you an example:

    ----------------------------------------
    What would you like to eat? (Choose one or more options)

    (X) Italian food
    () Meat
    (X) Something that swims

    You want to eat
    Pasta / Fish
    [COPY]
    ----------------------------------------

    Could you please give me an example of how to doing this?
    Thank yu very much for your help!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356
    Even if you cannot solve this with JS yourself, you could at least help us by designing the HTML / CSS portion of your problem.
    Then we could show you where the JS changes would be placed to accomplish your task.
    It is easier for us to fix your script than it is to design it from scratch. Plus it will help you to see the interactions of the JS and HTML.

  3. #3
    Join Date
    Jan 2014
    Posts
    5
    JMRKER, thanks for your response.
    I will upload my current code so you can take a look at it.
    Thanks a lot for your response!

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,221
    You just post here wrapped in the forum tags that you have access to in the editor.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  5. #5
    Join Date
    Jan 2014
    Posts
    5
    <form action="../" onsubmit="if (this.MyCheckbox.checked == false) { alert ('You didn\'t choose any of the checkboxes!'); return false; } else { return true; }">
    <p>
    <input type="CHECKBOX" name="Fish" value="Fish">Fish.</p>
    <p>
    <input type="CHECKBOX" name="Meat" value="Meat">Meat</p>
    <p>
    <input type="CHECKBOX" name="Chicken" value="Chicken">Chicken</p>
    <p>
    <input type="CHECKBOX" name="Soup" value="Soup">Soup</p>
    <p>
    <input type="CHECKBOX" name="Veggies" value="Veggies">Veggies</p>
    <p>
    <input type="SUBMIT" value="Submit!">
    </p>
    </form>
    This is the example I'm using to do the checkboxes but I cannot find a way to link the selections to the label (where the selections are writen) and the copy button (which I have no idea on how to do)

    Is this enogh for you to help me out? Is there anything else you need???
    Thanks guys!

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356

    Lightbulb

    Study on this ... and post back with any questions.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> HTML5 page </title>
    
    </head>
    <body>
    
    <div id="foodOptions">
     <h2>What would you like to eat?</h2>
     <b>Choose one or more options:</b>
     <p><input type="CHECKBOX" name="Pasta" value="Pasta">Italian food.</p>
     <p><input type="CHECKBOX" name="Steak" value="Meat">Red Meat</p>
     <p><input type="CHECKBOX" name="Pork" value="Pork">White Meat</p>
     <p><input type="CHECKBOX" name="Fish" value="Fish">Something that swims.</p>
     <p><input type="CHECKBOX" name="Duck" value="Duck">Something that flys.</p>
     <p><input type="CHECKBOX" name="Chicken" value="Chicken">A Fowl choice</p>
     <p><input type="CHECKBOX" name="Soup" value="Soup">Hot and non-viscous</p>
     <p><input type="CHECKBOX" name="Veggies" value="Veggies">Something green or yellow</p>
    </div>
    <button onclick="displayFoodChoices()">Display Choices</button>
    
    <textarea id="TArea" rows="10" cols="50"></textarea>
    <form id="myForm" method="post" onsubmit="return validate()"
     action="javascript:alert(document.getElementById('TArea').value)">
    <input type="submit" value="Submit">
    </form>
    
    <script type="text/javascript">
    function displayFoodChoices() {
      var str = '';
      var sel = document.getElementById('foodOptions').getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { str += sel[i].value + ' / '; }
      }
      document.getElementById('TArea').value = str;
    }
    function validate() {
      var okSubmit = false;
      var sel = document.getElementById('foodOptions').getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { okSubmit = true; }
      }
      if (okSubmit == false) { alert('Must check at least ONE option please'); }
      return okSubmit;
    }
    </script>
    
    </body>
    </html>
    The <form> action is just a dummy display to show how the validation should work.
    You can highlight and then CTRL-V to copy/paste or do a google search to copy contents of <textarea> to the clipboard.

    Couple of problems with you attempt:
    1. You cannot check all the available options by looking at only one element.
    Besides that, you have never defined the "myCheckbox" element(s)

    2. Your form action (../) will die a horrible death.

    3. The onsubmit= logic is looking for a true || false result. It might confuse it with a long logic assessment.
    Last edited by JMRKER; 01-27-2014 at 03:19 PM.

  7. #7
    Join Date
    Jan 2014
    Posts
    5
    WOW!
    I'll take a look at that and let you know.
    Thank you very much!!!!!

  8. #8
    Join Date
    Jan 2014
    Posts
    5
    GOD!
    I freaking suck
    every time I try to add a new option to the app I screw what was done before
    now I want to add the stupidest thing:
    I need the user to input some text and that text to be added to the previous options
    let me graphic that
    -----------------------------------------------------------
    What would you like to eat? (Choose one or more options)
    (INPUT TEXT FROM USER): [No desert for me please]

    (X) Italian food
    () Meat
    (X) Something that swims

    You want to eat
    [No potatoes for me please]-Pasta / Fish
    [COPY]

    After adding this not only I have the problem that newtext will not show on TArea but also the selections from the checkboxes will not work
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> HTML5 page </title>
    
    </head>
    <body>
    <h2>Insert your comment here</h2>
    <textarea name="inputtext"></textarea>
    <input type="button" value="Add New Text" onClick="addtext();"></p>
    
    <h2>What would you like to eat?</h2>
    <b>Choose one or more options:</b>
    
    <div id="foodoptions">
     <p><input type="CHECKBOX" name="Pasta" value="Pasta">Italian food.</p>
     <p><input type="CHECKBOX" name="Steak" value="Meat">Red Meat</p>
     <p><input type="CHECKBOX" name="Pork" value="Pork">White Meat</p>
     <p><input type="CHECKBOX" name="Fish" value="Fish">Something that swims.</p>
     <p><input type="CHECKBOX" name="Duck" value="Duck">Something that flys.</p>
     <p><input type="CHECKBOX" name="Chicken" value="Chicken">A Fowl choice</p>
     <p><input type="CHECKBOX" name="Soup" value="Soup">Hot and non-viscous</p>
     <p><input type="CHECKBOX" name="Veggies" value="Veggies">Something green or yellow</p>
    </div>
    <button onclick="displayFoodChoices()">Display Choices</button>
    
    <textarea id="TArea" rows="10" cols="50"></textarea>
    <form id="myForm" method="post" onsubmit="return validate()">
    <input type="submit" value="Reset">
    </form>
    
    <script language="javascript" type="text/javascript">
    function addtext() {
    	var newtext = document.myform.inputtext.value;
    	document.myform.TArea.value += newtext;
    }
    function displayFoodChoices() {
      var str = '';
      var sel = document.getElementById('foodOptions').getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { str += sel[i].value + '-'; }
      }
      document.getElementById('TArea').value = str;
    }
    function validate() {
      var okSubmit = false;
      var sel = document.getElementById('foodOptions').getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { okSubmit = true; }
      }
      if (okSubmit == false) { alert('Must check at least ONE option please'); }
      return okSubmit;
    }
    </script>
    
    </body>
    </html>
    could you please take a look at this and let me know what i did wrong?

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356

    Thumbs down

    You have several problems. Some could be solved by looking at the error console if you are using FF or Chrome browsers.

    First off, JS is case sensitive.
    You can not define an element, for example <div> to have an id='foodoptions'
    but then try to reference it with the getElementById('foodOptions').

    Next you need to know that the document.myform.newtext.value is not defined if your form is named 'myForm'
    Plus, the <form> tag I supplied did not use the name= option, so the reference is totally invalid.
    name = has been deprecated, which is why I used the id="myForm" definition with the document.getElementById retrieval method.

    Finally, you changed the <form> tag by removing the action definition. It needs to do something when the form validates.
    You tell it do submit, but there is nothing to submit to. Boom ... you die again if you were playing an RPG!

    It is also better for coding purposes that you define the problem fully and code to your needs.
    It is somewhat wasted effort if you change the requirements mid-stream and need to recode previous working code.

    So, bottom line, give it another try and let's see the changes you come up with.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles