Simple site aplication example needed in Javascript

This site is best viewed in a modern browser with JavaScript enabled.

Simple site aplication example needed in Javascript

etirini

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!

JMRKER

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.

etirini

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!

root

You just post here wrapped in the forum tags that you have access to in the editor.

etirini

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

JMRKER

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

<!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)

Your form action (../) will die a horrible death.
The onsubmit= logic is looking for a true || false result. It might confuse it with a long logic assessment.

etirini

WOW!
I'll take a look at that and let you know.
Thank you very much!!!!!

etirini

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

<!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?

JMRKER

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.