I have the following code to submit a form. If I use the event listener function name as submit, the form does not get submitted. If I use any other name, it will. Should not I use any HTML5 keyword like submit in JavaScript as function name? In this case submit is a HTML5 keyword which can be used as a type of any INPUT element.
<form onsubmit="submit()">
<input type="email" name="email" />
<input type="submit"/>
</form>
function submit() {
var f = $('form').serialize();
alert(f);
}
You're already using jQuery here so a more elegant solution to the whole problem would be:
// HTML
<form name="my-form">
<input type="email" name="email" />
<input type="submit"/>
</form>
Then have a separate JS file:
//Js
$(document).ready(function(){
$('form[name="my-form"]').submit(function(e){
var f=$(this).serialize();
alert(f);
});
});
This also gives you extra options to prevent the form from submitting cleanly; add this at the end of the submit(){ } function.
e.preventDefault();
Update
As the OP pointed out the original question was whether the function name submit() can be used as the onsubmit attribute in a form.
This answer suggests that it cannot, as carrying out the following:
document.form['my-form'].submit();
Would be a valid way to trigger submission of the form; thus that method name can't then be included in the HTML. I am searching now for a better source to confirm this for sure I have found a similar source on Mozilla Developer Network which confirms the code above but doesn't explicitly define that the keyword submit cannot be used.
You know, there is another way to do this. You could separate your html from javascript enritelly.
<form id="form">
<input type="email" name="email" />
<input type="submit"/>
</form>
//Rest of your code
<script>
$(function() {
$('#form').submit(function() {
var f = $('#form').serialize();
// do your stuff
return true; // return false to cancel form action
});
});
</script>
Related
I have a simple form and the problem is that the validation happens after the click event is registered, thus triggering the doSomething() function. I would like the email validation to stop the user from submitting the form so that the function will not be triggered. How would I do that?
<form>
<input type="email" placeholder="your email here" required/>
<button type="submit" onClick="doSomething()">Submit</button>
</form>
<script>
function doSomething(){
// gets triggered even when the email does not pass validation
console.log('Doing work..');
}
</script>
JSFiddle
You could use the onSubmit attribute in the form, which will only call your function when all fields are validated.
<form onSubmit="doSomething()">
<input type="email" placeholder="your email here" required/>
<input type="submit"/>
</form>
<script>
function doSomething(){
// gets triggered even when the email does not pass validation
console.log('Doing work..');
}
</script>
View this question to understand how to stop the form from submitting.
Thanks,
For a webapp i'm currently developping, i need to hide the standard IOS keyboard when focusing on a textbox.
This can be done simply by adding the 'readonly' tag, and opening my custom input using a onClick function.
<form method="post" action="" enctype="multipart/form-data">
<input type="text" id="test123" onClick="doSomething();" readonly required />
<button type="submit" value="submit">
Save
</button>
</form>
(JSFiddle)
This works. Partially. By enabling the readonly i'm able to keep the keyboard hidden. But, another problem rises. When using the readonly, 'required' is not called. You can submit the form with an empty field, because its assumed a readonly field contains what it has to contain.
How can we possibly keep the readonly, and the required? We can't. We need a workaround.
Edit:
In regards to the possible duplicate.
The answer in THIS post is to add JQuery readonly with preventDefault. The problem with this is, that on ios devices the keyboard will stil open, which is ultimately our goal. The keyboard must not open, and still it should be a required field. In theorie, i think this can be achieved using Javascript validation. But that means, my submit button will be calling a js function, while it has to be calling our php function to submit our data.
Here's how i solved this problem. I tried to make a JS validator, as simple as possible.
$('#dataInput').submit(function (e) { //Form is submitted, it calls this function automatically
var empty = 0;
$('input[type=text]').each(function(){ //Check each input (had to be done like this, because i dont know the amount of input beforehand)
if (this.value == "") { //The textbox is empty
empty++;
}
})
if(empty === 0){ //No empty textboxes
}else{
alert(empty + ' empty input(s)'); //There are empty textboxes
e.preventDefault(); //Prevent the submit from happening
}
});
You can check out the fiddle here
You can set and remove READONLY before enter or leave the field.
$(".datepicker").on("touchstart", function(e) {
$(".datepicker").attr("readonly", "readyonly")
})
$(".datepicker").on("blur", function(e) {
$(".datepicker").removeAttr("readonly")
})
First Approach: You can assign a dummy value and then check in the backend whether the value is changed or not, if it is not changed, you can show an error message. Other wise save into database.
<form method="post" action="" enctype="multipart/form-data">
<input type="text" value="dummy" id="test123" onClick="doSomething();"
readonly required />
<button type="submit" value="submit">
Save
</button>
</form>
Second approach: when you fire the onclick event of the input field, you can remove the readonly attribute using the following code.
function doSomething()
{
$("#test123"). removeAttr("readonly");
}
I want to have a box in HTML such as this one:
Particular thing, I need to do this using only HTML (no PHP or particular langage requiring server, or particular installation).
The reason for this is that it is meant to be used for HTML pages that will be opened from a USB key, not a website, and it has to be usable by any non-expert person. So no web-server configuration or installation required, such as what would be required for PHP, if I am right.
Think about not using a Form, but just using a Javascript function.
I'm not sure if this probably is not possible due to security reasons, but it could be a solution...
function redirect() {
var input = document.getElementById("stuff");
window.location = input.value;
}
<span>NOM:</span>
<input type="text" id="stuff"></input>
<br>
<input type="button" onclick="redirect()" value="Submit"></input>
I managed to do what I needed thanks to Anders Anderson's answer. Here is the code for those interested in doing similar thing. First, for the Javascript
function redirect() {
var answergiven = document.getElementById("answergiven");
var realanswer = document.getElementById("realanswer");
var nextpage = document.getElementById("nextpage");
if(answergiven.value.toLowerCase() == realanswer.value.toLowerCase()){
window.location = nextpage.value;
}
else{
alert('Wrong answer, please try again.');
}
return false; // prevent further bubbling of event
}
And for the HTML part, there are two hidden variables that determine the real answer, and the next page to go to, and the text field for the answer
<form name="myform" onSubmit="return redirect()">
<span>Réponse:</span>
<input type="text" id="answergiven" />
<input name="tosubmit" type="submit" value="Submit" />
<input type="hidden" id="realanswer" value="theanswer" />
<input type="hidden" id="nextpage" value="thenextpage.html" />
</form>
I have Some text boxes and one submit button. I have Used HTML5 'required' validation. Its working fine. Now I want to call a function in button click when HTML5 validation does not find any Error. When The required field is not provided the button click will not call the function.
You can use the form.onsubmit handler. Assuming the form's ID is form:
var form = document.getElementById("form");
form.onsubmit = function() {
//Pre-submission validation.
//Return true or false based on whether the validation passed.
//return false will prevent the submission the form.
};
You're going to need some extra help to do this, it could be in the form of plain javascript. Personally, I'd use jQuery to help out as it will make things easier for you and account for any cross-browser consistencies. Whether or not you want to use jQuery your is choice, whether it's appropriate only for this is another conversation, the following example is just a demonstration.
Here's a hypothetical example using jQuery that achieves your validation listening functionality:
HTML
<form>
<input type="text" class="input-text" required>
<input type="text" class="input-text" required>
<input type="submit" id="submit" class="input-button" disabled>
</form>
JS
$textInputs = $('input.input-text');
$textInputs.on('keyup', function() {
var $validTextInputs = $('input.input-text:valid'),
$submit = $('#submit');
console.log($textInputs.length, $validTextInputs.length);
if($textInputs.length === $validTextInputs.length){
//all text fields are valid
$submit.attr('disabled', null);
} else {
//not all text fields are valid
$submit.attr('disabled', '');
}
});
CSS (only let's us know, visually, when the input is valid)
.input-text:valid {
background: green;
}
See the example in action here: http://jsfiddle.net/m6QXc/
Use jquery to trigger function after HTML5 form validation
<form id="myForm">
<input type="text" class="input-text" required>
<input type="submit" id="submit" class="input-button" disabled>
</form>
$("myForm").submit(function(){
// Your code
})
Well, you could try this: fiddle example extend it as you need, used jQuery though. You can add whatever you want inside:
$('#exampleForm').submit(function(e){
e.preventDefault();
// here you can call your own js methods, send form with ajax?
// or what ever you want
});
I am trying to create a very simple form with a little bit of extra code to get the results as described below: the problem is I don't know how to go about doing it.
What I am trying to achieve:
I have a form which has one text input box with the name 'url'. I want the user to be able to input a number into the box. When the user submits the form they should be redirected to a new website. The new website's URL will be based on the number inputted into the form.
The first part of the URL will always be: http://name.com/
Then the number that the user inputted will be attached to the end. So if 123456 is entered into the form then on submission of the form the user would be taken to http://name.com/123456
How can I get this working? I am guessing it will require JavaScript or something.
<script>
function process()
{
var url = "http://name.com/" + document.getElementById("url").value;
location.href = url;
return false;
}
</script>
<form onSubmit="return process();">
URL: <input type="text" name="url" id="url">
<input type="submit" value="go">
</form>
You can add onsubmit="this.action='http://google.com/'+this.fieldName.value;" to your tag.
This should do it:
<script type="text/javascript">
function goToPage() {
var page = document.getElementById('page').value;
window.location = "http://name.com/" + page;
}
</script>
<input type="text" id="page" />
<input type="submit" value="submit" onclick="goToPage();" />