I have a dropdown menu, two input text box, and a submit button. I want the submit button to be disabled until dropdown item is selected AND both input boxes are filled. I looked at several examples including this one and this one but none of these are working for me. Below is my code. Thanks
<form name="myForm">
Select an option:
<select id="dropDown" name="dropDown" ng-model="data.dropDown" >
** content for dropDown menu, populating it by using Django
</select>
From Date:
<input type="text" id="dateFrom" ng-model="data.date1" />
To Date:
<input type="text" id="dateTo" ng-model="data.date2" />
<button id="submit" ng-click="submitRequest()" ng-disabled="!(!!data.dropDown && !!data.date1 && !!data.date2)">Submit </button>
</form>
I also tried this method below:
<form name="myForm">
Select an option:
<select id="dropDown" name="dropDown" ng-model="data.dropDown" >
** content for dropDown menu, populating it by using Django
</select>
From Date:
<input type="text" id="dateFrom" ng-model="data.date1" required/>
To Date:
<input type="text" id="dateTo" ng-model="data.date2" required />
<button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit </button>
</form>
So initially when the page loads and all fields are empty by default, the Submit button is disabled and the problem is that after all three fields are filled, it doesn't get enabled. Thanks
Your second method works for me (utilizing myForm.$invalid) if I add required to the dropdown element. I've created a plunkr you can play with here.
<form name="myForm">
Select an option:
<select id="dropDown" name="dropDown" ng-model="data.dropDown" required>
<option>red</option>
<option>blue</option>
<option>green</option>
</select><br/>
From Date:
<input type="text" id="dateFrom" ng-model="data.date1" required/><br/>
To Date:
<input type="text" id="dateTo" ng-model="data.date2" required /><br/>
<button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit</button>
</form>
Note: I used Angular 1.4 in the plunkr as you did not specify which version of Angular you are working with.
Edit: OP stated that issue was created by using JQuery's datepicker. May I suggest using angular-ui boostrap datepicker? Plunker example - Angular-UI Bootstrap docs
Why dont you use ng-disabled="myForm.myName.$pristine" because pristine will check for each variable inserted in textboxes
please check small example here..
ng pristine example
Related
On an angularJS application I have a <form> with a group of radio buttons, I want to force the user to select an option before he validates the form.
Here a simplify version of my HTML code :
<form name="myForm">
<label ng-repeat="option in options">
{{option.name}}
<input type="radio" name="animalOptions" value="option.id" required>
</label>
<button type="submit" ng-disabled="!myForm.$valid">
SUBMIT
</button>
<h1>
{{myForm.$valid}}
</h1>
</form>
I reproduced my issue in this example :
JSfiddle
Why does it prints true instead of false ?
You need to set ng-model to keep the selected value, e.g. $scope.selected (required needs ng-model to work). Also a function is needed to set the model on every click. Validation can be done like this:
<label ng-repeat="option in options">
{{option.name}}
<input type="radio" name="animalOptions" value="option.id" ng-model="selected" ng-click="toggle(option.id)" ng-required="!selected">
</label>
ng-required="!selected" ensures that user has selected an option
Check this example: fiddle example
You need ng-model to set validity of your form input(s).
And use
required
like this in Angular way :
ng-required="true"
Something like this :
<form name="testForm" ng-submit="yourSubmitFunction();" novalidate>
<input type="radio" name="radio" ng-model="rr" value="optionA" ng-required="true"/> optionA
<input type="radio" name="radio" ng-model="rr" value="optionB" /> optionB
<button type="submit" >Submit</button>
</form>
I'm building an app in django and I've got a filter form that is a dropdown and you can switch between "new" and "popular" (aka filter by date or number of votes). I decided that I want this to be formatted as buttons (kind of like how it is on yik yak) where it is easier to toggle between the two.
I am using django widget tweaks to display my forms so my generated HTML looks like:
<form action="/board/Intuna/" method="post" class="ng-pristine ng-valid">
<input type="hidden" name="csrfmiddlewaretoken" value="io55AwNMPKNzAkv69qWkcRzqNV7mwo1w">
<div class="form-group">
<label class="col-sm-1 control-label" for="id_filterType">Filter By</label>
<div class="col-sm-11">
<select class="form-control" id="id_filterType" name="filterType" onchange="this.form.submit();">
<option value="0" selected="selected">Most Recent</option>
<option value="1">Popularity</option>
</select>
</div>
</div>
</form>
UPDATE: I tried writing this javascript function to select the choice in my form
function filter(valueToSelect) {
var item = document.getElementById('id_filterType');
console.log(item);
if (item) {
item.value = valueToSelect;
}
}
And lastly in my HTML template I have two buttons
<button class="btn btn-primary" onclick="filter('0');">New</button>
<button class="btn btn-primary" onclick="filter('1');">Hot</button>
When I click the buttons, the selected option in my form changes but it doesn't submit, which does not make sense to me since it is supposed to automatically submit when the option is changed. Any ideas?
Still not sure why the form was not automatically submitting with onchange="this.form.submit();" but I ended up adding a name attribute to my form
<form action="/board/Intuna/" method="post" class="ng-pristine ng-valid" name="filter-form">
And then added to my javascript function
document.filter-form.submit();
and now it works! And to finish it up I wrapped the filterType field with <div class="hidden"> and everything looks/works perfectly!
I have a form with a save button which is being disable using $pristine and $invalid properties. Form has a drop down menu which contains a blank value as Select option. Once I selected the blank value it always sets the from's $invalid property to false. Could anyone suggest me an option?
My save button code like this
<button class="btn btn-primary app-form-buttons" disabled="disabled" name="btnSave" ng- disabled="myForm.$pristine || myForm.$invalid" type="submit">
<i class="icon-save"></i>
</button>
Drop down code like this
<div class="col-sm-8 col-xs-11">
<select class="form-control" name="Type" ng-model="bus.route" required ng-options="bus.type as type.Type for type in types" >
<option>---Please Choose---</option>
</select>
</div>
It seems like what you need is to set the placeholder option to disabled as you don't want it to be selected.
<div class="col-sm-8 col-xs-11">
<select class="form-control" name="Type" ng-model="bus.route" ng-options="bus.type as type.Type for type in types" >
<option disabled>---Please Choose---</option>
</select>
</div>
Problem has been solved. I was trying to validate the form using required attribute. Which had gave me an invalid error when I select the blank value. To overcome the problem I used custom method inside disable attribute.
I am trying to replicate the sort of functionality which is present on this website. The price, mentioned above the 'Get a Protective Plan' button, updates with respect to different options selected from the dropdown and the radio button selected.
Now I have a form which has 2 read-only input field's for 'Price' and 'Price-2' and I want the value of those fields to be updated depending on the selection of the dropdown options and the radio button by the user. So basically, the values of the read-only input fields, which needs to be updated, will be an addition of the values of the selected dropdown option and the radio button.
Here's a rough example of the form which I've created along with the dropdown and the radio buttons:
<form action="#" method="post">
<label>Last Name*</label>
<input type="text" name="lastname" value="" required="true">
<select id="p1">
<option value="1">$1</option>
<option value="2">$2</option>
<option value="3">$3</option>
<option value="4">$4</option>
<option value="5">$5</option>
</select>
<input id="p2" type="radio" name="price2" value="50">$50<br/>
<input id="p2" type="radio" name="price2" value="100">$100
<label>Price</label>
<input type="text" name="Price" readonly="readonly" value="">
<input type="text" name="Price-2" readonly="readonly" value="">
<input type="submit" value="Submit">
</form>
So in this form if I select the second option from the dropdown whose value is '2' and then I select the first radio button whose value is '50', I'd want the value of the 'Price' and the 'Price-2' fields to automatically become '$52'. I know this can be achieved using jQuery but I cannot really figure out how as I am still learning it. Looking forward to get a solution. Thanks.
you can accomplish using JQuery,
Here is a Fiddle Demo for your desired result.
I am having this problem where we have a payment page that we only allow you to submit once.
And on iOS if you enter a credit card it will ask you if you would like to save it (Safari feature not ours). However this is called after our javascript validation assigns the boolean to disallow resubmition.
The Safari popup stops page propagation and nothing happens.
I was wondering if there was a way to use a callback or hook into when the user submits this value and continue with form submission.
Note: I have already tried autocomplete="off" on the form and the input to have this popup not appear. Which does not work.
Edit: I discovered that the reason the form does not submit after clicking not now is because we make use of Recaptcha (which is hidden behind the popup in the picture).
Surprisingly I had a difficult time getting the AutoFill dialog to pop up. It seems that Safari needs some type of clue that you're submitting credit card info. If you want the dialog to just go away and you control the name of the form elements, then name the elements to something unrelated to a credit card:
This prompts autofill:
<form action="test" method="post" id="credit">
Name:<input type="text" name="cardholder" />
<br/>
Credit Card Type:
<select name="cardtype" >
<option></option>
<option value="amex">amex</option>
<option value="visa">visa</option>
<option value="mastercard">mastercard</option>
</select>
<br/>
Credit Card:<input type="text" name="cardnumber" />
<br/>
Expiration:<input type="text" name="expirationdate" />
<br/>
<input type="submit">
</form>
This does not prompt:
<form action="test" method="post" id="credit" autocomplete="off" >
Name:<input type="text" name="h" autocomplete="off" />
<br/>
Credit Card Type:
<select name="t" autocomplete="off" >
<option></option>
<option value="amex">amex</option>
<option value="visa">visa</option>
<option value="mastercard">mastercard</option>
</select>
<br/>
Credit Card:<input type="text" name="n" autocomplete="off" />
<br/>
Expiration:<input type="text" name="d" autocomplete="off" />
<br/>
<input type="submit">
</form>
This is a variant on Sam Nunnally's answer.
I was in a situation where I was working with a Python package and couldn't edit the name of the credit card, so I had to rename fields on the fly with jQuery. This may or may not work for others depending on how they need to use the submitted form data.
Here's most of the relevant code that worked for me with some comments. I needed to rename the field and detach the label from the input (when there was a label for the input that said "Credit Card", iOS sniffed it out), and I threw in autocomplete="off" for good measure.
var iOSCheck = false;
var cardField = $("#id_card_number");
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { // This could be more elegant; should sniff iOS 7.x specifically
iOSCheck = true;
}
if (iOSCheck == true) {
$("#id_card_number").attr('id','workaround-one'); // Rename ID. Nondescript name.
$('#workaround-one').attr('autocomplete','off'); // Turn off autocomplete (not sure if necessary)
$("#w1-label").after('<div class="simulate-label">Credit Card</div>'); // Kill the label. Append the text,
$("#w1-label").remove(); // Then remove the label. That way the text in the label doesn't link to the CC field.
cardField = $('#workaround-one'); // Redefine our credit card field so we can reference it later in the script.
}