i am trying to clear my form using clear button. but form validations are cleared well. but entered values not clear. please check my HTML code
<form class="form-horizontal" name="cashBenefitForm" novalidate="novalidate" ng-submit="save()">
<input type="text"
ng-pattern="/^(0?[1-9]|1[012])$/" ng-pattern-err-type="invalidMonth"
maxlength="2" ng-maxlength="2" size="2" ng-minlength="1"
placeholder="*No.of months" name="cbMonth"
ng-model="newcashbenifit.months"
class="form-control auto-width"/>
<button type="submit">Save </button>
<button type="button" ng-click="clear()"> Clear </button>
</form>
my clear function as below
$scope.clear= function () {
$scope.newcashbenifit = {}
$scope.cashBenefitForm.$setPristine();
}
when i enter invalid data to text box and after i clicked clear button. that moment error cleared. but text box value did not clear.
after clicked clear button, errors cleared. but text-box value did not clear. please check below image
how i clear my form correctly
Related
<form action="" method="post" enctype="multipart/form-data">
<label class="btn btn-theme">
<input type="file" name="file" value="" style="display:none;" required=""> click Me to choose file
</label>
<label class="btn btn-success">
<input type="checkbox" name="checkbox" value="yes" style="display:none;" required=""> Are You agree ?
</label>
<br>
<input type="submit" name="" value="Submit">
</form>
i want to show alert whenever user haven't selected any file or not agree and press Submit button in my given code.
right now it giving "An invalid form control with name='file' is not focusable."
I know the reason behind it but how can i alert my user that you have not selected anything.
I do not like to use Jquery Submit or show them choose file icon.
Is there any way to get that element (with help of jQuery) on which browser trying to focus ?
This other issue seems to be similar. Can you add novalidate attribute to your form? This is seen here: An invalid form control with name='' is not focusable
JQuery has a focus method that should do what you want.
Create a variable somewhere that will keep track of whether the user has clicked on an input.
var inputFocusOccured = false;
Then use the focus method to change the variable whenever a user clicks or touches an input.
$("input").focus(function(){
inputFocusOccured = true;
});
Then when the user clicks submit have it check if the value is true or false
$("#SubmitBtn").click(function() {
if(inputFocusOccured === false){
alert( "Handler for .click() called." );
}
});
I have a angular js form and a button that, if pressed, shows the login fields (2 inputs for username and password, and 1 submit button) and another button that hides it.
I've written this simple code below that uses the ng-if directive. it is working fine only problem that after the use press on show login, the div is being shown but the form is being submitted automaticly (without the user press on the submit button).
someone knows why this is happening and how to fix it?
thanks
<form name="loginForm" width="70%">
<br>
<button ng-click="NewConversation=true" >show login</button>
<button ng-click="NewConversation=false" >hide login</button>
<br><br>
<div ng-if="NewConversation">
<input autocomplete="off" name="name" ng-model="name" required placeholder="Name">
<br>
<input autocomplete="off" name="room" ng-model="room" required placeholder="Room">
<br><br>
<button ng-click="updateMsg({name: name,room: room})">Start Talking!</button>
</div>
</form>
Every button inside form tag has default behavior - submit, to prevent it add type="button" to every button inside the form tag.
<button type="button" ng-click="NewConversation=true" >show login</button>
This should help
show login
this will prevent it from submitting automatically
I have two issues with ng-model-options="{updateOn:'blur'}" and ng-change.
When user select a value from date picker and delete the value from
the field required field message is showing that is correct. Now if
user select value again required message is not going away until
user make a off click.How to fix this issue ?
Somehow related to first issue once user select the value save button is not enabled until user make a off click from the form.
How to display required message and enable the save button ?
when user select the value it should trigger the validation event.
Just want to understand. Is it because i am using ng-model-options with ng-change ?
main.html
<form id="createRcsaFormName" name="createRcsaCycleForm" novalidate
k-validate-on-blur="false">
<div class="col-md-12>
<input kendo-date-picker type="text" class="form-control"
id="asessPrdStartDate" name="asessPrdStartDate"
onkeydown="return false;"
ng-model="rcsaCycleDTO.asessPrdStartDate"
ng-change="validateDate('asessPrdStartDate','asessPrdEndDate')"
ng-model-options="{updateOn: 'blur'}" required
k-format="'MM/dd/yyyy'">
<p class="text-danger" ng-show="createRcsaCycleForm.StartDate.$touched && createRcsaCycleForm.asessPrdStartDate.$error.required">Start Date is required</p>
</div>
</form>
<button class="btn btn-primary" type="button"
ng-disabled="createRcsaCycleForm.$invalid"
ng-click="submit()">Save
</button>
I have a form with three inputs the last of them has the readonly property, so the focus is missing because the way that the user fills the last input is by clicking some buttons, like a virtual keyboard. So everything works fine. But I'm trying to press enter and submit my form but since I lost the focus after the second input, my submit is not working. How can I resolve this?
form.html
<form name="myForm"
role="form"
ng-submit="signin()"
novalidate>
<input type="text" name="input1"/>
<input type="text" name="input2"/>
<div ng-controller="mycontroller">
<span ng-click="fillInput3()">A</span>
<span ng-click="fillInput3()">B</span>
<span ng-click="fillInput3()">C</span>
</div>
<input type="text" name="input3" readonly=""/>
<button type="submit">Ok</button>
</form>
Try this,
give an id to your button,
<button type="submit" id="submitButton">Ok</button>
In your controller, insert $window as the dependency,
app.controller('yourController', function($scope, $window){
})
Then in fillInput3() function write this,
var element = $window.document.getElementById("submitButton");
if(element)
element.focus();
This would focus the "submit" button as you exit the fillInput3() function.
Lets say I have this: http://jsfiddle.net/oh0omatq/2/
<form>
<input placeholder="my value">Country
<button name="subject" type="submit" value="england">England</button>
<button name="subject" type="submit" value="wales">Wales</button>
<br />Your country is: Wales
<input type="submit">
</form>
Can I use this submit buttons for england and wales to set a value within the form, and reload the form, but also not loose the information already entered in the form, such as in the input box.
This above is just a preview, but I want to be able to reload and filter the input elements in the form depending on the button the user clicked, but also not loose any previously entered data in the fields.
I would recommend using javascript for this. I've edited your fiddle to use an onclick function.
<form>
<input placeholder="my value">
Country
<button name="subject" value="england" type="button" onclick="document.getElementById('value').innerHTML = this.value">England</button>
<button name="subject" value="wales" type="button" onclick="document.getElementById('value').innerHTML = this.value">Wales</button><br />
Your country is: <span id="value">Wales</span>
<input type="submit">
</form>
Changing the buttons to a type="button" so they don't submit the form allows the javascript to edit the value. Ofcourse you can make an input out of the span, allowing the chosen value to be sent with the form. Ofcourse, a select box would work as well then.
Would that do what you want?
You can see the edited fiddle here.
Keep in mind, this is a quick sketch. It is not recommended to use javascript inline.