JavaScript - Get Values

JavaScript
1 
<!DOCTYPE html>
<html>
<body>

Topping 1: <input id="element4" name="topping1" size = "20" type="text" maxlength="30" value="0"/>

<br><br> TOPPINGS ($1.50 per topping) <br>
    <input type="checkbox" name="topping11" id = "topping11" value="extra cheeze"> Extra Cheese
    <input type="checkbox" name="topping12" value="pepperoni"> Pepperoni
    <input type="checkbox" name="topping13" value="mushroom"> Mushroom
    <input type="checkbox" name="topping14" value="bacon"> Bacon
    <input type="checkbox" name="topping15" value="pineapple"> Pineapple <br>

<p>Click the button to show the first topping.</p>

<button type="button" onclick="myFunction8()">Show Topping 1</button>
<script>
function myFunction8(){
    var topping1 = document.getElementById("topping11");
    document.getElementById("element4").value = topping1;
}
</script>

</body>
</html>

I have developed sample code above which is intended to capture the selection from an option group and put it into an input field.

What is wrong with this code?

Mike Smith

2

Several things:

  • topping1 is an element object, yet you assign it to a property that expects a string
  • the ID topping11 refers to a single checkbox, not the whole checkbox group
  • you don’t check if the checkbox is actually checked (a checkbox’ value is independent from its checked state)
  • numbered variables are a sign that you should use an array instead
  • to select multiple elements, use classes and not IDs

And as enhancement, use <label>s, so clicking on the text checks the box.

3

Surely that will only get the status of the first input, not any of the rest of them? So if you select “Extra Cheese” you would get an indication, but the others don’t have an id. Maybe I’m wrong, maybe my HTML is rusty.

You might be better asking in the JavaScript forum - there’s no PHP in this code.

4

If this is going to actually be submitted to a processing page, you have given all the checkboxes unique names, so your action page will have to iterate through a pre-determined list of options to see what’s been checked and what hasn’t.

If the checkboxes all have the same name, however, then each ticked checkbox value will be sent as a comma-delimited list of values. (Unless you’re using ColdFusion Server 11 or later, in which case the default setting is to send the values as an array instead of a list.)

V/r,

^ _ ^

5

Wrong. Each ticked checkbox will be a separate key-value pair in the submitted form data. Whether the used language interprets that as a single value, a comma-separated list, or an array depends on the name of the checkboxes and how the used language interprets these submitted form data.

6

Even if the form is submitted as POST?

V/r,

^ _ ^

7

@WolfShade:

8

In this case there are no spaces. The value it should find is “extracheese”.

The code I am using is sending nothing back to the web form.

<script>
function myFunction8(){
    var topping1 = document.getElementById("topping11");
    document.getElementById("element4").value = topping1;
}
</script>

I have tried $topping1 and have tried brackets and quotes. Nothing seems to work.

9

Why, when your code clearly has a value containing a space?

<input type="checkbox" name="topping11" id = "topping11" value="extra cheeze"> Extra Cheese
10

You are absolutely right. I changed the value to “extracheeze”

So my code is:

<!DOCTYPE html>
<html>
<head>
</head>

<body>

Topping 1: <input id="element4" name="topping1" size = "20" type="text" maxlength="30" value="0"/>

<br><br> TOPPINGS ($1.50 per topping) <br>
    <input type="checkbox" name="topping11" id = "topping11" value="extracheeze"> Extra Cheese
    <input type="checkbox" name="topping12" value="pepperoni"> Pepperoni
    <input type="checkbox" name="topping13" value="mushroom"> Mushroom
    <input type="checkbox" name="topping14" value="bacon"> Bacon
    <input type="checkbox" name="topping15" value="pineapple"> Pineapple <br>

<p>Click the button to show the first topping.</p>

<button type="button" onclick="myFunction8()">Show Topping 1</button>
<script>
function myFunction8(){
    var topping1 = document.getElementById("topping11");
    document.getElementById("element4").value = topping1;
}
</script>

</body>
</html>

The return value I get back is [object HTMLInputElement] .

Mike

11

I have simplified the code that it is simply trying to read the number of pizzas and write it back into the web screen. See below.

<!DOCTYPE html>
<html>
<body>
Number of Pizzas: <input id="element2" name="npizzas" size = "2" type="text" maxlength="2" value="0"/> <br><br>
Enter Number of Pizzas:
<input id="element1" name="nopizzas1" size = "2" type="text" maxlength="2" value=""/>
<br>
Click the button to show the number of pizzas. <br>

<button type="button" onclick="myFunction8()">Show Number of Pizzas in top field</button>
<script>
function myFunction8(){
    var np = document.getElementById("element1");
    document.getElementById("element2").value = np;
}
</script>

</body>
</html>

The problem is it is unable to get the value entered in the second field and put it in the first field.
What it puts back is: [object HTMLInputElement]

Mike

12

Cf. post #2, issue 1

1 Like
13

In the very next line of your code, you see that you have to specify the value in order to set the value of the text input. So surely you must use the same to “get” the value of the other text input?

var np = document.getElementById("element1").value;

What you are getting is the entire object that refers to that input element, which contains many attributes. So as @dormilich said, you need to specify which attribute you need.

1 Like
14

Yes, it worked perfectly. Thank you so much for this.

This part was a major stumbling block that is not covered in any of the documentation.

Thank you again.

Mike

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.