Not sure how to fix this. I want to have an array of strings based on a checkbox form. I have all the values set to be added to the same array (MenteeLevelPrefernce), but when I check one box they all get checked. What am I doing wrong here?
<label for="mentorPrefCheck">Mentee Level Preference (select all that apply)</label>
<div class="form-group" id="mentorPrefCheck">
<label class="checkbox-inline">
<input type="checkbox" id="hsLevelCheck" [(ngModel)]="mentor.MenteeLevelPreference" name="menteeLevelPreference" value="Highscool"> Highschool</label>
<label class="checkbox-inline">
<input type="checkbox" id="undergradLevelCheck" [(ngModel)]="mentor.MenteeLevelPreference" name="menteeLevelPreference" value="Undergraduate"> Undergraduate</label>
<label class="checkbox-inline">
<input type="checkbox" id="gradLevelCheck" [(ngModel)]="mentor.MenteeLevelPreference" name="menteeLevelPreference" value="Graduate"> Graduate</label>
</div>
use unique variables for [(ngModel)] and name attributes
<div class="form-group" id="mentorPrefCheck">
<label class="checkbox-inline">
<input type="checkbox" id="hsLevelCheck" [(ngModel)]="mentor.MenteeLevelPreference1" name="menteeLevelPreference1" value="Highscool"> Highschool</label>
<label class="checkbox-inline">
<input type="checkbox" id="undergradLevelCheck" [(ngModel)]="mentor.MenteeLevelPreference2" name="menteeLevelPreference2" value="Undergraduate"> Undergraduate</label>
<label class="checkbox-inline">
<input type="checkbox" id="gradLevelCheck" [(ngModel)]="mentor.MenteeLevelPreference3" name="menteeLevelPreference3" value="Graduate"> Graduate</label>
</div>
Related
I have a form that requires validation and works fine for text and textareas but not for inline radio buttons.
<form class="needs-validation" novalidate method="POST">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" required>
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" required>
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" required>
<label class="form-check-label" for="inlineRadio3">3</label>
</div>
<div class="invalid-feedback">
Radio button is required.
</div>
<button class="btn btn-primary" type="submit">Validate</button>
</form>
I see that the controls and labels turn red when submitted but the text in the invalid-feedback is not there. I also want it to be aligned all the way to the left.
I have a form, were user have to input their birth date:
<div class="form-group">
<label for="day" class="sr-only">[[%day]]</label>
<input type="number" min="0" max="31" maxlength="2" class="form-control input-lg name="day" value="[[+day]]" placeholder="day">
</div>
<div class="form-group">
<label for="day" class="sr-only">[[%day]]</label>
<input type="number" min="0" max="31" maxlength="2" class="form-control input-lg name="day" value="[[+month]]" placeholder="month">
</div>
<div class="form-group">
<label for="day" class="sr-only">[[%day]]</label>
<input type="number" min="0" max="31" maxlength="4" class="form-control input-lg name="day" value="[[+year]]" placeholder="year">
</div>
I understand, that type="number" does not support the attribute maxlength.
I have to make like this:
When customer inputs 2 digits into day, the next input field becomes automatically focused and so on... Only numbers are allowed for input.
Thanks!
Try something like this.
(You need to import jquery lib.)
<input type="number" id="date">
<input type="number" id="date">
<script>
txt_day=$("#day");
txt_year=$("#year");
txt_day.change(function(){
if(tt_day.val().length;
txt_year.focus();
}
</script>
I would like to populate a bootstrap form with results from a mongo query using handlebars but am not sure where to put the relevant expressions.
For example, if the code is:
<form method="post" action="/students" enctype="multipart/form-data">
<div class="form-group col-md-12">
<label class="col-md-2 control-label" for="title">STUDENT</label>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label" for="title">Surname</label>
<div class="col-md-2">
<input class="form-control" type="text" name="surname">
</div>
<label class="col-md-2 control-label" for="title">First Name</label>
<div class="col-md-2">
<input class="form-control" type="text" name="firstname">
</div>
</div>
</form>
and, say I have the following {{surname}} and {{firstname}} expressions, is there a place in the code I can put them to ensure that when the page renders the forms contain the surname and firstname objects already? Is this even possible?
Any help is much appreciated
If I understand you right you want the inputs value to be filled. You can set the inputs value like this
<input class="form-control" type="text" name="surname" value="{{$surname}}">
I am struggling to figure out how to pass check box info in jquery mobile for a form. In the form I have the following set of check boxs for users to select what clubs they want:
<li data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Select Set?</legend>
<option value=""></option>
<input type="checkbox" name="t123_irons" id="t123_irons" class="custom" value="3">
<label for="t123_irons">3</label>
<input type="checkbox" name="t124_irons" id="t124_irons" class="custom" value="4">
<label for="t124_irons">4</label>
<input type="checkbox" name="t125_irons" id="t125_irons" class="custom" value="5">
<label for="t125_irons">5</label>
<input type="checkbox" name="t126_irons" id="t126_irons" class="custom" value="6">
<label for="t126_irons">6</label>
<input type="checkbox" name="t127_irons" id="t127_irons" class="custom" value="7">
<label for="t127_irons">7</label>
<input type="checkbox" name="t128_irons" id="t128_irons" class="custom" value="8">
<label for="t128_irons">8</label>
<input type="checkbox" name="t129_irons" id="t129_irons" class="custom" value="9">
<label for="t129_irons">9</label>
<input type="checkbox" name="t12pw_irons" id="t12pw_irons" class="custom" value="PW">
<label for="t12pw_irons">PW</label>
</fieldset>
</li>
I am not sure what to put on my review form to get the checkboxs that are selected since in jQuery mobile the check box group all have different IDs and Names for checkbox groups.This is how I imagine I would get the group if they had one unified name/id:
echo (!empty($_REQUEST['t12_irons'])) ? "<div class='reviewItem'><span class='reviewTitle'>In Set:</span>{$_REQUEST['t12_irons']}</div>" : "";
I want to achieve the example html markup using Zend_Form_Element_Checkbox. Encounter problems, however, for example page_actions[]. I want to have this in a attribute and receive array in request. I know I must do it in the init of the form, but I lack knowledge of Zend Framework. I tried several options. For example, this:
// In for loop in init method
$element = new Zend_Form_Element_Checkbox('test['.$i.']');
$element->setIsArray(true)->setBelongsTo('checkbox_name');
$this->addElement($element);
This is the markup I would like to achieve:-
<div>
<div>
Some bold message for this group
</div>
<div>
<span>
<input type="checkbox" id="qf_18" value="12" name="page_actions[]"/><label for="qf_18">Test 18</label><br/>
<input type="checkbox" id="qf_20" value="13" name="page_actions[]"/><label for="qf_20">Test 20</label><br/>
<input type="checkbox" id="qf_22" value="14" name="page_actions[]"/><label for="qf_22">Test 22</label><br/>
<input type="checkbox" id="qf_24" value="15" name="page_actions[]"/><label for="qf_24">Test 24</label><br/>
<input type="checkbox" id="qf_26" value="16" name="page_actions[]"/><label for="qf_26">Test 26</label>
</span>
</div>
</div>
<div>
<div style="font-weight: bold;">
Some bold message for this other group
</div>
<div>
<span>
<input type="checkbox" id="qf_28" value="17" name="page_actions[]"/><label for="qf_28">Test 28</label><br/>
<input type="checkbox" id="qf_30" value="18" name="page_actions[]"/><label for="qf_30">Test 30</label><br/>
<input type="checkbox" id="qf_32" value="19" name="page_actions[]"/><label for="qf_32">Test 32</label><br/>
<input type="checkbox" id="qf_34" value="20" name="page_actions[]"/><label for="qf_34">Test 34</label><br/>
<input type="checkbox" id="qf_36" value="21" name="page_actions[]"/><label for="qf_36">Test 35</label>
</span>
</div>
</div>
You can use view script to do that. I think zend form decorator is not support to this kind of form.