I have the following form:
If I click on a star, the input will be automatically populated with the number of the clicked star. (clicking on the 3rd star the input will be populated with number '3' like in the image bellow)
The input bellow the stars is ng-required="true".
<form name="completeSurveyForm" role="form" novalidate ng-submit="vm.save()">
<ul class="question-list">
<li data-ng-repeat="question in vm.survey.questions | orderBy:'conditionalOrderId' track by question.id ">
<small class="label label-primary pull-right">{{question.questionTypeName}}</small>
<h3>
<b>{{$index +1 }}.</b> {{question.questionBody}}
</h3>
<hr> <!-- Replace here with directives -->
<div data-ng-switch="question.questionType">
<numericrange question="question" data-ng-switch-when="NUMERIC_CHOICE" />
</div>
</li>
</ul>
<button type="submit" ng-disabled="completeSurveyForm.$invalid " class="btn btn-primary">
<span data-translate="fqApp.business.form.submit">Submit</span>
</button>
</form>
And the numericrange directive looks like this:
<div class="row">
<div class="col-md-2" ng-if="!completed">
<div>
<span ng-mouseover="showHovered($event)" ng-mouseleave="clearStars($event)" ng-click="selectStar($event)"
data-ng-repeat="sym in range(startNonActive(question), question.maxValue, 1)" class="{{question.symbol}} starred-element" value="{{$index}}">
</span>
<input type="number" name="{{question.id}}"
data-ng-model="question.numericValue"
data-ng-value="numberOfSelectedStars" ng-required="true" />
</div>
</div>
</div>
Getting into the problem:
If I click on a star and the input populates dynamically with a number the form fails to validate like in the image bellow:
I manually write a number in the input the form is valid and I can click the submit button.
But why If I write manually a number in the input, the form gets valid and I can click the 'submit' button and if the input is populated automatically by selecting a star, the form does not validate and I cannot click on the 'submit' button?
While you clicking on star, manually make dirty when value assigned.
angular.forEach($scope.form.$error.required, function(field) {
field.$setDirty();
})
or
You can use $setViewValue(value, trigger) method. This method will be called when a control wants to change the view value.
Refer here
Related
I am using submit button with a tag. However, one more button needs to be used.
Can I use two submit buttons with a tag in one form?
<div>
...
<form id="action-1" action='my action1 html' method="post">
<input class="mini-action" type="text" name="mini" value="1">
</form>
</div>
<div class="details">
// A tag submit button currently in use
<a title="action1" href="#" onclick="document.getElementById('action-1').submit()">action-1</a>
</div>
<div class="details">
// ToDo: Here I want to send to action2 url when submit button is clicked.
<a title="action2" href="#" onclick="document.getElementById('action-2').submit()">action-2</a>
</div>
The tags you used are not submit buttons but links hijacked to act as buttons, additionally it is considered to be best practice to place the submit buttons inside the form they submit.
You can override the submit button's action with the attribute formaction
<form action="action-1">
<!-- input fields go here -->
<button type="submit">this will trigger action-1</button>
<button type="submit" formaction="action-2">this will trigger action-2</button>
</form>
I currently have this UI:
the problem is that when I click one radio button, any preselected button will become unselected. So that's telling me that there aren't different input groups - all of the <input> tags are probably in one big group.
This is probably a pretty vanilla problem, but I am simply not an HTML or Angular expert.
Here is the code for this, there is an outer loop and an inner loop using ng-repeat:
<form name="myQuestionsForm" ng-submit="submit()"> // outer form
<div class="panel panel-default" ng-repeat="q in questions | orderBy:[]">
<h1>{{q.prompt.value}}</h1>
<div class="panel-body">
<form id="aform"> // inner form
<div ng-repeat="c in q.children | orderBy:[]">
<div ng-if="c.kind == 'text'">
<label>
{{c.value}}
<textarea name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value"></textarea>
</label>
</div>
<div ng-if="c.kind == 'checkbox'">
<label>
{{c.value}}
<input type="checkbox" name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value">
</label>
</div>
<div ng-if="c.kind == 'radio'">
<label>
{{c.value}}
<input type="radio" name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value">
</label>
</div>
</div>
</form>
</div>
</div>
<div style="text-align: center;">
<button type="submit" class="btn btn--success btn">
<h5>Submit</h5>
</button>
</div>
</form>
Perhaps the reason this is happening is because I have nested forms? Maybe I need to get rid of the outer form?
Group radio buttons with the name attribute.
<input> type attribute
The type of control to display. The default type is text, if this attribute is not specified. Possible values are:
radio: A radio button. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected by default. Radio buttons that have the same value for the name attribute are in the same "radio button group". Only one radio button in a group can be selected at a time.
– MDN HTML Element Reference - <input>
See also:
AngularJS input[radio] Directive API Reference
AngularJS ng-value Directive API Reference
AngularJS ng-checked Directive API Reference
So I've got a form. I'm utilizing tag helpers. The form only has one text input, and I'm trying to use the Bootstrap "input-group-addon" div as the submit button for this small form.
I'm running into strange behavior. If I just hit the enter key after typing something into the input, the data binds fine over into the controller action.
However, if I attach an onclick listener to the div, and run getElementById('Form').submit();, when I click the div, it still takes me to the controller action, but none of the data is bound to the incoming for model.
Razor form:
<form asp-controller="Search" asp-action="HomeBuyersSearchSubmit" id="Home_Buyers_Search_Form">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="input-group">
<input asp-for="Query" class="form-control" placeholder="City, Neighborhood, Address, Postal Code or MLS #" />
<div onclick="javascript: document.getElementById('Home_Buyers_Search_Form').submit();" class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
</div>
</div>
</div>
</div>
</form>
Controller action:
[HttpPost]
public IActionResult HomeBuyersSearchSubmit(SearchFilter filter)
{
return RedirectToAction("Index", filter);
}
I found a work around, but I'd still be curious in knowing what is going on.
For those interested, what I did was changed the "input-group-addon" to a button, and made some slight modifications to the padding and margins to make the button appear like the div counterpart. This also required Bootstrap's "form-inline" on the form. Data binding works as expected now.
<form asp-controller="Search" asp-action="HomeBuyersSearchSubmit" id="Home_Buyers_Search_Form" class="form-inline">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input asp-for="Query" class="form-control" placeholder="City, Neighborhood, Address, Postal Code or MLS #" />
<button type="submit" class="input-group-addon"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</form>
i am using bootstrap button-group checkbox with toggle. To easily identify selected option, using the toggle function (courtesy - one of the post here). Working example here.
<div class="form-group">
<label class="sr-only" for="Test">Boxes</label>
<div class="controls" name="Test">
<div class="btn-group" data-toggle="buttons-checkbox">
<div class="btn btn-default" class-toggle="btn-info">AA</div>
<div class="btn btn-default" class-toggle="btn-info">BB</div>
<div class="btn btn-default" class-toggle="btn-info">CC</div>
</div>
</div>
</div>
stumped with:
1) how to validate that user has to select at least 1 button and
2) how to capture value(s) of selected buttons to be sent to PHP (form).
very novice with web development. Need help. Thanks.
Suppose you have three buttons as shown below:
<input type="button" class="button" value="Button1">
<input type="button" class="button" value="Button2">
<input type="button" class="button" value="Button3">
You can make a hidden field there with an array as given below:
<input type="hidden" class="newField" name="buttonValue[]">
Now, use it in Jquery:
$(document).ready(function(){
$('.button').click(function(){
var values = $(this).val();
$('.hidden').val(values);
});
});
and now when you submit a form then you can easily get value from that field and make a validation accordingly.
there is many ways to do this if you want to submit a form with PHP than its very simple you can add a class and use a hidden fields on the click you can add a class and put a value on hidden field and after the submit you can easily get all the value form hidden fields. you can easily check value of hidden fields, so with this you can validate as well that user select any button or not..
I'm building an Angular JS app with a 2-step form. It's really just one form, but uses JavaScript to hide the first panel and show the second when the user clicks the 'next' button and moves on to step 2. I have set 'required' validations on some of the fields in step 1, but obviously, they do not get validated when the user clicks the 'next' button...they get validated when the 'submit' button is clicked at the end of step 2.
Is there any way I can tell angular to validate those fields in the form when the 'next' button is clicked?
I suggest to use sub-forms. AngularJS supports putting one form inside another, and validity is propagated form lower form to upper;
Here is example: http://plnkr.co/edit/SruBmlGZZtbwiU8cktAp?p=preview
Here is some code so you can grasp the idea:
<form name='myform' ng-init="step = 1">
<div ng-show="step==1">
<h3>Step 1: Enter some general info</h3>
<div ng-form='step1form'>
Name: <input ng-model="name" required>
</div>
<button ng-disabled="!step1form.$valid" ng-click="step = 2">Next</button>
</div>
<div ng-show="step==2">
<h3>Step 2: Final info</h3>
<div ng-form="step2form">
Phone: <input ng-model="phone" required>
</div>
<button ng-click="step = 1">Prev</button>
<button ng-disabled="!myform.$valid" ng-click="submit()">Submit</button>
</div>
<div>
Validation status:
<div> Whole form valid? {{myform.$valid}} </div>
<div> Step1 valid? {{step1form.$valid}} </div>
<div> Step2 valid? {{step2form.$valid}} </div>
</div>
</form>