Checkboxes and text output

degn · January 27, 2018

I need help with code for a combined text box output.

A. Input: The user should choose among different checkbox options.

B. Output: The selected text strings should go collectively to an updated text box.

C. Transfer: By clicking a button the content of the text box should copy to memory for later insertion in other software.

Any suggestions?

requinix · January 27, 2018

Is this using PHP (you click a button to submit the form containing the checkboxes and the page reloads with the textbox filled in) or using Javascript (the textbox updates as you select checkboxes)?

And what have you done with it so far?

ginerjm · January 27, 2018

Assuming that this is a php question since it is a php forum, how about this?

You send out a form with the checkboxes and instructions. The user selects the boxes he/she wants and hits the 'Choose' submit button (an input tag). Your php script retrieves the checkbox values from the POST array and places them all in some other input text box or textarea box and sends back a new form with a 'Save Choices' submit button. And perhaps a 'Go Back' button to allow the user to make changes using the original form again. When the user clicks on the Save Choices button your script now sees that and grabs the text box input and does whatever you want it to do.

Kind of a screwy way to process the data IMHO. You begin with distinct separate items of data, join them together into one element of data and then re-retrieve the whole thing as one piece of data. Now you have to separate them out again, no? Plus - is the textbox with the concatenated items a readonly box or are you going to allow the user to alter your pre-defined values from the checkboxes and thus screw up what your final inut looks like?

degn · January 27, 2018

Hello, thank you for the help so far!

requinix: for now I have these lines - they seem to update when the user makes a selecton:

error_reporting(E_ALL);
        ini_set('display_errors', '1');

<!doctype html>
<html><head><meta charset="UTF-8"><title>TEST</title></head><body>

<p>A: Checkbox input:</p>

America <input type="checkbox" id="America"  onclick="myFunction()"><p id="text" style="display:none">America.</p><script>function myFunction() {var checkBox = document.getElementById("America");var text = document.getElementById("text");if (checkBox.checked == true){text.style.display = "block";} else {text.style.display = "none";}}</script>


</body>
</html>

ginerjm: after some of the data have been joined they will not be separated again, a read-only box is fine

Regards Dan

requinix · January 27, 2018

You say it seems to work? Are you having a problem with it, or what do you want to change?

degn · January 28, 2018

I am only at beginners level regarding PHP/Java. It's only working for one checkbox, I get problems when the code is multiplied for several checkboxes (A). I don't get the outputbox (B) nor the button © and I don't know how to programme this myself. This is why I ask for help in this forum.

ginerjm · January 28, 2018

Your sample code is not correct firstly. You have to be in PHP mode to issue php commands (such as error settings) and then leave php mode (or use the 'echo' or 'heredocs' commands) to issue the html/js/css code.

You should practice writing your code lines ONE AT A TIME. That means put separate statements on separate lines to make it easy for you and for US to read.

Have you tried doing any real learning by reading anything?

degn · January 29, 2018

Well, so far I have this code:

 error_reporting(E_ALL);
        ini_set('display_errors', '1');

<!doctype html>
<html><head><meta charset="UTF-8"><title>Country</title></head><body>

<script>function changeText(){
var userInputname = document.getElementById('name').value;
var userInputcolor = Array.prototype.slice.call(document.querySelectorAll(".color:checked")).map(function(el) {
        return el.value;
    }).join(', ')

document.getElementById('output1').innerHTML = userInputname;
document.getElementById('output2').innerHTML = userInputcolor;
return false;
}
</script>

<form method="get" onsubmit="return changeText()">        
<input type="text" name="name" id="name" />        
<br /><br />
<input type="checkbox" name="color" class="color" value="America">America
<input type="checkbox" name="color" class="color" value="Burma">Burma
<input type="checkbox" name="color" class="color" value="China">China
<input type="checkbox" name="color" class="color" value="Denmark">Denmark
<input type="checkbox" name="color" class="color" value="England">England
<input type="checkbox" name="color" class="color" value="France">France

<br /><br />
<input type="submit" value="Output" />
<br /><br />
<b id='output1'></b><br />
<b id='output2'></b><br />

</body>
</html>

But with no box, well I can live with that.

But does anyone here know how to direct the output to both screen and memory?

requinix · January 29, 2018

What do you mean "output to memory"?

ginerjm · January 30, 2018

Your code is STILL wrong looking.

dodgeitorelse3 · January 30, 2018

Your error reporting will do nothing. First it has to be inside php tags. And then I don't think it will help you because I see no php code in your posted code. As for the memory thing are you talking about sessions?

degn · January 31, 2018

Output to memory ........ equals to make a copy with [Ctrl]+[C]. The code is working fine, although I didn't get all what I wanted.

Barand · January 31, 2018

http://lmgtfy.com/?q=javascript+copy+to+clipboard

gizmola · February 1, 2018

Hi Degn,

First off, it's great to see you actively improving as a developer. Although you are not currently doing serverside form processing with php, I want to save you some time, assuming you get to that point. Let's look at your markup:

<input type="checkbox" name="color" class="color" value="America">America
<input type="checkbox" name="color" class="color" value="Burma">Burma
<input type="checkbox" name="color" class="color" value="China">China
<input type="checkbox" name="color" class="color" value="Denmark">Denmark
<input type="checkbox" name="color" class="color" value="England">England
<input type="checkbox" name="color" class="color" value="France">France

So, I'm not sure if this was just a posting mistake, but this is invalid markup because you have not closed your input tags. Let's fix:

<input type="checkbox" name="color" class="color" value="America">America</input>
<input type="checkbox" name="color" class="color" value="Burma">Burma</input>
<input type="checkbox" name="color" class="color" value="China">China</input>
<input type="checkbox" name="color" class="color" value="Denmark">Denmark</input>
<input type="checkbox" name="color" class="color" value="England">England</input>
<input type="checkbox" name="color" class="color" value="France">France</input>

Now if we assume you posted this to a PHP script, what would happen if you checked 2 items?

PHP makes your post data available in the $_POST superglobal array. However, what you would find is that you only would get one value.

In order to make PHP work with multiple input checkboxes, you need to add a brackets to the name:

<input type="checkbox" name="color[]" class="color" value="America">America</input>
<input type="checkbox" name="color[]" class="color" value="Burma">Burma</input>
<input type="checkbox" name="color[]" class="color" value="China">China</input>
<input type="checkbox" name="color[]" class="color" value="Denmark">Denmark</input>
<input type="checkbox" name="color[]" class="color" value="England">England</input>
<input type="checkbox" name="color[]" class="color" value="France">France</input>

At that point in your $_POST, you would find that the 'color' element is an array.

var_dump($_POST['color'];

// would be an array with the values being each value= from the specific checkbox.

One last thing to note about checkboxes. If there is no item checked, there will NOT be an item in the $_POST at all. Typically you need to check for that before investigating the values:

if (isset($_POST['color']) {
    // Process
} else {
  // NO checkboxes were checked, set a default perhaps?
}

ginerjm · February 1, 2018

Hmmm... I've never known that you had to use a </input> tag for a checkbox. I certainly haven't to date.

Barand · February 1, 2018

I too was always under the impression that <input>, like <img> and <br>, were among those tags that didn't have a corresponding closing tag. I must have missed a memo somewhere.

ginerjm · February 2, 2018

I do see however that a </input> tag is pertinent to XHTML....

But - if it's better html that we are seeking, the OP could use a <label> tag for those checkbox literals...

<label>
<input......>
abcde
</label>

cyberRobot · February 2, 2018

I do see however that a </input> tag is pertinent to XHTML....

Wouldn't you use a self-closing tag? For example:

<label><input type="checkbox" name="color" class="color" value="America" />America</label>

Granted, I haven't tried validating a page that uses </input>...so maybe it works.

And, yes, thanks for suggesting the <label> tag. I wish more forms used it. It's so much nicer being able to click the label to check the box. :happy-04:

Sign In

Checkboxes and text output

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived

Important Information