Develop Reference

How to validate an html5 form and show error tips on a button click?

I have a button submit inside a form and just a normal button outside of it. I want to validate a form:
function myButtonHandler(evt) {
if (myForm.checkValidity()) {
alert("yes");
} else {
alert("no");
}
}
This doesn't show the standard error tips inside of input elements when they're invalid when I click on a button -- ones shown by a browser when I click the submit button. How can I get these validation message to pop up when I click on my normal button when the form is invalid?
<form id="my_form">
<input type="text" placeholder="Name" required="true"/>
<input type="submit" id="submit" value="go" />
</form>
No jquery.

You'll need to add the code you've shown to a function that is set up as the click event callback for the normal button:
var myForm = document.querySelector("form"); // reference to form
var btn = document.querySelector("[type='button']"); // reference to normal button
// Set up click event handling function for normal button
btn.addEventListener("click", function(){
if (myForm.checkValidity()) {
alert("yes");
} else {
alert("no");
}
});
<form>
<input type="text" required>
<button type="submit">submit</button>
</form>
<button type="button">Check Validity</button>
If you just want to show the normal browser's validation errors, you can make the second button also a submit button. It's OK for the button to be outside of the form as long as you tie it back to the form with the form attribute.
<form id="theForm">
<input type="text" required>
<button type="submit">submit</button>
</form>
<button type="submit" form="theForm">Check Validity</button>

Submit function jquery not working

I have two trigger click function in my form one is a link and the other one is a submit button.
The link trigger ('.quiz-progress') is working well to submit form with id $("#quiz-question-answering-form") of form, but the button ('#edit-navigation-back') is not. It cannot submit $("#quiz-question-answering-form").submit();
It makes me confuse because when I change the submit function in the button to alert method is working.
so what i need is when user click radio box the button automatically submit it..?
Here's the full code
//fist trigger link link ( working well)
$(".query-once-1-processed").click(function(){
if ( $(this).hasClass("selected") ) {
//do something it does have the protected class!
$("#edit-navigation-skip").hide();
$('#edit-navigation-submit').show();
$(".quiz-progress").click(function(e) {
e.preventDefault(); // if desired...
$("#quiz-question-answering-form").submit();
});
} else{
$('#edit-navigation-submit').hide();
}
});
//second trigger (button) cannot submit the form (not working)
$(".multichoice-row").click(function(){
if ( $(this).hasClass("selected") ) {
$("#edit-navigation-back").click(function() {
//e.preventDefault(); // if desired...
$("#quiz-question-answering-form").submit();
//alert ("ok");
});
}
});
here is the html markup
<form class="answering-form" action="/learning/node/27/take/2" method="post" id="quiz-question-answering-form" accept-charset="UTF-8">
<table>
<tbody>
<tr class="multichoice-row query-once-processed-1"><td width="35"><div class="form-item form-type-radio form-item-question-1-answer-user-answer">
<input type="radio" id="edit-question-1-answer-user-answer-142" name="question1" value="142" class="form-radio" />
</div>
</td><td><p>Hulk</p>
</td> </tr>
</tbody>
</table>
<input type="submit" id="edit-navigation-back" name="op" value="< Soal Sebelumnya" class="form-submit" />
</form>

How to submit form data in ajax using enter in the keyboard

I am creating a comment functionality and below are my code so far.
html
<form action="http://website.com/transaction_items/add_comment" class="" id="form-comment" role="form" method="post" accept-charset="utf-8">
<input type="hidden" name="checklists_item_id" value="6" style="display:none;">
<input type="hidden" name="user_id" value="1" style="display:none;">
<div class="input-group col-xs-12">
<input type="text" name="comment" value="" class="form-control" id="comment-input" placeholder="Enter your comments..">
<span class="input-group-btn">
<button class="btn btn-default" id="doc-comment" type="button">Post</button>
</span>
</div>
</form>
jQuery
This function is called when document is ready.
function comment () {
$('#doc-comment').click(function (e) {
var form_id = '#' + $(this).parents('form').attr('id');
// submit data from the form
submit.send(form_id);
});
}
The problem:
Using the button <button class="btn btn-default" id="doc-comment" type="button">Post</button> to submit data work fine, but
if I use enter in the keyboard, submit.send(form_id); will not do its function, instead the default form submission will execute.
How can I use ajax if use enter in the keyboard to submit form data?

nutshell
$("#form-comment").on('submit', function(evt) {
evt.preventDefault();
// do your ajax stuff here
});
you can then toss the onclick button listener.. as this will handle the button submit as well

There are more ways to submit a form then simply pressing the submit button.
You need to:
Use the forms submit method
Keep the form from doing the full submit.
-
// This will catch the *enter* as well as the submit button
$("#form-comment").on('submit', function(evt) {
evt.preventDefault();
// You can then submit the form via ajax and update things as needed.
});
IF you are going to use a button you should at least do a
<button type="button">...</button>
which behaves differently.

$("#form-comment").keyup(function (e) { // On pressing enter
if (e.keyCode == 13) {
// put your ajax code here
}
});
You may have to disable the default Enter event for the form submit button as well depending on your browser.
So in the Jquery Button click function make sure you have something like
event.preventDefault();

Find all submit buttons of submitted form

I'm trying to disable all submit type elements of a form once it's submitted, to avoid double clicking. But I only want the buttons within the submitted form to be disabled.
For example when clicking the Submit button, only the Submit button and the Another submit to disable (same form) should be disabled. The other submit elements should remain as they were.
The code below disables all submit elements.
$(document).on('submit', function (event) {
event.preventDefault();
var submit_button = $(':submit');
submit_button.prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit">Not part of submitted form (leave enabled)</button>
<form>
<input type="text">
<button type="submit">Part of another Form (leave enabled)</button>
</form>
<form>
<input type="text">
<button type="submit">Submit</button>
<button type="submit">Another submit to disable (same form)</button>
</form>

Well, event.target will refer to the submited form, so you can find all submit buttons inside that form using the :submit selector:
$(document).on('submit', function (event) {
event.preventDefault();
$(':submit',event.target).prop('disabled', true);
});
Check the below snippet example
$(document).on('submit', function(event) {
event.preventDefault();
$(':submit', event.target).prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit">Not part of submitted form (leave enabled)</button>
<form>
<input type="text">
<button type="submit">Part of another Form (leave enabled)</button>
</form>
<form>
<input type="text">
<button type="submit">Submit</button>
<button type="submit">Another submit to disable (same form)</button>
</form>

Detect on form submit then search for the button[type=submit] in that form and disable them.
$('form').on('submit', function (event) {
event.preventDefault();
var submit_button = $(this).find('button[type="submit"]');
submit_button.prop('disabled', true);
});

PHP form submit button but not leave page

I have a button that links to a php file that tracks user's email when clicked, but I don't want the user to leave the page when button is clicked, I just want to change button's value.
This is the html of the form.
<form action="mysql-query.php" method="post">
<input type="text" name="email" style="display:none;">
<input type="submit" value="Press here" id="test" onclick="Press()">
</form>
And this is the script that handles the form:
<script>
function Press() {
var test= document.getElementById("test");
test.value="Thank you";
localStorage.value=("ok");
}
</script>
I put the display:none; because I don't want to display anything but the button and have a way to connect with my php file.
Any ideas?

You need to use ajax:
html:
<form action="mysql-query.php" method="post" onsubmit="return Press(this)">
<input type="text" name="email" style="display:none;">
<input type="submit" value="Press here" id="test">
</form>
js:
function Press(form) {
$.post($(form).attr('action'), function() {
var test= document.getElementById("test");
test.value="Thank you";
localStorage.value=("ok");
});
return false; // prevent submitting the form
}
or better bind submit event using jQuery:
$('form').submit(function() {
$.post($(this).attr('action'), function() {
var test= document.getElementById("test");
test.value="Thank you";
localStorage.value=("ok");
});
return false; // prevent submitting the form
});

Use:
<form action="javascript:void()">
Ok, this thing prevents the form from sending the data anywhere, unless you use "onclick" event on the submit button.

What you can do is remove the type="submit" on the button and replace it with type="button". Next you can do an ajax call to your php and do your magic.