Add Multiple Choice Questions to PHP Web Form - php

I have a standard PHP web form with text fields, dropdowns, and radio buttons. When the form is submitted, the submitted information is e-mailed to me. I want to add a multiple choice question with checkboxes. I can produce the form field, but I can't figure out how to include multiple selections for that one question on the e-mail that gets sent when the form is submitted. Ideally, I would like to have the multiple selections on one line and separated by semi-colons (or commas if that's easier)
I've included what I think are the relevant parts of the code. Apologies if I didn't format this post correctly.
<form action="example.php" method="post" autocomplete="off">
<div class="form-row">
<label for="first">
<span>First Name:</span>
<input type="text" id="first" name="first" autocomplete="off" list="autocompleteOff">
</label>
</div>
<div class="form-row">
<label for="last">
<span>Last Name:</span>
<input type="text" id="last" name="last" autocomplete="off" list="autocompleteOff">
</label>
</div>
<div class="form-row">
<label for="email">
<span>E-mail:</span>
<input type="text" id="email" name="email" autocomplete="off" list="autocompleteOff">
</label>
</div>
<div class="form-row-multiple">
<label for="multiple">
<span>Choose all that apply:</span><br>
<input type="checkbox" name="multiple" id="multiple" value="Option 1"><span>Option 1</span>
<input type="checkbox" name="multiple" id="multiple" value="Option 2"><span>Option 2</span>
<input type="checkbox" name="multiple" id="multiple" value="Option 3"><span>Option 3</span>
<input type="checkbox" name="multiple" id="multiple" value="Option 4"><span>Option 4</span> </label>
</div>
<div class="form-row">
<button type="submit" name="submit" id="submit"><b>Submit</b></button>
</div>
</form>
<?php
$first = remove_headers($_POST['first']);
$last = remove_headers($_POST['last']);
$email = remove_headers($_POST['email']);
$multiple = remove_headers($_POST['multiple']);
$message =
"First: $first\n\n" .
"Last: $last\n\n"
"E-mail: $email\n\n"
"Multiple: $multiple\n\n"

Two things to do here,
For multiple checkboxes use the name attribute as an array and remove the id attribute, as an HTML page should have a unique ID throughout.
<input type="checkbox" name="multiple[]" value="Option 1"><span>Option 1</span>
<input type="checkbox" name="multiple[]" value="Option 2"><span>Option 2</span>
<input type="checkbox" name="multiple[]" value="Option 3"><span>Option 3</span>
<input type="checkbox" name="multiple[]" value="Option 4"><span>Option 4</span>
When the form is submitted, multi-valued checkboxes are received as an array. So, we can make it semicolon-separated using the implode() function.
$multiple = implode(';', $_POST['multiple']);

Related

HTML form doesn't work even though I added names

I am making a form in HTML and I came across this error:
<form action="/Profile/new/poll/posted" method="post">
<input class="hover-edit h2 hor-center" id="title" title="Poll's title ('New Poll' is not allowed)" value="New Poll" style="position: relative;text-align: center;width:95%;margin-top:2%;">
<hr>
<p><label for="opt1">Option 1</label> <input type="radio" disabled class="option"><input type="text" class="hover-edit" style="margin-top:1%;margin-bottom:1%;" name="opt1" id="opt1" value="Option 1"> <button type="button">Disable</button></button></p>
<p><label for="opt2">Option 2</label> <input type="radio" disabled class="option"><input type="text" class="hover-edit" style="margin-top:1%;margin-bottom:1%;" name="opt2" id="opt2" value="Option 2"> <button type="button">Disable</button></button></p>
<p><label for="opt3">Option 3</label> <input type="radio" disabled class="option"><input type="text" class="hover-edit" style="margin-top:1%;margin-bottom:1%;" name="opt3" id="opt3" value="Option 3"> <button type="button">Disable</button></button></p>
<p><label for="opt4">Option 4</label> <input type="radio" disabled class="option"><input type="text" class="hover-edit" style="margin-top:1%;margin-bottom:1%;" name="opt4" id="opt4" value="Option 4"> <button type="button">Disable</button></button></p>
<p><label for="opt5">Option 5</label> <input type="radio" disabled class="option"><input type="text" class="hover-edit" style="margin-top:1%;margin-bottom:1%;" name="opt5" id="opt5" value="Option 5"> <button type="button">Disable</button></button></p>
<button type="submit" class="signupbtn" style="margin:2%;width:96%;">Post</button>
</form>
The code above has a form, some labels, and some text inputs with names. However, on the action page, none of them was defined. I tried looking at the $_POST but still nothing. More specifically, I used:
$opt1 = $_POST["opt1"];
$opt2 = $_POST["opt2"];
$opt3 = $_POST["opt3"];
$opt4 = $_POST["opt4"];
$opt5 = $_POST["opt5"];
echo $opt1;
echo $opt2;
echo $opt3;
echo $opt4;
echo $opt5;
But PHP returned a warning for each one of the lines in my code.
Disabled input elements in a form will never be submitted. as #delboy1978uk pointed out https://www.w3schools.com/tags/att_input_disabled.asp
so instead of
<p><label for="opt1">Option 1</label> <input type="radio" disabled class="option"><input type="text" class="hover-edit" style="margin-top:1%;margin-bottom:1%;" name="opt1" id="opt1" value="Option 1"> <button type="button">Disable</button></button></p>
write
<p><label for="opt1">Option 1</label> <input type="radio" class="option hover-edit" style="margin-top:1%;margin-bottom:1%;" name="opt1" id="opt1" value="Option 1"/></p>
By the way I'm not sure I understand your code you have label then input(radio) then input(text) then button then a closing button tag.
If you open a tag with input you close with input <input type="button"></input> and if button you close with button <button></button> don't mix the two tags, it is not the same.

How to add validation for checkboxes in JQuery?

I have a form like below and I want to add vaidation for JQuery, I tried using html required attribute but it is not working, help me in this
The code is
//question 1
<label class="container">
<input class="chk check_answer1" type="checkbox" name="answers[]" value='1' required="required">
<span class="checkmark"></span>
</label>
<label class="container">
<input class="chk check_answer1" type="checkbox" name="answers[]" value='1' required="required">
<span class="checkmark"></span>
</label><label class="container">
<input class="chk check_answer1" type="checkbox" name="answers[]" value='1' required="required">
<span class="checkmark"></span>
</label>
//question 2
<label class="container">
<input class="chk check_answer2" type="checkbox" name="answers[]" value='2' required="required">
<span class="checkmark"></span>
</label>
<label class="container">
<input class="chk check_answer2" type="checkbox" name="answers[]" value='2' required="required">
<span class="checkmark"></span>
</label><label class="container">
<input class="chk check_answer2" type="checkbox" name="answers[]" value='2' required="required">
<span class="checkmark"></span>
</label>
//question 3
<label class="container">
<input class="chk check_answer3" type="checkbox" name="answers[]" value='3' required="required">
<span class="checkmark"></span>
</label>
<label class="container">
<input class="chk check_answer3" type="checkbox" name="answers[]" value='3' required="required">
<span class="checkmark"></span>
</label><label class="container">
<input class="chk check_answer3" type="checkbox" name="answers[]" value='3' required="required">
<span class="checkmark"></span>
</label>
This is the code and In this page the user has to select atleast one option for every question
First you need to name the grouped inputs that are alike the same name in your HTML.
Use .on(change function() then locate the input (element) you're using, $(this) and get its name.
Then we write a conditional to see if it is checked, if so remove any other instances of a check from that <input> names group.
EDIT: Function on each input to check the onchange and then if all instances of your inputs has one checked element we change the disabled attribute to false, unlocking the submit button.
You can add display messages if you like and css to the Jquery code by adding an empty <div id="msg"></div> where you want to display info, then call on the value of that div to place text there depending on the message you wish to convey.
//--> Remove the code below if you do want the user to only select one option per
//--> group and it is okay for them to select multiple options per group...
$(':checkbox').on('change', function() {
var th = $(this),
name = th.prop('name');
if (th.is(':checked')) {
th.attr('checked', 'checked');
$(':checkbox[name="' + name + '"]').not($(this)).prop('checked', false);
}
});
//--> This handles the locking of the submit button
function checkChecked(divId) {
var oneOfEachChecked = false;
$('#' + divId + ' input[type="checkbox"]').each(function() {
if ($(".check_answer1").is(":checked") && $(".check_answer2").is(":checked") && $(".check_answer3").is(":checked")) {
oneOfEachChecked = true;
$('#submit').prop('disabled', false);
$('#mash').show().text(' <--- Mash me now, I am unlocked!').css('background', 'lightgreen');
}
});
if (oneOfEachChecked === false) {
$('#submit').prop('disabled', true);
$('#mash').show().text(' X Sorry no go! X').css('background', '#FA3300');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<div class="divs" id="check_answer1">
//question 1
<label class="container"></label>
<input class="chk check_answer1" onchange="checkChecked('check_answer1')" type="checkbox" name="check_answer1" value="1">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer1" onchange="checkChecked('check_answer1')" type="checkbox" name="check_answer1" value="1">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer1" onchange="checkChecked('check_answer1')" type="checkbox" name="check_answer1" value="1">
<span class="checkmark"></span>
</div>
<div class="divs" id="check_answer2">
//question 2
<label class="container"></label>
<input class="chk check_answer2" onchange="checkChecked('check_answer2')" type="checkbox" name="check_answer2" value="2">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer2" onchange="checkChecked('check_answer2')" type="checkbox" name="check_answer2" value="2">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer2" onchange="checkChecked('check_answer2')" type="checkbox" name="check_answer2" value="2">
<span class="checkmark"></span>
</div>
<div class="divs" id="check_answer3">
//question 3
<label class="container"></label>
<input class="chk check_answer3" onchange="checkChecked('check_answer3')" type="checkbox" name="check_answer3" value="3">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer3" onchange="checkChecked('check_answer3')" type="checkbox" name="check_answer3" value="3">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer3" onchange="checkChecked('check_answer3')" type="checkbox" name="check_answer3" value="3">
<span class="checkmark"></span>
</div>
<input id="submit" type="submit" name="submit" value="submit" disabled><span id="mash"></span>
</form>

PHP - Getting Multiple Radio Buttons Values from From Submission

I am a newbie in PHP. I have a form like below:
<div class="col-xs-2 col-xs-offset-1">
<input id="radio-ge-1" class="radio-custom" name="radio-ge" type="radio" value="1" checked>
<label for="radio-ge-1" class="radio-custom-label tooltips">1 <span>Impossible to get marks</span></label>
</div>
<div class="col-xs-2">
<input id="radio-ge-2" class="radio-custom" name="radio-ge" value="2" type="radio">
<label for="radio-ge-2" class="radio-custom-label tooltips">2 <span>You have to work hard to get marks</span></label>
</div>
<div class="col-xs-2">
<input id="radio-ge-3" class="radio-custom" name="radio-ge" value="3" type="radio">
<label for="radio-ge-3" class="radio-custom-label tooltips">3 <span>The usual, just like any other class</span></label>
</div>
<div class="col-xs-2 col-xs-offset-1">
<input id="radio-sl-1" class="radio-custom" name="radio-sl" value="1" type="radio" checked>
<label for="radio-sl-1" class="radio-custom-label tooltips">1 <span>Unbearable pressure</span></label>
</div>
<div class="col-xs-2">
<input id="radio-sl-2" class="radio-custom" name="radio-sl" value="2" type="radio">
<label for="radio-sl-2" class="radio-custom-label tooltips">2 <span>High pressure, But doable</span></label>
</div>
<div class="col-xs-2">
<input id="radio-sl-3" class="radio-custom" name="radio-sl" value="3" type="radio">
<label for="radio-sl-3" class="radio-custom-label tooltips">3 <span>Fair, just like any other class</span></label>
</div>
I'm trying to save both radio buttons value in PHP by using the code:
$g_Easiness = $_POST['radio-ge'];
$s_Load = $_POST['radio-sl'];
But in this case, I'me only getting the first button's value. Second button's value = on.
I have spend more than two hours to figure it out. But cannot resolve it. Can anyone please help me to solve the problem?
Please use below code for radio buttons
if input type="radio" then it should give value="" otherwise in value it will show "on"
e.g.
<input id="radio-must" class="radio-custom" name="radio-nns" value="absolutely" type="radio" checked>
output = [radio-nns] => on
instead put ( you can see value="1")
<input id="radio-must" class="radio-custom" name="radio-nns" value="absolutely" type="radio" checked value="1">
output = [radio-nns] =>1

html form-- need help having new input area populate if radio button is clicked

I am making a basic new customer database with mysql and php. I would like when people click on the radio button"different mailing address" for another couple of input fields to appear for the mailing address. Im not quite sure how to handle this with inputs and not variables. Is there a way to do an if statement here is my html form code below
<form method="POST" action="insert.php">
<fieldset>
<legend>New Customer data</legend>
<label>Complete Below</label>
<div class="controls controls-row">
<input class="span4" name="firstname" type="text" placeholder="First name">
<input class="span3" name="lastname" type="text" placeholder="Last Name">
<input class="span3" name="phone" type="text" placeholder="Phone">
</div>
<div class="controls controls-row">
<input class="span4" name="address" type="text" placeholder="Address">
<input class="span2" name="city" type="text" placeholder="City">
<input class="span1" name="state" type="text" placeholder="State">
</div>
<div class="controls controls-row">
<input class="span4" name="zip" type="text" placeholder="Zip Code">
<input class="span2" name="email" type="text" placeholder="Email">
<input class="span2" name="ccemail" type="text" placeholder="cc email">
</div>
<span class="help-block">When is the customers due date monthly</span>
<label class="radio">
<input type="radio" name="duedate" id="optionsRadios1" value="1" checked>
1st of the month</label>
<label class="radio">
<input type="radio" name="duedate" id="optionsRadios2" value="15">
15th of the month
</label>
<span class="help-block">Mailing address</span>
<label class="radio">
<input type="radio" name="mailingaddress" id="optionsRadios3" value="1" checked>
Check if mailing address is the same as the service address
</label>
<label class="radio">
<input type="radio" name="mailingaddress" id="optionsRadios4" value="0">
Check if mailing address is different
</label>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Using jQuery, have two inputs that are initially hidden. Once the user checks the box, '$.show()' on those two inputs. Id have a div containing two inputs, and just show or hide the div depending on whether the box is checked or not
you can try this.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" >
</script>
<script>
$(document).ready(function(){
$("#checkme").on('change',function(){
if($("#checkme").is(":checked")){
$("input#myemail").fadeIn();
}else{
$("input#myemail").fadeOut();
}
});
});
</script>
</head>
<body>
show: <input type="checkbox" id="checkme" /><br />
<input type="text" id="myemail" hidden />
</body>
</html>

html5 form not reacting to submit

I've got a simple one-page form, the kind I've written dozens of times, but this behavior is totally new to me. At first, it was submitting on page-load, thus redirecting automatically to the next page in the series. I'm still not sure how I got that to stop, but now it's not doing anything at all when you hit "submit". The page simply sits there.
I've tried stripping out the error-checking scripts, the show/hide script, even jquery itself, then taking the form down to just one input. I tried getting rid of the redirect and just having it output a simple line, then vardump, and still nothing. I hit submit, and no matter what I do, the page just sits there. I've never run into behavior like this before, and firebug et al give me no errors or leads.
If anyone has any ideas at all, no matter how crazy, I'm willing to try. I'm at a loss. Thanks in advance!
<?php
session_start();
include('functions.php');
if ($_POST['submit']) {
$company = $_POST['company'];
$taxid = $_POST['taxid'];
header("location:step2.php");
}
include('head.php'); ?>
<form method="post" name="basic" action="step1.php">
<div class="col70">
<label for="company">Organization/Business name <img src="img/req.jpg" alt="required"></label>
<input type="text" name="company" id="company" value="" />
</div>
<div class="col30">
<label for="taxid">Taxpayer ID# (IEN or SS#) <img src="img/req.jpg" alt="required"></label>
<input type="text" name="taxid" id="taxid" value="" />
</div>
<div class="newcol">
<label for="address">Mailing Address <img src="img/req.jpg" alt="required"></label>
<input type="text" name="address" id="address" value="" />
</div>
<div class="col30 newcol">
<label for="city">City <img src="img/req.jpg" alt="required"></label>
<input type="text" name="city" id="city" value="" />
</div>
<div class="col30">
<label for="state">State <img src="img/req.jpg" alt="required"></label>
<select name="state" id="state" tabindex="<?php echo $tabin; $tabin++; ?>">
<option value="0"></option>
<option value="1">Alabama</option>
</select>
</div>
<div class="col25">
<label for="zipcode">Zip Code <img src="img/req.jpg" alt="required"></label>
<input type="text" name="zipcode" id="zipcode" value="" />
</div>
<fieldset><legend>1. What kind of group/company do you have? <img src="img/req.jpg" alt="required"></legend>
<span id="nfpfp" class="InputGroup">
<label><input name="nfpfp" id="nfpfp_1" type="radio" value="1" />For-profit business.</label>
<label><input name="nfpfp" id="nfpfp_2" type="radio" value="2" />Non-profit 501(c)3 organization.</label>
</span>
</fieldset>
<fieldset><legend>2. How will you use the booth space? Select all that apply. <img src="img/req.jpg" alt="required"></legend>
<span id="type" class="InputGroup">
<label><input name="food" id="type_1" type="checkbox" value="1" />Food sales</label>
<label><input name="retail" id="type_2" type="checkbox" value="2" />Retail sales</label>
<label><input name="activity" id="type_3" type="checkbox" value="3" />Activity</label>
<label><input name="display" id="type_4" type="checkbox" value="4" />Display</label>
<label><input name="other" id="type_5" type="checkbox" value="5" />Other</label>
</span>
</fieldset>
<label for="otherdetails" class="newcol offsides">Enter a short description of your use. (Ex: "BBQ sandwiches", "kite kits", "face painting".) <img src="img/req.jpg" alt="required"></label>
<input type="text" name="otherdetails" id="otherdetails" value="" />
<fieldset><legend>3. Select any/all that apply. Additional questions may appear, if further information is required.</legend>
<span id="additional" class="InputGroup">
<label><input name="raffle" id="raffle_1" type="checkbox" class="switchcheck1" value="1" />I'll be selling raffle tickets and/or holding a raffle at the festival.</label>
<div class="newcol offstate1">
<label for="raffledetails">You'll need written permission from the Exchange Club. Please enter details about the raffle. <img src="img/req.jpg" alt="required"></label>
<textarea name="raffledetails" id="raffledetails" tabindex="<?php echo $tabin; $tabin++; ?>"></textarea>
</div>
<label><input name="trailer" type="checkbox" id="trailer_1" value="1">I'll be bringing a trailer.</label>
<label><input name="outlets" type="checkbox" id="outlets_1" class="switchcheck2" value="1" />I'll require electrical outlets.</label>
<div class="newcol offstate2">
<label for="outletsdetails">How many outlets will you require? <img src="img/req.jpg" alt="required"></label>
<input type="text" name="outletsdetails" id="outletsdetails" />
</div>
</span>
</fieldset>
<input type="button" name="submit" class="a_button" value="submit" />
</form>
The element with name="submit" is of type button and not submit, so it renders a plain button that does nothing (with the intention that you bind some JavaScript to it).
Use type="submit" instead.
Try
<input type="submit" name="submit" class="a_button" value="submit" />
for your submit button.

Categories