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!
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 am making a html form with bootstrap. The form will display some personal user details I store server side. I want a user to be able to view their details and edit them if they wish to.
Here is my basic form. It has two fields, Name and Postcode which are both disabled. It has two buttons, Edit and Save, the Save button is hidden.
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input class="form-control" id="name" disabled>
</div>
</div>
<div class="form-group">
<label for="postcode" class="col-sm-2 control-label">Postcode</label>
<div class="col-sm-10">
<input class="form-control" id="postcode" disabled>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" id="save" hidden>Save</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="edit" class="btn btn-default" id="edit">Edit</button>
</div>
</div>
</form>
When a user clicks the edit button I want to:
Enable the Name and Postcode fields
Unhide the Save button
Hide the Edit button
What is the best way to achieve this? Is there a javascript library I should use? Or is a bespoke function the way to go?
Also, is this generally the right approach? I was surprised at how few examples I've found of 'editable' html forms (i.e. ones that start as disabled, and become enabled with an edit button). I thought bootstrap might offer something out of the box but couldn't find anything.
I've put together a small example at https://codepen.io/anon/pen/vpdQmL
The underlying html/javascript is as follows:
<button
type="edit"
class="btn btn-default"
id="edit"
onclick="return handleEdit()">
Edit
</button>
function handleEdit() {
document.getElementById('name').disabled = false;
document.getElementById('postcode').disabled = false;
document.getElementById('edit').hidden = true;
document.getElementById('save').hidden = false;
return false;
}
How to enable and disable text fields is explaied here:
How to enable a disabled text field?
To show and hide Buttons I would use display:
https://www.w3schools.com/jsref/prop_style_display.asp
Like described here:
JavaScript style.display="none" or jQuery .hide() is more efficient?
Besides the edit-button needs an onClick="changeForm()"
And you need a Javascript Method changeForm that changes the display-values of the buttons and enables the text fields.
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
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 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..