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>
Related
I have 2 radio buttons, When I click on the option A, a particular div has to be shown, and when click on the option B, 1st div should be hidden and 2nd div should be shown. Below is the code.
<div class="form-group">
<input type="radio" name="test-radio" id="test-radio-Option-A" value="true" data-bind="click: test">
<label for="test-radio-Option-A">Text Message</label>
</div>
<div class="form-group">
<input type="radio" name="test-radio" id="test-radio-Option-B" value="false">
<label for="test-radio-Option-B">Text Message</label>
</div>
<div style="display: none" data-bind="visible: showDiv">
test Div
</div>
Following is the script I tried:(coffee script)
#showPhone = ko.observable false
test: =>
#showPhone true
using this if I click on the 1st radio button, I was able to see the div, but I don't know if its the right way Can someone please guide me through this?
Thanks.
You'll be needing the two following bindings:
checked: to put on your radio-buttons
visible: to put on your divs you want to display
your html will look like this:
<div class="form-group">
<input type="radio" name="test-radio" id="test-radio-Option-A" value="true" data-bind="checked: optionA">
<label for="test-radio-Option-A">Text Message</label>
</div>
<div class="form-group">
<input type="radio" name="test-radio" id="test-radio-Option-B" value="false" data-bind="checked: optionB">
<label for="test-radio-Option-B">Text Message</label>
</div>
<div data-bind="visible: optionA">
test Div A
</div>
<div data-bind="visible: optionB">
test Div B
</div>
Your viewModel will need 2 boolean observables optionA and optionB for the view to bind to in this manner
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 a registration form that checks to see if he/she is a customer of ours. If the user selects yes, then two fields are displayed (customer number and zipcode). However, if the user selects no, i want the form to just send and go to the next page.
As it works right now, when the user selects no, the form errors out when trying to submit because the customer number + and zipcode is left blank.
What is the best approach to redirect a form on radio button selection? Or is it possible to pre-fill the customer number + zipcdoe fields if the user selects no? Is there a workable way to redirect this?
My radio button code:
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck" onChange="OnChangeForm" value="epc">
JSFiddle: https://jsfiddle.net/7ycha0ge/
Youre not being very specific with your case, however i belive theres 3 posibilities:
is that you are validating the filling of the fields in javascript and not taking in consideration that your inputs are hidden, in wich case you should revisit your code and only throw error if the field is visible or add/remove completly the fields from the HTML based on the choice of the radio.
Your server side code is always expectng the parameters to have your unfilled data filled and it throws error on that.
Consider use the form like this (with novalidate attribute):
< form novalidate>< /form>
this way youll not be tight to the browser validation, but you have to validate by yourself
EDIT: attached live examples of add and remove elements
function yesnoCheck(resp) {
var yes = '<div class="form-group">'+
'<label for="account" class="col-sm-3 control-label">Account Number</label>'+
'<div class="col-sm-9">'+
'<input type="text" class="form-control" id="account" name="account" placeholder="Enter Account Number">'+
'</div>'+
'</div>'+
'<div class="form-group">'+
'<label for="lastname" class="col-sm-3 control-label">Zip Code</label>'+
'<div class="col-sm-9">'+
'<input type="text" class="form-control" id="zip" name="zip" placeholder="Enter Zip Code">'+
'</div>'+
'</div>';
if(resp == 'yes') {
$('#ifYes').append(yes);
} else {
$('#ifYes').html('');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="section section-breadcrumbs">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Register</h1>
</div>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="panel panel-default">
<div class="panel-body">
<h2>Online Training Access</h2>
<p><em>We need to verify if you are a retailer first. Please enter your account number without spaces or dashes, or select 'no' if you are a consumer.</em></p><br>
<form class="form-horizontal" role="form" id="my-account-form" method="post" action="">
<div class="col-sm-offset-3"></div>
<div class="form-group">
<label for="lastname" class="col-sm-3 control-label">Are you a retailer?</label>
<div class="col-sm-9">
Yes <input type="radio" onclick="javascript:yesnoCheck('yes');" name="yesno" id="yesCheck">
No <input type="radio" onclick="javascript:yesnoCheck('no');" name="yesno" id="noCheck">
</div>
</div>
<!-- the contents will only be added if yes -->
<div id="ifYes">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I want to select one radio button out of two radio button using Javascript here is my html code I have
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6">Feel Of The Cards : </label>
<div class="col-sm-6">
<input type="radio" value="NonEmbossed" name="feel_of_card" /> Non Embossed/Smooth Finished<br>
<input type="radio" value="Embossed" name="feel_of_card1" /> Embossed/Linen Finished/Textured Cards
</div>
</div>
</div>
I want to make a separate function in which a one radio button will be selected out of two radio button?
what is the possible way to write javascript function ?
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6">Feel Of The Cards : </label>
<div class="col-sm-6">
<input id="_1234" type="radio" value="NonEmbossed" name="feel_of_card" /> Non Embossed/Smooth Finished<br>
<input id="_1235" type="radio" value="Embossed" name="feel_of_card" /> Embossed/Linen Finished/Textured Cards</div>
</div>
</div>
Why do you use all instead of id value?
Also do not mix CSS syntax (# for identifier) with native JS
Native JS solution:
document.getElementById("_1234").checked = true;
JQuery solution:
$("#_1234").prop("checked", true);
You don't need JavaScript to do that. Just give same name to both checkboxes
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6">Feel Of The Cards : </label>
<div class="col-sm-6">
<input type="radio" value="NonEmbossed" name="feel_of_card" />
Non Embossed/Smooth Finished<br />
<input type="radio" value="Embossed" name="feel_of_card" />
Embossed/Linen Finished/Textured Cards
</div>
</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.