javascript to generate form submit link - javascript

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>

Related

avoid refresh page and required field doesn't work

I want to submit a form disabling refresh and I want the ajax to do the POST request to avoid refreshing the page.
Here I got something structure like this but my required tag doesn't work
<form id="test">
<input type="text" name="title" required/>
</form>
<button id="submitForm">Save</button>
Then I make javascript like this:
$('#submitForm').click(function(e){
e.preventDefault();
$("#test").submit();
console.log('success');
});
why is my form refreshing and not validating the required field?
You are bypassing all stuff you get for free.
Here is how
Use the submit event
Move the submit button to the form
$('#test').on("submit", function(e) {
e.preventDefault();
// $.post(url.....)
console.log('success');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="test">
<input type="text" name="title" required/>
<button type="submit">Save</button>
</form>
or use form="test" on the tag
$('#test').on("submit", function(e) {
e.preventDefault();
// $.post(url.....)
console.log('success');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="test">
<input type="text" name="title" required/>
</form>
<button type="submit" form="test">Save</button>
If you are planning to add the form dynamically, you need to delegate
$("#container").on("submit", ".dynForm", function(e) {
e.preventDefault();
// $.post(url.....)
console.log('success', this.id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<form id="test1" class="dynForm">
<input type="text" name="title" required/>
</form>
<form id="test2" class="dynForm">
<input type="text" name="title" required/>
</form>
<form id="test3" class="dynForm">
<input type="text" name="title" required/>
</form>
</div>
<button type="submit" form="test1">Save 1</button>
<button type="submit" form="test2">Save 2</button>
<button type="submit" form="test3">Save 3</button>

Applying JQuery in Wtform to Perform Add Input Fields Dynamically in Flask

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="">

How can I get the value of a hidden input field when submitting a form?

I have a page with multiple forms on it. Each form has two submit buttons and one hidden input field which contains an ID.
When the user clicks one of the submit buttons, I need to send the value of the clicked submit button along with the value of the hidden input field with the form submission.
Here is an example of what my page looks like:
<form id="options">
<input type="hidden" value="104">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
<form id="options">
<input type="hidden" value="44">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
<form id="options">
<input type="hidden" value="39">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
<script>
$(document).on("submit", "#options", function(e) {
e.preventDefault();
console.log(this.submitted) // gets the value of the submit button
});
</script>
Currently I can only send the value of the clicked submit button with the form submission and not the value of the hidden input field. While I am aware that I could use onclick="this.form.submited=this.previousElementSibling.value;" to get the ID, this would mean I cannot get the value of the clicked submit button.
Use $(this) to to get the hidden input of the current form, and you can't use the same id for multiple elements, change your id to class="options".
var val = $(this).find('input:hidden').val());
$(document).on("submit", ".options", function(e) {
e.preventDefault();
console.log($(this).find('input:hidden').val()) // gets the value of the submit button
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="options">
<input type="hidden" value="104">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
<form class="options">
<input type="hidden" value="44">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
<form class="options">
<input type="hidden" value="39">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
Give an id say hiddenInput to the hidden input box. To access the value you can use $(.hiddenInput).val();. To access the value on the server side, you can access it using req.query.id()
You can use val():
var value = $('input[name="input-name"]').val();
Edit:
If you want to use more than one input with the same name, use it like this:
$('input[name="input-name"]').forEach(function($in) {
var value = $in.val();
});
Try this:
$(document).ready(function() {
$("input[type='submit']").click(function(event) {
event.preventDefault();
var id = $(this).parent().find("input[name='id']").val();
var action = $(this).data("action");
console.log("action: " + action + ", id: " + id);
});
});
<html>
<body>
<form id="options1">
<input type="hidden" name="id" value="104">
<input type="submit" data-action="delete" value="Delete">
<input type="submit" data-action="reply" value="Reply">
</form>
<form id="options2">
<input type="hidden" name="id" value="44">
<input type="submit" data-action="delete" value="Delete">
<input type="submit" data-action="reply" value="Reply">
</form>
<form id="options3">
<input type="hidden" name="id" value="39">
<input type="submit" data-action="delete" value="Delete">
<input type="submit" data-action="reply" value="Reply">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
Just a simple find will fetch you the required data.
$(document).on("submit", "form", function(e) {
alert($(this).find('input[type="hidden"]').val())
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="options">
<input type="hidden" value="104">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
<form id="options">
<input type="hidden" value="44">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
<form id="options">
<input type="hidden" value="39">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
All you need is this:
<form>
<input type="hidden" name="id" value="104">
<input type="submit" name="action" value="Delete">
<input type="submit" name="action" value="Reply">
</form>
Clicking the Reply button yields:
id=104&action=Reply

Auto complete input field mandatory in form

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

How to get a element without a special child in jQuery

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;
} );

Categories