I have a form with multiple checkboxes and each checkbox as an input field associated with it that'll activate once you check the checkbox.
I've got the frontend working just fine, but I was wondering how can I read in my PHP which checkboxes were checked along with their respective input fields (and some have a radio button too in addition to the input field)
Here's what each individual checkbox in my form looks like:
<!-- Option1 -->
<div class="form-row">
<div class="form-group col-md-8">
<div class="form-check">
<input class="form-check-input showman" type="checkbox" onchange="showqt()" value="Button Chicken Amritsari" id="c1">
<label class="form-check-label" for="c1">
Button Chicken Amritsari<i><br>(Boneless) Serves 2<br>INR 290</i>
</label>
</div>
</div>
<div class="form-group col-md-4" id="ifYes" style="display: none; float:right;">
<!-- <label for="qtcounter">Quantity:</label> -->
<div class="input-group" id="qtcounter">
<input type="button" value="-" class="button-minus" data-field="quantity">
<input type="number" step="1" max="" value="1" name="quantity" class="quantity-field">
<input type="button" value="+" class="button-plus" data-field="quantity">
</div>
</div>
</div>
<!-- Option 1 ends -->
I haven't wrapped my head around the PHP yet but previously to read multiple checkboxes I put them all in an array in the name field and read that array in PHP. However, that was without the added complication of each checkbox having input field.
Does anyone have any idea how to do this?
You want to use an associative array for both the inputs and the checkboxes.
<!-- Option1 -->
<div class="form-row">
<div class="form-group col-md-8">
<div class="form-check">
<input class="form-check-input showman" type="checkbox" name="items[1][chosen]" onchange="showqt()" value="Button Chicken Amritsari" id="c1">
<label class="form-check-label" for="c1">
Button Chicken Amritsari<i><br>(Boneless) Serves 2<br>INR 290</i>
</label>
</div>
</div>
<div class="form-group col-md-4" id="ifYes" style="display: none; float:right;">
<!-- <label for="qtcounter">Quantity:</label> -->
<div class="input-group" id="qtcounter">
<input type="button" value="-" class="button-minus" data-field="items[1][quantity]">
<input type="number" step="1" max="" value="1" name="items[1][quantity]" class="quantity-field">
<input type="button" value="+" class="button-plus" data-field="items[1][quantity]">
</div>
</div>
</div>
<!-- Option 1 ends -->
For option 2 use items[2][chosen] and items[2][quantity], etc.
Note that must specify the index and can't use []. Otherwise, the index of quantity will not match the chosen item.
In php you can loop through the items and ignore the items that aren't chosen.
foreach ($_POST['items'] as $item) {
if (!isset($item['chosen'])) continue; // Skip items that aren't chosen.
echo $item['quantity'] . ' ' . $item['chosen'] . "\n";
}
I have 4 multiple check boxes which each one of them is specifically correspondent to 4 text-boxes. I need to enable the disabled texbox when the corresponding checkbox is checked. I wrote a same function for each checkbox's onclick event in html tag itself as onclick="document.getElementById('txtLrgPrc').disabled=!this.checked;" .
But I need to automate this by calling a function only once by sending the parameters of textboxes and heckboxes(i.e. id or name,,) to my js file using jQuery. Can anyone help me for refining this please?
Here is the code which I am currently using and it works finely.
jsp page:
<div class="row item-tbl-row" id="addItmChkbxReg">
<div class="col-xs-5">
<label class="checkbox-inline">
<form:checkbox value="regular" class="checkbox sizechkbx" path="size" label="Regular" id="chkReg" onclick="document.getElementById('txtRegPrc').disabled=!this.checked;"/>
</label>
</div>
<div class="col-xs-7">
<form:input type="text" class="form-control price" path="price" id="txtRegPrc" disabled="true"/>
</div>
</div>
<div class="row item-tbl-row" id="addItmChkbxMed">
<div class="col-xs-5">
<label class="checkbox-inline">
<form:checkbox value="medium" class="checkbox sizechkbx" path="size" label="Medium" onclick="document.getElementById('txtMedPrc').disabled=!this.checked;"/>
</label>
</div>
<div class="col-xs-7">
<form:input type="text" class="form-control price" path="price" id="txtMedPrc" disabled="true"/>
</div>
</div>
<div class="row item-tbl-row" id="addItmChkbxLrg">
<div class="col-xs-5">
<label class="checkbox-inline">
<form:checkbox value="large" class="checkbox sizechkbx" path="size" label="Large" onclick="document.getElementById('txtLrgPrc').disabled=!this.checked;"/>
</label>
</div>
<div class="col-xs-7">
<form:input type="text" class="form-control price" path="price" id="txtLrgPrc" disabled="true"/>
</div>
</div>
You can automate like the following.
<script type="text/javascript">
$(document).ready(function () {
$(".checkbox").click(function () {
$(this).parent().parent().next().find(".form-control").prop("disabled", !$(this).prop("checked"));
});
});
</script>
Also, remove the click event of the checkboxes.
Another solution:
<script type="text/javascript">
function C(t, textBoxId) {
$("#" + textBoxId).prop("disabled", !$(t).prop("checked"));
}
</script>
<form:checkbox value="regular" id="chkReg" onclick="C(this, 'txtRegPrc')"/>
I have form with input fields, radio buttons, and select boxes.
How I can show all inputted data on another page or on modal window of this page?
For radio boxes, I want to show text inside getWord, but the form has 2 languages.
<div class="form-group">
<div class="col-sm-offset-1">
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" class="radiobox" name="newpat" ng-model="isNewpat" value="true"><span>{{getWord('New')}}</span></label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" class="radiobox" name="existpat" ng-model="isNewpat" value="false"><span>{{getWord('Exist')}}</span></label>
</div>
</div>
</div>
I also want to be able to see the information inputted in input fields and chosen datepicker.
For example, I used this, but it did not work:
<div class="modalwindow text-center">
<h1>{{getWord.appoitmentmessage}}</h1>
<p>{{message}}</p>
<div>{{user.name}}</div>
<div>{{user.email}}</div>
</div>
As much I understand your question. I think this will work for you. If you want to show value of radio-box selection in modal. Please elaborate more so in can help further
Change this
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" class="radiobox" name="newpat" ng-model="isNewpat" value="New"><span>New</span></label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" class="radiobox" name="existpat" ng-model="isNewpat" value="Exist"><span>Exist</span></label>
</div>
And this Also
<div class="modalwindow text-center">
<h1>{{isNewpat}}</h1>
<p>{{message}}</p>
<div>{{user.name}}</div>
<div>{{user.email}}</div>
</div>
I am using the below code to check my checkbox in handlebars.
<fieldset>
<div class="control-group">
<div class="control-label">{{#t "display_creators_name"}}Display Creator's name{{/t}}</div>
<div class="controls">
<label class="checkbox" for="creators_name">
{{checkbox "creators_name"
checked=creators_name}}
{{#t "allow_creators_name"}}{{/t}}
</label>
</div>
</div>
</fieldset>
But the checkbox is not checked.
Can someone please help me for the same.
I am trying to hide and/or show form elements when a user selects certain values.
For example, if the user selects "yes" to the consent question, I need it to show a few questions, However, if they change their response to the consent question, I need it to hide those questions.
Here is what I have come up with so far...
$(document).ready(function () {
var input = document.getElementById('consent');
var consent_responses = [{ "0": hideConsent },{ "1": showConsent }];
input.addEventListner('click', function () {
var consent_response;
if (consent_responses[this.value]) {
content_response = consent_responses[this.Function()]
}
else {
content_response = consent_responses[this.Function]
}
});
function showConsent(){
$("#date").show(),
$("#referrer").show(),
$("#f_name").show(),
$("#phone_num").show(),
$("#leave_msg").show(),
$("#email").show(),
};
function hideConsent(){
$("#date").hide(),
$("#referrer").hide(),
$("#f_name").hide(),
$("#phone_num").hide(),
$("#leave_msg").hide(),
$("#email").hide(),
}; });
Fiddle here: http://jsfiddle.net/7jX47/1/
You could do it like this: JSFiddle
Basically I only fixed a few typos (did you actually try your code before you posted here?) and added event listeners to the radio buttons with
document.getElementById(...).addEventListener(...)
I also gave your radio buttons unique IDs.
This can be simplified:
var input = document.getElementById('consent');
// Let's use the value as key, and the functions as values
var consent_responses = {
"0" : hideConsent,
"1" : showConsent
};
input.addEventListener("click", function () {
// Get the appropriate function given the value, and invoke it
consent_responses[this.value]();
});
function hideConsent() {
// ...
}
function showConsent() {
// ...
}
It's better to envelop your questions (that needs to be hidden) by a div with a class ".hidden" or style "display: none;". And simplify your code by simply asking that div to show() or hide() when needed.
Like so:
<form id="screening">
<div class="col-md-12 col-sm-12 col-xs-12 nopad" id="create">
<div class="form-group text-center">
<b>Do you agree to answer the screening questions?</b><br />
<div class="radio" id="consent">
<label>
<input type="radio" name="consent" id="consent" value="1">
Yes, I consent
</label>
</div><br />
<div class="radio">
<label>
<input type="radio" name="consent" id="consent" value="0">
No, I do not consent
</label>
</div>
</div>
<!-- simplify by using this -->
<div id="questions" style="display: none;">
<div class="form-group" id="date">
<label for="date">What is today's date?</label>
<input type="date" class="form-control" id="date" name="date" />
</div>
<div class="form-group" id="referrer">
<label for="referrer">How did you hear about us/our studies?</label>
<select class="form-control" name="referrer" id="referrer">
<option></option>
<option value="1">Flyers</option>
<option value="2">Print Media</option>
<option value="3">A friend</option>
<option value="4">Online (e.g., Craigslist)</option>
<option value="5">Other</option>
</select>
</div>
<div class="form-group" id="other_explain">
<label for="other_explain">Please specify other source.</label>
<textarea class="form-control" rows="3" id="other_explain" name="other_explain"></textarea>
</div>
<div class="form-group" id="f_name">
<label for="f_name">What is your first name?</label>
<input type="text" class="form-control" id="f_name" name="f_name" />
</div>
<div class="form-group" id="phone_num">
<label for="phone_num">What is a phone number at which you can be contacted? </label>
<input type="tel" class="form-control" id="phone_num" name="phone_num" />
</div>
<div class="form-group" id="leave_msg">
<label for="leave_msg">If we call and you are not available, may we leave a message?</label><br />
<div class="radio">
<label>
<input type="radio" name="leave_msg" id="leave_msg" value="1">
Yes
</label>
</div><br />
<div class="radio">
<label>
<input type="radio" name="leave_msg" id="leave_msg" value="0">
No
</label>
</div>
</div>
<div class="form-group" id="email">
<label for="email">What is an e-mail at which you can be contacted?</label>
<input type="email" class="form-control" id="email" name="email" />
</div>
</div>
</div>
</form>
and in your javascript instead of using this:
function showConsent(){
$("#date").show(),
$("#referrer").show(),
$("#f_name").show(),
$("#phone_num").show(),
$("#leave_msg").show(),
$("#email").show(),
};
you use:
function showConsent(){
$("#questions").show(),
};