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>
Related
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
So, I have the form1 where i am giving values in two fields and submitting it,
<form action="new_cand.php" name="form1" method="post">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="cand_r" required/>
<input type="submit" name="submit" id="submit" onclick="setValues();" />
</form>
I want these values to automatically be written and visible in the two textinput and numberinput fields in form2.
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="cid" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
how do i use javascript to automatically set values visible and ready to submit
to the fields in form2 ???
Note: i'm using two forms because they both have different actions after clicking submit and both the forms are on the same page.
Here is one small example using id hashes, with this idea, I think you can start, object hash will have pair list,
You can restrict specific form by mentioning id of it, in place of $('form :input').on():
var hash = {
aadhar_r : 'a_number',
cand_r : 'cid'
}
$('form :input').on('keyup',function(){
if(this.id in hash){
$('#'+hash[this.id]).val($(this).val())
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="new_cand.php" name="form1" method="post">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="cand_r" required/>
<input type="submit" name="submit" id="submit" onclick="setValues();" />
</form>
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="cid" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
If you use jQuery, you can serialize your first form and send it directly to the server. Then you get the value from the input field and set it to the other input field.
Form 1:
<form id="form1">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="idOfInput1" required/>
<button id="submit" />
</form>
Script:
$("#submit").click(function () {
$.post("new_cand.php", $("#form1").serializeArray(), function () { /* Nothing to do with new_cand.php data */});
$("#idOfInput2").val($("#idOfInput1").val());
});
Form 2:
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="idOfInput2" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
Attention: this is not tested, requires jQuery and is for a post method
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>
I am doing the form validation using bootstrap form validation. I have two button in the particular form, one is confirm button and another one is submit button. I want to prevent the confirm button from the submission and use it as the validation button. The other button use for only submission if the form was filled correctly. If the form was accepted the confirm button is going to fade out.
<form method="post" action="">
<input type="text" name="name">
<input type="text" name="name">
<input type="submit" name="confirm" value="Confirm">
<input type="submit" name="submit" value="Submit">
</form>
If I use type "button" on Confirm button it will not validate the form. If anyone has any idea please answer. Thank you so much for your answer.
I changed the first button's element from an input into a button.
<form method="post" action="">
<input type="text" name="name">
<input type="text" name="name">
<button name="confirm" type="button">Confirm</button>
<input type="submit" name="submit" value="Submit">
</form>
Give an id to confirm button and to form. I have tested this and it's working.
<form method="post" action="" id="myform">
<input type="text" name="name">
<input type="text" name="name">
<input type="submit" name="confirm" value="Confirm" id="confirmbutton">
<input type="submit" name="submit" value="Submit">
</form>
and in jQuery
<script>
$( document ).ready(function() {
$('#myform').submit(function(event){
var btn = $(this).find("input[type=submit]:focus" ).attr("id");
console.log(btn);
if(btn=="confirmbutton")
event.preventDefault();
});
});
</script>
how to fire submit button click automatically on page load..
<form id="loginForm" name="loginForm" method="post" action="http://www.streamuj.tv/login">
<input type="text" name="username" value="user" size="22" tabindex="3" id="name" class="logintext">
<input name="password" type="password" value="pass" class="logintext" id="password" tabindex="4" size="22">
<input type="submit" name="action_login" value="Spustit zdarma" onclick="return foo();" />
</form>
Add an id to the submit button and fire the click using click().
an example would be like
<input type="submit" id="my_btn" name="action_login" value="Spustit zdarma" onclick="return foo();" />
and fire the click in onload() as below
document.getElementById("my_btn").click();
<input type="button" name="action_login" value="Spustit zdarma" onclick="foo(this.form);" /> //pass your form parameter to your function.
<script type="text/javascript">
function foo(form) {
form.submit(); //submit your form
}
</script>
So your form will be submitted.
insert below in your <head>..</head>
<head>
<!--.... your other code here ... -->
<script src="jquery-1.11.3.min.js"></script>
<script language="javascript">
$(function () {
$('form').submit();
});
</script>
</head>
The code inside $(function() { ... }); will automatic run after page is loaded.
<form id="loginForm" name="loginForm" method="post" action="http://www.streamuj.tv/login">
<input type="text" name="username" value="user" size="22" tabindex="3" id="name" class="logintext">
<input name="password" type="password" value="pass" class="logintext" id="password" tabindex="4" size="22">
<input type="submit" name="action_login" value="Spustit zdarma" onclick="return foo();" />
</form>
<script type="text/javascript">
$(document).ready(function () {
$( "#loginForm" ).submit();
});
</script>