I have a typical form:
<form action="" accept-charset="utf-8" method="post">
<textarea name="content"></textarea>
</form>
and an not-inside-a-form element:
<input type="password" name="password">
How do I add the value of password into the form when I submit the form?
$('form').submit(function(){
//hmmm
});
Create a hidden field in the form and copy the password field value to that field on submit.
Like this.
<form action="" accept-charset="utf-8" method="post">
<textarea name="content"></textarea>
<input type="hidden" name="password" id="ps">
</form>
<input type="password" name="password" id="ps1">
And in on submit function.
$('form').submit(function(){
$('input#ps').val($('input#ps1').val());
return true;
});
The not-yet-supported-but-HTML5-compliant way to do this "correctly" is to give your <input> element a [form] attribute:
<form id="foo">
...stuff...
</form>
<input type="password" id="bar" form="foo" />
Eventually you may be able to use this as a solution, but until more browsers support the [form] attribute, you'll have to polyfill it with JavaScript.
$('form').submit(function(){
var password = $('input[type="password"]');
password.appendTo($(this));
//or $(this).append(password);
});
include a hidden input element inside of the form,
on the outer input's change event, assign the inner input the outer inputs value.
<form action="" accept-charset="utf-8" method="post">
<textarea name="content"></textarea>
<input type="hidden" id="inner" />
</form>
<input type="password" name="password" >
<script type="text/javascript">
$(function(){
$('#outer').change(function(){
$('#inner').val($(this).val());
});
});
</script>
Use hidden input field inside form like this:
ex : <input type="hidden" name="pass">
When you submit the form like this :
$('form').submit(function(){
<!-- Save the value of password into the hidden field
Note : Password here should just be one field in that page -->
$('input[name="pass"]').val($('input[type="password"]').val());
return true;
});
Related
i have created form with basic verification in html like this.
<form class="" action="submit/save" method="POST" enctype="multipart/form-data" id="submit_form">
<input class="form-control" name="name" id="name" required>
</form>
<a onclick="submitProduct()">Submit</a>
function submitProduct() {
$('#choice_form').submit();
}
then after click the <a> tag i have submit form as the
$('#submit_form').submit();
but required validations not sporting when submitting
Your code won't submit anything at all, because it's using the wrong ID to identify the form. But assuming that was just a typo then...
Instead of using an anchor tag, just use a regular submit button, then you won't need any script:
<form class="" action="submit/save" method="POST" enctype="multipart/form-data" id="submit_form">
<input type="text" class="form-control" name="name" id="name" required>
</form>
<input type="submit" form="submit_form">Submit</input>
i have entered this jQuery code,
$(document).ready(function(){
$('#submit_form').submit(function(e){
if($(this).closest('form')[0].checkValidity()){
if(submitProduct() == 1 ){
return true;
}else {
return false;
}
}
});
});
submitProduct() is a my another custom function if that function done i have submitted form, if not done then form submission action killed.
$(document).ready(function(){ });
it's helped me to use form validations also like 'required'
I'm trying to make a login page and have the following:
<div id="loginField">
<input id="username" type="text" name="user" required></input>
<input id="password" type="password" name="password" required></input>
<input id="submit" type="submit" name="submit" value="Login"></input>
</div>
I made sure that the username and password fields are required. When the login is successful (for this sake, let's just say that both fields are not empty) a login disappears and another view appears. Anyway, I checked to see if the login button is pressed with JQuery:
$(function(){
$('#submit').on('click', function(){
$('#loginField').hide();
$('#differentView').show();});
The problem is that when the login button is clicked, the required attributes gets ignore and the next view is shown. How do I make sure that the required attributes are not ignored when the login button is clicked?
A crude way of doing it...
<div id="loginField">
<input id="username" type="text" name="user" class="required">
<input id="password" type="password" name="password" class="required">
<input id="submit" type="submit" name="submit" value="Login">
</div>
$('#submit').on('click', function(e){
e.preventDefault();
var isReady = true;
$('.required').each(function(){
if (this.value === '') {
isReady = false;
return;
};
});
if (isReady) {
// submit form
};
});
You can use this library: Parsley. It is a javascript form validation library and it is very easy to use and you can customize it for your own means. Good luck!
Instead of handling onclick on button, you can put input fields into the form...
<form action="post" method="post" id="loginField">
<input id="username" type="text" name="user" required></input>
<input id="password" type="password" name="password" required></input>
<input id="submit" type="submit" name="submit" value="Login"></input>
</form>
... and in jQuery you can handle on submit action like this:
$(document).ready(function(){
$('#loginField').on('submit', function(event){
event.preventDefault();
var [username password] = $(this).serializeArray(),
username = username.value,
password = password.value;
/* some validations */
});
});
event.PreventDefault prevents browser from subbmiting so your page won't be refresh. serializeArray returns an array of objects (key-value) that's why you have to use .value
The required attributes are ignored because the input elements are not inside an html form element
To use the HTML5 input valuation attributes (required, minlength... etc)
The inputs should be grouped inside a form element, and you can listen for the form submit event, that is triggered by default when the user press enter (while focus is on a field inside the form) or clicks the submit button (input or button with type="submit") that is also wrapped inside the form
HTML
<form id="loginForm">
<input id="username" type="text" name="user" required />
<input id="password" type="password" name="password" required />
<input id="submit" type="submit" name="submit" value="Login" />
</form>
Javascript
$(function(){
$('#loginForm').on('submit', function (event) {
event.preventDefault(); // prevent default form submit page reload
console.log('I will enter this handler only on valid form')
$('#loginForm').hide();
$('#differentView').show();
})();
Here is a basic plunker with 2 examples https://plnkr.co/edit/I0vUMSeOlrjlYYu4VofU?p=preview
using the default html5 validation
using Parsley
I have an input field where user will enter isbn number based on the input number i need to populate two input field i.e book title and book author name i am calling a javscript function on onblur of input and i am getting the correct value but my problem is that if user will not move their cursor from the input field and click on submit button then how i will populate these two input field in these scenario onblur is not working
<form name="post" id="post" method="post" action="#">
<input type="text" name="price" id="price">
<input type="text" name="isbn_number" id="isbn_number" onblur="getdetail()">
</form>
Pick your preferred solution and adapt it to your website:
1) If your browser supports it, the easiest is make all your fields required and use onchange instead of onblur. This will force the user to enter an isbn, which will trigger the onchange containing more inputs with required.
<form name="post" id="post" method="post" action="#">
<input type="text" name="price" id="price" required>
<input type="text" name="isbn_number" id="isbn_number" onchange="getdetail()" required>
</form>
2) Do manual submitting after checking fields.
<form name="post" id="post" method="post" action="#">
<input type="text" name="price" id="price">
<input type="text" name="isbn_number" id="isbn_number" onblur="getdetail()">
<input type="submit">
</form>
<script>
document.querySelector('input[type="submit"]').addEventListener('click', function ( event ) {
var valid = false;
event.preventDefault();
// ...
// add validation code here.
// ...
if (valid) document.querySelector('#post').submit();
});
</script>
3) Only activate the submit if everything is valid.
<form name="post" id="post" method="post" action="#">
<input type="text" name="price" id="price">
<input type="text" name="isbn_number" id="isbn_number">
<input type="submit" disabled="disabled">
</form>
<script>
var valid = false;
document.querySelector('#post').addEventListener('change', function ( event ) {
if (event.target.name === 'isbn_number') getdetail();
// ...
// add validation code
// if (stuff && stuff && stuff) valid = true;
if (valid) document.querySelector('input[type="submit"]').removeAttribute('disabled');
});
</script>
<form ... onsubmit="return false">
<input type="text" name="location" ...>
<input type="url" ... required>
...
</form>
Now, if I enter a location and hit ENTER, the browser tells me that an URL is required which is not an expected or desired outcome. The ENTER should just be ignored.
Question
How can I prevent the browser from checking the required field after hitting ENTER in the "location" input field and only let the browser check the "url" field when submitting the form with JavaScript using form.submit()?
You need to stop the default behavior of enter button for your form elements.
Lets have an example:
HTML5 form as
<form id="form">
<input type="text" name="test1" id="test1" required/>
<input type="text" name="test2" id="test2" required/>
<input type="submit" value="Test"/>
</form>
Then apply below code
$(document).ready(function() {
$(form).find('input').on('keydown', function(e){
if(e.which == 13) // KEY.ENTER = 13
e.preventDefault();
});
});
Based on above scenario, here is the fiddle.
This is what I did now and what worked (using jQuery, where $form represents the ):
$form.find('input').on('keydown', function(e){
if(e.which == KEY.ENTER) // KEY.ENTER = 13
e.preventDefault();
});
You can use the novalidate attribute in your form element:
<form method="post" action="..." novalidate>...</form>
There is a specific method for handle a "submit".
Here's here!
I'm currently working on a basic form. When you hit the submit button, it should first change the value of a field, and then submit the form as usual. It all looks a bit like this:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
And this is how far I've come with the JavaScript code. It changes "myinput"'s value to 1, but it does not submit the form.
function DoSubmit(){
document.myform.myinput.value = '1';
document.getElementById("myform").submit();
}
You could do something like this instead:
<form name="myform" action="action.php" onsubmit="DoSubmit();">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" />
</form>
And then modify your DoSubmit function to just return true, indicating that "it's OK, now you can submit the form" to the browser:
function DoSubmit(){
document.myform.myinput.value = '1';
return true;
}
I'd also be wary of using onclick events on a submit button; the order of events isn't immediately obvious, and your callback won't get called if the user submits by, for example, hitting return in a textbox.
document.getElementById("myform").submit();
This won't work as your form tag doesn't have an id.
Change it like this and it should work:
<form name="myform" id="myform" action="action.php">
Here is simple code. You must set an id for your input. Here call it 'myInput':
var myform = document.getElementById('myform');
myform.onsubmit = function(){
document.getElementById('myInput').value = '1';
myform.submit();
};
No. When your input type is submit, you should have an onsubmit event declared in the markup and then do the changes you want. Meaning, have an onsubmit defined in your form tag.
Otherwise change the input type to a button and then define an onclick event for that button.
You're trying to access an element based on the name attribute which works for postbacks to the server, but JavaScript responds to the id attribute. Add an id with the same value as name and all should work fine.
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" id="myinput" value="0" />
<input type="text" name="message" id="message" value="" />
<input type="submit" name="submit" id="submit" onclick="DoSubmit()" />
</form>
function DoSubmit(){
document.getElementById("myinput").value = '1';
return true;
}
My problem turned out to be that I was assigning as document.getElementById("myinput").Value = '1';
Notice the capital V in Value? Once I changed it to small case, i.e., value, the data started posting. Odd as it was not giving any JavaScript errors either.
I have done this and it works for me.
At first you must add a script such as my SetHolderParent() and call in the html code like below.
function SetHolderParent(value) {
alert(value);
}
<input type="submit" value="Submit" onclick="SetHolderParent(222);" />
You can use the onchange event:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" onchange="this.form.submit()"/>
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
This might help you.
Your HTML
<form id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="save()" />
</form>
Your Script
<script>
function save(){
$('#myinput').val('1');
$('#form').submit();
}
</script>