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>

Using Javascript To redirect am embedded Form when submit button is clicked

I want a javascript to redirect the embedded form below when the submit button is clicked
The form is below
<div class="o-form-header"><h2 id="o-form-title">Mail List Subscription Form</h2><p id="o-form-description">Please fill in and submit the form below to subscribe to our mailing list.</p></div> <form action="http://sendfree.com/subscribe.php" method="post" accept-charset="UTF-8"><div class="o-form-row"><label for="FormValue_EmailAddress">Email Address</label><input type="text" name="FormValue_Fields[EmailAddress]" value="" id="FormValue_EmailAddress"/></div><div class="o-form-row"><label for="FormValue_CustomField689">Your Name</label><input type="text" name="FormValue_Fields[CustomField689]" value="" id="FormValue_CustomField689"/></div> <input type="hidden" name="ret_s" value="44" /> <input type="submit" name="FormButton_Subscribe" value="Submit" id="FormButton_Subscribe"/><input type="hidden" name="FormValue_ListID" value="8085"/><input type="hidden" name="FormValue_Command" value="Subscriber.Add" id="FormValue_Command"/></form>
The javascript I use below but it not redirecting to google.com after the submit button is clicked
<script type="text/javascript">
document.getElementById("FORMBUTTON_SUBSCRIBE").onclick=function()
{
window.location.href="http://www.google.com"
}
</script>
Please Help

<script type="text/javascript">
document.getElementById("FORMBUTTON_SUBSCRIBE").onclick=function()
{
location.replace("http://www.google.com");"
}
</script>

document.getElementById("FORMBUTTON_SUBSCRIBE").onclick=function(event)
{
window.location="http://www.google.com";
event.preventDefault();
}
Default action on form button click is submitting of form, so we should prevent it.

I used Eventlistener but not still redirecting, check what may be wrong as am not good in javascript
<script>
document.getElementById("FormButton_Subscribe").addEventListener("click", function(){
window.location.href=" http://www.google .com";
});
</script>

Disabling form inputs/selects/etc on.submit, data is not sent to an iframe

How can i disable inputs/selects/file inputs etc on submit event if the target of the form is an iframe?
Here's the link of a "working" example of the issue i'm having.
Here you can see the code.
<?php
if (isset($_REQUEST['iframe'])) {
if (isset($_POST['name_1'])) {
echo 'POST PIENO<br />';
} else {
echo 'POST VUOTO<br />';
}
echo '<pre>'.print_r($_POST, true).'</pre>';
die();
}
?>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" language="javascript"></script>
<script>
function disableOnSubmit() {
$(this).attr('disabled', true);
$('#button2').attr('disabled', false);
$('#form').submit(function(e){
$(this).find('input').attr('disabled', true);
});
}
function enableOnSubmit() {
$(this).attr('disabled', true);
$('#button1').attr('disabled', false);
$('#form').find('input').attr('disabled', false);
$('#form').unbind();
}
$(document).ready(function(){
$('#button1').click(disableOnSubmit);
$('#button2').click(enableOnSubmit);
});
</script>
</head>
<body>
<input type="button" id="button1" value="Disabled on Submit" />
<input type="button" id="button2" disabled value="Enabled on Submit" />
<form action="<?=$_SERVER['PHP_SELF']?>?iframe" method="post" id="form" target="iframe">
<input type="text" name="name_1" value="value_1" />
<input type="text" name="name_2" value="value_2" />
<input type="text" name="name_3" value="value_3" />
<input type="hidden" name="iframe" value="true" />
<input type="submit" value="submit" />
</form>
<iframe src="<?=$_SERVER['PHP_SELF']?>?iframe" name="iframe" />
</body>
</html>

If inputs are disabled as per the HTTP specification the data will not form part of the POST/GET request. Instead you are probably looking for the readonly attribute -- this will disable the inputs and still post the data.
17.12 Disabled and read-only controls: http://www.w3.org/TR/html401/interact/forms.html#h-17.12
In this example, the INPUT element is disabled. Therefore, it cannot receive user input nor will its value be submitted with the form.
<INPUT disabled name="fred" value="stone">
Edit
Your submit event is firing BEFORE the form is submitted, inside that function your disabling the inputs which means once it's exited that function, and when it goes to submit, those inputs are disabled therefore the data is not sent.
There is not a simple way to detect when a form is submitted (aside from using ajax and a complete event handler) -- however you could simulate this by listening to the load event on the iframe, and then disable the parents input elements.
$('iframe').on('load', function() {
$(this.ownerDocument.body).find('input').attr('disabled', true);
});
However if your trying to stop multiple submissions, this won't help as your form submit request would have already been handled by the time the load event fires.
If the above is your goal, I would suggest to just disable the submit button once the form is submitted (and maybe add a loading icon to show to the user something is happening etc).

Add text to parameter before sumbit form

I have a form like this
<form action="http://example.com/search" method="get">
<input type="text" name="q">
<input type="submit">
</form>
When I fill parameter q with some text (e.g. 'AAAAA') and submit this form, the url become to http://example.com/search?q=AAAAA.
But, I want add some text to parameter q with other text before submit. For example, if user input 'AAAAA' the parameter become 'AAAAA BBBBB CCCCC'. So the url become to http://example.com/search?q=AAAAA+BBBBB+CCCCC.

Use JavaScript to modify the value before submit. Add an onsubmit event to the form which will get fired when you submit the button. Like this...
<form action="http://example.com/search" method="get" onsubmit="return addText();">
<input type="text" name="q" id="q">
<input type="submit">
</form>
<script>
function addText(){
document.getElementById("q").value += " BBBB CCCC"; // Whatever your value is
return true;
}
</script>

Watch my example on jsFiddle http://jsfiddle.net/ilya_kolodnik/N9gWm/
var text_to_append = "test";
$('form').submit(function(obj) {
obj.preventDefault();
alert($("input[name='q']").val());
$("input[name='q']").val($("input[name='q']").val() + text_to_append);
this.submit();
});
At first we handle 'submit' action on form. To prevent form submit we use preventDefault(); Than we modify our query and submit the form.

How to show/hide a form on button click in jquery?

I have two forms in my page. I hide the form 2 using HTML inline style.
<form id="productionForm" name="productionForm" method="POST" style="display:none;">
I have input button on form 1.
<input id="buttonProductionSummary" class="buttonProductionSummary" type="submit" value="Submit" />
I have JQuery code to load the form 2 on button click of form 1. My JQuery code is as follows.
<script type="text/javascript">
$(document).ready(function(){
$("#buttonProductionSummary").click(function() {
$("#productionForm").show();
});
});
</script>
When i click the button in the form one, the page get reloaded again, so the form 2 appears and disappers again. How to can i make the form 2 to appear when i click button on form 1.

You need to prevent the default behavior of the form:
$("#buttonProductionSummary").click(function(e) {
$("#productionForm").show();
e.preventDefault();
});

The problem is that clicking the button in form 1 is triggering a submission of the form (default event)... Hence, the page reloading. You should prevent that by using the submit event as your trigger, handle the form using AJAX and output the result to #productionForm before displaying:
$("#form1").submit(function() {
/* AJAX calls and insertion into #productionForm */
$("#productionForm").show();
return false;
});

as per my requirement i tried to display the form which is to be edit and hide all remaining forms using the following way;
<html>
<head>
<script>
$(document).ready(function(){
$("#what").click(function() { //event called
$(".hello").hide(); // to hide all forms
$('#ayyappa1').show(); //to dispaly needed form only
return false //option to stop
});
});
</script>
</head>
<body>
<form id ="ayyappa1 " class ="hello"> // declare class for every form
<input type="check" class="what"> // trigger of click event
</form>
<form id ="ayyappa2 " class ="hello">
<input type="check" class="what">
</form>
<form id ="ayyappa3 " class ="hello">
<input type="check" class="what">
</form>
<form id ="ayyappa4 " class ="hello">
<input type="check" class="what">
</form>
</body>
</html>

None of the answers above works, so I figured it out myself. This code works like a charm.
<button id="btn" class="editbutton" >Edit your Profile</button>
<form id="editForm" action="" method="post" name="editForm">
<input type="text" name="txtname" placeholder="enter your name">
</form>`
<script type="text/javascript">
$(document).ready(function(){
$("#editForm").hide();
$("#btn").click(function(e) {
$("#editForm").show();
$("#btn").hide();
});
});
</script>