I have one field and i want to make it as mandatory on form submit.
here is the code:
<div class="form-group">
<form name="addressform">
<span><small><strong> choose Location : </small></strong></span>
<div>
<input type="text" name="address" id="LocationAutocomplete" class="form-control" ng-autocomplete="result1" ng-model="addressTemp" required/>
</form>
<div ng-show="showMap">
<div id="location_map_canvas" style="width:100%;height:200px"> </div>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" ng-submit value="create" ng-disabled="frm.$invalid" class="btn btn-primary btn-block" ng-click="createt()">
</div>
Try this working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.create = function() {
console.log("submitting..");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="addressform" ng-submit="addressform.$valid && create()" novalidate>
<span ng-show="submitted == true && addressform.address.$error.required">Required field.</span>
<div class="form-group">
<input type="text" name="address" id="LocationAutocomplete" class="form-control" ng-autocomplete="result1" ng-model="addressTemp" required/>
</div>
<div class="form-group">
<input type="submit" value="create" class="btn btn-primary btn-block" ng-click="submitted = true">
</div>
</form>
</div>
<input name="movie" type="text" required />
This is how you would make an input text field required.
Take a look at ngRequired
<input type="text" id="LocationAutocomplete" class="form-control" ng-autocomplete="result1" ng-model="addressTemp" ng-required="required"/>
Use ng-required="true" as follows:
<input type="text" id="LocationAutocomplete" class="form-control" ng-autocomplete="result1" ng-model="addressTemp" ng-required="true" name="input"/>
<input type="submit" ng-disabled="myform.input.$error.required">Submit</input>
use angularjs form validation
https://docs.angularjs.org/guide/forms - https://docs.angularjs.org/api/ng/type/form.FormController with ng-message and (https://docs.angularjs.org/api/ngMessages/directive/ngMessages)
if you want in submit(ng-submit="checkAndSave")..
do in controller..
$scope.checkAndSave = function(){
// validations code if ok do save else throw whatever you want
}
Add the form tag, and name the form and all of your inputs
<form name="form" ng-submit="submitform()">
<input name="addres" type="text" id="LocationAutocomplete" class="form-control" ng-model="addressTemp" required/>
<button type="submit" ng-disabled="form.$invalid"> Submit </button>
</form>
With this, you will have the Submit button disabled if the input is Invalid.
since it has the required attribute, if the input is blank it will appear as invalid.
Find this working sample:
https://plnkr.co/edit/F0Id7HDm9pkrCTTG42U5?p=preview
Related
This is the html and jquery code i've found in google. You can dynamically add input text tags dynamically.
<form method="post" action="submit.php">
<div class="form-group fieldGroup">
<div class="input-group">
<input type="text" name="name[]" class="form-control" placeholder="Enter name"/>
<input type="text" name="email[]" class="form-control" placeholder="Enter email"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
</form>
JQuery:
<script type="text/javascript">
$(document).ready(function(){
//group add limit
var maxGroup = 10;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
</script>
I want to make it in wtform but i cant modify the name in array form
class RegisterUser(FlaskForm):
regusertest = StringField('Username', validators=[
InputRequired(),
Length(min=5, max=30)
])
and here is my form tag
<form id="login-form" action="webpage/gmsi/login" method="post" role="form" style="display: block;">
{{ form.hidden_tag() }}
{{ wtf.form_field(form.regusertest) }}
<input type="submit" class="btn btn-primary btn-lg" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">
the output of html tag is
<input class="form-control" id="regusertest" name="regusertest" required="" type="text" value="">
which i need is this one
<input class="form-control" id="regusertest" name="regusertest[]" required="" type="text" value="">
First, the reason why I have three forms on one page is for layout purposes. I have three input boxes going across one line and then another under it and so on. If I place them under one form tag, I get bad looking input boxes that goes from top to bottom. I have tried some solutions but they have not worked. Each line would put 3 three entries instead of one and some data would not show up or only one form would show up in the database.
HTML
<form class="form-inline" id="Test1" method="POST">
<div class="form-group">
<label>Name: <input name="FN" type="text" class="form-control" id="" value=""> </label> </div> </form>
<form class="form-inline" id="Test2" method="POST">
<div class="form-group">
<label>Name: <input name="LN" type="text" class="form-control" id="" value=""> </label> </div> </form>
<form class="form-inline" id="Test3" method="POST">
<div class="form-group">
<label>Name: <input name="EM" type="text" class="form-control" id="" value=""> </label> </div> </form>
<div class="form-group"><br>
<div class="col-sm-offset-2"> <button type="button" class="SB btn btn-default">Book Now</button> </div>
<script>
$(document).on('click','.SB',function(e) {
formData = $('#Test1, #Test2', '#Test3').serialize();
$.post(
'Process.php', formData
);
});
I only get the first form with this and the other two are blank but are on a single line. All inputs are unique. I have also tried the docbyid and it would add three lines but not work correctly. Any Help would be great.
PHP:
require('DBCon.php');
$statement = $link->prepare("INSERT INTO Database (FN, LN, EM) VALUES( :CFN, :CLN, :CE)");
$ClientFN = $_POST['FN'];
$ClientLN = $_POST['LN'];
$ClientEmail = $_POST['EM'];
$statement->execute(array(
":CFN" => "$ClientFN",
":CLN" => "$ClientLN",
":CE" => "$ClientEmail"));
$statement = null;
$link = null;
// Echo Successful attempt
echo "<p Data added to database.</p></br></br>";
?>
Your button should call a function rather than submit the form. Submitting will only send the data from the first form.
You should really use one form and use CSS to correct any display issues, but if you were to use separate forms, the following should do what you are looking for (make sure your closing tags are in the correct place):
<form class="form-inline" id="Test1">
<div class="form-group">
<label>Name: <input name="FN" type="text" class="form-control" id="" value=""></label>
</div>
</form>
<form class="form-inline" id="Test2" method="POST">
<div class="form-group">
<label>Name: <input name="LN" type="text" class="form-control" id="" value=""> </label>
</div>
</form>
<form class="form-inline" id="Test3" method="POST">
<div class="form-group">
<label>Name: <input name="EM" type="text" class="form-control" id="" value=""> </label>
</div>
</form>
<div class="form-group">
<div class="col-sm-offset-2"> <button type="button" class="sumbitButton btn btn-default">Book Now</button>
</div>
<script>
$(document).on('click','.sumbitButton',function(e) {
formData = $('#Test1, #Test2', '#Test3').serialize();
$.post(
'Process.PHP', formData
);
});
</script>
Try this:
<form method="post" action="Process.PHP">
<div class="form-inline">
<div class="form-group">
<label>Name: <input name="FN" type="text" class="form-control" id="" value=""></label>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label>Name: <input name="LN" type="text" class="form-control" id="" value=""> </label>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label>Name: <input name="EM" type="text" class="form-control" id="" value=""> </label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2"> <button type="submit" class="sumbitButton btn btn-default">Book Now</button>
</div>
</form>
I want to make a form where i will input a number which will generate a link like this: http://domain.com/edit/{{number}}
{{number}} will change when i will input 77, submit will take me to http://domain.com/edit/77
<div class="form-group">
<form action="/edit/[[number]]" method="get">
<input class="form-control" type="text" name="number" ">
<br>
<input type="submit" name="save" value="save" class="btn btn-success">
</form>
</div>
How can i do that?
So, you need to be able to change the value of the form's action attribute.
<div class="form-group">
<form action="/edit/[[number]]" method="get" id="form">
<input class="form-control" type="text" name="number">
<br>
<input type="submit" name="save" value="save" class="btn btn-success">
</form>
</div>
So, first, we need to give it an id, in this case form.
Then we need can use jquery to change the value of the action, like this;
$('form#form').attr('action', '/edit/' + $('form#form input[name="number"]').val());
But this only changes the form value once, so we need to add an event listener, in this case, onchange.
$( 'form#form input[name="number"]').on('input', function() {});
Adding both of them together should create something like this;
$( 'form#form input[name="number"]').on('input', function() {
$('form#form').attr('action', '/edit/' + $('form#form input[name="number"]').val());
});
$( 'form#form input[name="number"]').on('input', function() {
$('form#form').attr('action', '/edit/' + $('form#form input[name="number"]').val());
console.log($('form#form').attr('action'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<form action="/edit/[[number]]" method="get" id="form">
<input class="form-control" type="text" name="number">
<br>
<input type="submit" name="save" value="save" class="btn btn-success">
</form>
</div>
function generateLink(){
var link="http://domain.com/edit/"+document.getElementById("numberId").value;
alert(link);
}
<div class="form-group">
<form action="/edit/[[number]]" method="get">
<input id="numberId" class="form-control" type="text" name="number">
<br>
<input onclick="generateLink()" type="submit" name="save" value="save" class="btn btn-success">
</form>
</div>
and go for the ajex to parform action of the form using this url.
You have to use attr the action attribute of the form when user input in the input box. I just have added an id in form and in input tag.
$form.attr('action', $form.data('action')+$(this).val());
var $form = $('#url-form');
$('#number').on('input', function() {
$form.attr('action', $form.data('action') + $(this).val());
console.log($form.attr('action'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<form action="/edit/[[number]]" data-action="/edit/" method="get" id="url-form">
<input class="form-control" type="text" name="number" id="number">
<br>
<input type="submit" name="save " value="save " class="btn btn-success ">
</form>
</div>
Now I use jQuery to select some element.
CODE:
<form class="form-horizontal" action="">
<div class="form-group">
<input type="text" name="key_word" class="form-control" value="">
<button type="submit" class="btn btn-primary btn-bg-red">
GO
</button>
</div>
</form>
And I have other form:
<form class="form-horizontal" action="">
<div class="form-group">
<input type="text" name="key_word" class="form-control" value="">
<input type="text" name="test" class="form-control" value="">
<button type="submit" class="btn btn-primary btn-bg-red">
GO
</button>
</div>
</form>
How to just select the first form by jQuery? Namely how to get a element without a special child?
You can use :not()(or not()) and :has()
$('form:not(:has(input[name="test"]))').css('background', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="form-horizontal" action="">
<div class="form-group">
<input type="text" name="key_word" class="form-control" value="">
<button type="submit" class="btn btn-primary btn-bg-red">
GO
</button>
</div>
</form>
<form class="form-horizontal" action="">
<div class="form-group">
<input type="text" name="key_word" class="form-control" value="">
<input type="text" name="test" class="form-control" value="">
<button type="submit" class="btn btn-primary btn-bg-red">
GO
</button>
</div>
</form>
$('form').not(':has(input[name="test"])').css('background', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="form-horizontal" action="">
<div class="form-group">
<input type="text" name="key_word" class="form-control" value="">
<button type="submit" class="btn btn-primary btn-bg-red">
GO
</button>
</div>
</form>
<form class="form-horizontal" action="">
<div class="form-group">
<input type="text" name="key_word" class="form-control" value="">
<input type="text" name="test" class="form-control" value="">
<button type="submit" class="btn btn-primary btn-bg-red">
GO
</button>
</div>
</form>
Note that :has is not CSS, it's a jQuery addition. (There's been on-and-off talk of adding it to CSS, but it's not in it [yet].)
You can use the following selector:
$("form:not(:has([name='test']))");
which will only select form elements which have no descendants with name test.
Here is the working JSFiddle demo. Note that the second form is colored red, because it has no test item.
if you are looking for a form which doesn't have input element with 'form-control' class (only difference I can see between both forms), then
var result = $( ".form-horizontal" ).filter( function(){
return $( this ).find( '.form-control' ).size() == 0;
} );
I have a main form and within it I have a second form declared with ng-form directive like this:
<form name="settingsForm">
<label for="firstNameEdit">First name:</label>
<input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required /><br />
<ng-form name="addressForm">
<label for="addressEdit">Address:</label>
<input id="addressEdit" type="text" name="address" ng- model="person.address" /><br />
<label for="zipEdit">ZIP code:</label>
<input id="zipEdit" type="number" name="zip" ng-model="person.zip" required /><br />
<button>Save address</button>
</ng-form>
<button>Save</button>
</form>
When I hit submit button all inputs are validated, I wonder if I can validate only firstName for example and not the ng-form because, I want ng-form to be submitted separated on save address, not on save.
First of all you need to disable the default validation of the form as shown by Zohaib Ijaz. You can utilize the validation variable $invalid provided by AngularJS.
<form name="settingsForm" novalidate>
<div>
<label for="firstNameEdit">First name:</label>
<input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required />
<p ng-show="validateMainForm && settingsForm.firstName.$invalid"
class="help-block">You name is required.</p>
<br />
</div>
<ng-form name="addressForm">
<div>
<label for="addressEdit">Address:</label>
<input id="addressEdit" type="text" name="address" ng- model="person.address" />
</div>
<div>
<label for="zipEdit">ZIP code:</label>
<input id="zipEdit" type="number" name="zip" ng-model="person.zip" required />
<p ng-show="validateAddressForm && addressForm.zip.$invalid"
class="help-block">Zip code is required</p>
</div>
<button type="submit" ng-click="submitAddressForm()">Save address</button>
<br/>
</ng-form>
<button type="submit" ng-click="submitMainForm()">Save</button>
</form>
As you have disabled the default validation, the validation happens on click of submit button for the main form as well as the address form. On submit, a flag is set which shows the error block if the field is invalid. There is a flag validateMainForm for the settingsForm and validateAddressForm for the addressForm. When the flag is true, it shows the p element below each input field if it is invalid.
Here is the plunker that demonstrates this.
For more information, you can refer this blog- Angular Form Validation:
You can do something like this
https://jsbin.com/latepo/edit?html,js,output
<form name="settingsForm" novalidate>
<label for="firstNameEdit">First name:</label>
<input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required /><br />
<ng-form name="addressForm" >
<label for="addressEdit">Address:</label>
<input id="addressEdit" type="text" name="address" ng- model="person.address" /><br />
<label for="zipEdit">ZIP code:</label>
<input id="zipEdit" type="number" name="zip" ng-model="person.zip" required /><br />
<button type="submit" ng-click="submit2()">Save address</button>
</ng-form>
<button type="submit" ng-click="submit1()">Save</button>
</form>
angular.module('myapp', []).controller('MyController', MyController);
function MyController ($scope){
$scope.submit1 = function (){
alert('submit1');
};
$scope.submit2 = function (){
alert('submit2');
};
}