i have form that's announcing user for error, warning or new content on my site. I have three buttons on class ann-right and each button have its color. When i click the button, the button input on class ann-left changed to color were clicked. What i want to ask is, how do i submit the form depend of color selected. Red is for "Error announcement", Green is for "Warning announcement" and Blue is for "New announcement". Red = #D91E18
Green = #3FC380
Blue = #5BBBFF
<div class="ann-left">
<form method="post" id="ann">
<input id="announce-text" type="text" name="" placeholder="What's new?"></input>
<input id="submit-post" type="button" name="" onsubmit="submitform();" value="Post"></input>
</form>
</div>
<div class="ann-right">
<button id="red" onclick="color1()" class="tooltip color" title="Error!"></button>
<button id="green" onclick="color2()" class="tooltip color"title="Warning!" ></button>
<button id="blue" onclick="color3()" class="tooltip color" title="New!"></button>
</div>
<script>
function color1() {
document.getElementById("submit-post").style.backgroundColor = "#D91E18";
sessionStorage.setItem('col1', "#D91E18");
}
function color2() {
document.getElementById("submit-post").style.backgroundColor = "#3FC380";
sessionStorage.setItem('col2', "#3FC380");
}
function color3() {
document.getElementById("submit-post").style.backgroundColor = "#5BBBFF";
sessionStorage.setItem('col3', "#5BBBFF");
}
color1(sessionStorage.getItem('col1'));
color2(sessionStorage.getItem('col2'));
color3(sessionStorage.getItem('col3'));
function submitform() {
}
</script>
You can use one input hidden to pass the type of annoncement to your form.
Then you submit it normally.
<div class="ann-left">
<form method="post" action="announcement_post.php" id="ann">
<input type="text" name="announcement_description" id="announce-text" placeholder="What's new?">
<input type="hidden" name="announcement_type" id="announcement_type">
<input id="submit-post" type="submit" name="" value="Post">
</form>
</div>
<div class="ann-right">
<button id="red" onclick="color1()" class="tooltip color" title="Error!"> </button>
<button id="green" onclick="color2()" class="tooltip color"title="Warning!" > </button>
<button id="blue" onclick="color3()" class="tooltip color" title="New!"> </button>
</div>
<script>
function color1() {
document.getElementById("submit-post").style.backgroundColor = "#D91E18";
document.getElementById("announcement_type").value="Error announcement";
sessionStorage.setItem('col1', "#D91E18");
}
function color2() {
document.getElementById("submit-post").style.backgroundColor = "#3FC380";
document.getElementById("announcement_type").value="Warning announcement";
sessionStorage.setItem('col2', "#3FC380");
}
function color3() {
document.getElementById("submit-post").style.backgroundColor = "#5BBBFF";
document.getElementById("announcement_type").value="New announcement";
sessionStorage.setItem('col3', "#5BBBFF");
}
color1(sessionStorage.getItem('col1'));
color2(sessionStorage.getItem('col2'));
color3(sessionStorage.getItem('col3'));
</script>
announcement_post.php:
<?php
if(!isset($_POST["announcement_type"])) die("Post was not sent.");
echo $_POST["announcement_type"];
echo '<br>';
echo $_POST["announcement_description"];
There are a couple of issues here. First you are not practicing DRY (Dont Repeat Yourself), which is very important when creating functions. Create one function that handles your setColor function and send the selected colors on the actual buttons clicked. Once thats done, you can focus on "submitting your form". When you submit a form it normally expects you to have a buttom with type submit. Since you dont have that, it will not submit the form. What I would do is place your onsubmit() on the form element as such:
<div class="ann-left">
<form method="post" id="ann" onsubmit="return submitform(this);">
<input id="hidden-input" type="hidden" name="color_selected" value="">
<input id="announce-text" type="text" name="" placeholder="What's new?">
<input id="submit-post" type="submit" name="" value="Post">
</form>
</div>
<div class="ann-right">
<button id="red" onclick="setColor('#D91E18')" class="tooltip color" title="Error!"></button>
<button id="green" onclick="setColor('#3FC380')" class="tooltip color"title="Warning!" ></button>
<button id="blue" onclick="setColor('#5BBBFF')" class="tooltip color" title="New!"></button>
</div>
<script>
var $btn = document.getElementById("submit-post");
var $hidden = document.getElementById("hidden-input");
function setColor(color) {
$btn.style.backgroundColor = color;
$hidden.value = color;
}
function submitform(form) {
alert(form.color_selected.value);
return false;
}
</script>
function color1() {
document.getElementById("submit-post").style.backgroundColor = "#D91E18";
sessionStorage.setItem('col1', "#D91E18");
document.getElementById("hidden_field").value = 'error';
submitform();
}
function color2() {
document.getElementById("submit-post").style.backgroundColor = "#3FC380";
sessionStorage.setItem('col2', "#3FC380");
document.getElementById("hidden_field").value = 'warning';
submitform();
}
function color3() {
document.getElementById("submit-post").style.backgroundColor = "#5BBBFF";
sessionStorage.setItem('col3', "#5BBBFF");
document.getElementById("hidden_field").value = 'new';
submitform();
}
color1(sessionStorage.getItem('col1'));
color2(sessionStorage.getItem('col2'));
color3(sessionStorage.getItem('col3'));
function submitform() {
var form = document.getElementById("ann");
var data = new FormData(form);
console.log(data);
//var req = new XMLHttpRequest();
//eq.send(data);
form.submit();
}
#red {
background: #D91E18;
}
#green {
background: #3fc380;
}
#blue {
background: #5bbbff;
}
<form method="post" id="ann">
<div class="ann-left">
<input id="announce-text" type="text" name="" placeholder="What's new?" />
<input id="submit-post" type="button" name="" onsubmit="submitform();" value="Post" />
<input type="hidden" id="hidden_field" />
</div>
<div class="ann-right">
<button id="red" onclick="color1()" class="tooltip color" title="Error!"></button>
<button id="green" onclick="color2()" class="tooltip color" title="Warning!"></button>
<button id="blue" onclick="color3()" class="tooltip color" title="New!"></button>
</div>
</form>
Related
I create an HTML form with Admin Button and in the .js file I wrote a click Event in Admin Button to change from:
style='display:none'
to:
style='display:block'
but it's not working. Why?
var adminMode = {
init: function() {
this.adminButton = document.getElementById('admin-button');
this.adminForm = document.getElementById('admin-form');// form ID
this.allForm = document.getElementById('all-form'); //div ID
this.adminButton.addEventListener('click', function (allForm) {
this.adminForm.style.display = 'inline'
});
},
HTML
<button id='admin-button'>Admin</button> <br><br>
<div id='all-form'>
<form id='admin-form' style='display:none'>
Name:<br>
<input type="text" name="firstname" value=" "> <br><br>
Img URL:<br>
<input type="text" name="lastname" value=" "> <br><br>
<button> Save</button>
<button>Cancel</button>
</form>
</div>
var adminMode = { init: function() {
this.adminButton = document.getElementById('admin-button');
//this.adminForm = document.getElementById('admin-form');// form ID
//this.allForm = document.getElementById('all-form'); //div ID
this.adminButton.addEventListener('click', function (event) {
document.getElementById('admin-form').style.display = 'inline'
});
},
That what you mean
init: function() {
document.getElementById('admin-button').addEventListener('click', function () {
document.getElementById('allForm').style.display = 'block';
});
}
OR admin-form
init: function() {
document.getElementById('admin-button').addEventListener('click', function () {
document.getElementById('admin-form').style.display = 'block';
});
}
If you write function() the this is not known....
For your Edit: put the function in script no init()
function dispaly(){
document.getElementById('admin-form').style.display = 'block';
}
<button id='admin-button' onclick="dispaly()">Admin</button> <br><br>
<div id='all-form'>
<form id='admin-form' style='display:none'>
Name:<br>
<input type="text" name="firstname" value=" "> <br><br>
Img URL:<br>
<input type="text" name="lastname" value=" "> <br><br>
<button> Save</button>
<button>Cancel</button>
</form>
</div>
I have this sample:
link
CODE HTML:
<form class="add-patient">
<fieldset style="display: block;">
<label for="new_exam">New exam</label>
<input type="text" name="new_exam" id="new_exam" value="">
</fieldset>
<fieldset style="display: block;">
<label for="x_ray">X ray</label>
<input type="text" name="x_ray" id="x_ray" value="">
</fieldset>
<input type="button" class="btn btn-submit" onclick="sendForm();" value="Create report">
</form>
CODE JS:
function sendForm() {
var status_form = false;
$(".add-patient input").each(function(){
if($(this).val() == ""){
status_form = true;
}
});
console.log(status_form);
var createdBy = jQuery('#created_by').val();
if( status_form )
{
alert('Fill at least one field');
}else{
alert("now it's ok");
}
}
I want to do a check ... if an input is complete when displaying the message "it; s ok" ... otherwise displaying another message
probably means the code clearly what they want to do.
You can help me with a solution please?
Thanks in advance!
Use .filter to get the length of the input elements having value as ''
Try this:
function sendForm() {
var elem = $(".add-patient input[type='text']");
var count = elem.filter(function() {
return !$(this).val();
}).length;
if (count == elem.length) {
alert('Fill at least one field');
} else {
alert("now it's ok");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="add-patient">
<fieldset style="display: block;">
<label for="new_exam">New exam</label>
<input type="text" name="new_exam" id="new_exam" value="">
</fieldset>
<fieldset style="display: block;">
<label for="x_ray">X ray</label>
<input type="text" name="x_ray" id="x_ray" value="">
</fieldset>
<input type="button" class="btn btn-submit" onclick="sendForm();" value="Create report">
</form>
I want when i clicked on the Question button on the first pic, the form in the second pic to appear and the button to be hidden and when i click on the (X) on the top left of the form on the second pic to close the form and the Question button to appear again. How can i achieve that using Javascript or Jquery or any possible method.
<script type="text/javascript">
$(function(){
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
}
function hide() {
myDiv.style.visibility = "hidden";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
button.addEventListener("click", toggle, false);
});
</script>
<div class="container">
<div id="myDiv">
<button type="button" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p>QUESTION</p>
<form action="https://chat.rbb.bg/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\nAre you sure?");">
<span class="box1">Theme</span><input type="text" name="extensionField_Title" id="box1"><br>
<span class="box2">Name</span><input type="text" name="extensionField_Name" id="box2"><br>
<span class="box3">Теlephone</span><input type="text" name="extensionField_PhoneNumber" id="box3"><br>
<span class="boxinfo">About</span>
<select name="extensionField_ccxqueuetag" id="boxinfo"><br>
<option value="Chat_Csq23"></option>
</select><br>
<input type="submit" value="SUBMIT" id="boxbuton">
<input type="hidden" name="author" value="Customer"><br>
</form>
</div>
<input id="info" type="button" onClick = "this.style.visibility= 'hidden';" value="QUESTION?" class="switchbuton">
</div>
You almost got it, just need to make a few changes:
Add an Id for the xButton
<button type="button" class="close" data-dismiss="myDiv" aria-label="Close" id="xButton"><span aria-hidden="true">×</span>
</button>
Remove onclick in the html Question button
<input id="info" type="button" value="QUESTION?" class="switchbuton">
Amd add a hanlder for the X button
$(function(){
var button = document.getElementById("info");
var xButton = document.getElementById("xButton");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
//hidding Question button
button.style.visibility = "hidden";
}
function hide() {
myDiv.style.visibility = "hidden";
//showing Question button
button.style.visibility = "visible";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
button.addEventListener("click", toggle, false);
//handler for the X button
xButton.addEventListener("click", hide, false);
});
Like Carorus said, you're almost there! Their example uses your code and it's probably best that you check that out and understand it.
If you are looking for a jquery solution I threw this together very quickly, I hope it's what you are looking for.
http://codepen.io/anon/pen/pJJKjZ?editors=101
$("#info").click(function(){
show()
});
$(".close").click(function(){
hide();
});
var show = function(){
$("#myDiv").css('visibility', 'visible');
$("#info").css('visibility','hidden');
}
var hide = function(){
$("#myDiv").css('visibility', 'hidden');
$("#info").css('visibility','visible');
}
Your already using JQuery, so you can handle both buttons with 1 line of code...
$(function(){
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
button.style.visibility = "hidden";
}
function hide() {
myDiv.style.visibility = "hidden";
button.style.visibility = "visible";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
$('.button').click(function() { toggle(); });
});
And update your HTML to include a secondary class on your buttons, and remove the onClick attribute...
<div class="container">
<div id="myDiv">
<button type="button" class="close button" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p>QUESTION</p>
<form action="https://chat.rbb.bg/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\nAre you sure?");">
<span class="box1">Theme</span><input type="text" name="extensionField_Title" id="box1"><br>
<span class="box2">Name</span><input type="text" name="extensionField_Name" id="box2"><br>
<span class="box3">Telephone</span><input type="text" name="extensionField_PhoneNumber" id="box3"><br>
<span class="boxinfo">About</span>
<select name="extensionField_ccxqueuetag" id="boxinfo"><br>
<option value="Chat_Csq23"></option>
</select><br>
<input type="submit" value="SUBMIT" id="boxbuton">
<input type="hidden" name="author" value="Customer"><br>
</form>
</div>
<input id="info" type="button" value="QUESTION?" class="switchbuton button">
</div>
In jQuery you can do it like below. You could even shorten down the code, using classes to show/hide a bigger scope, but this is fine.
function showForm() {
$('#myform').show();
$('#myClose').show();
$("#info").hide();
}
function hideForm() {
$('#myform').hide();
$('#myClose').hide();
$("#info").show();
}
$(function() {
$('#info').click(function() {
showForm();
});
$('#myClose').click(function() {
hideForm();
});
hideForm();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div id="myDiv">
<button id="myClose" type="button" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p id="q">QUESTION</p>
<form action="https://chat.rbb.bg/ccp/chat/form/100000" id="myform" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\nAre you sure?");">
<span class="box1">Theme</span>
<input type="text" name="extensionField_Title" id="box1">
<br>
<span class="box2">Name</span>
<input type="text" name="extensionField_Name" id="box2">
<br>
<span class="box3">Теlephone</span>
<input type="text" name="extensionField_PhoneNumber" id="box3">
<br>
<span class="boxinfo">About</span>
<select name="extensionField_ccxqueuetag" id="boxinfo">
<br>
<option value="Chat_Csq23"></option>
</select>
<br>
<input type="submit" value="SUBMIT" id="boxbuton">
<input type="hidden" name="author" value="Customer">
<br>
</form>
</div>
<input id="info" type="button" value="QUESTION?" class="switchbuton">
</div>
Html Code:
<div class="container">
<div id="myDiv">
<button type="button" id="hide" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p>QUESTION</p>
<form action="https://chat.rbb.bg/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\nAre you sure?");">
<span class="box1">Theme</span> <input type="text" name="extensionField_Title" id="box1"><br/><br/>
<span class="box2">Name</span> <input type="text" name="extensionField_Name" id="box2"><br/><br/>
<span class="box3">Теlephone</span><input type="text" name="extensionField_PhoneNumber" id="box3"><br/><br/>
<span class="boxinfo">About</span>
<select name="extensionField_ccxqueuetag" id="boxinfo"><br>
<option value="Chat_Csq23"></option>
</select><br/><br/>
<input type="submit" value="SUBMIT" id="boxbuton"><br/>
<input type="hidden" name="author" value="Customer"><br/>
</form>
</div>
<input id="info" type="button" onClick = "this.style.visibility= 'hidden';" value="QUESTION?" class="switchbuton">
</div>
js Code
$(function(){
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
}
function hide() {
myDiv.style.visibility = "hidden";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
$("#hide").click(function(){
myDiv.style.visibility = "hidden";
button.style.visibility = "visible";
});
hide();
button.addEventListener("click", toggle, false);
});
i have 3 buttons in the top with color given.as i press the button it changes the color indicating that following button has been pressed and my submit form opens.as soon as i submit the form message displays "successful".but my problem is as i press the submit button the top button color changes to the previous one but i want it to stay the same.how can i do this please help!!!
here is my code:
this is my javascript and css fr changing the button colors:
<script type="text/javascript">
$(document).ready(function (){
$('.beforeClick').click(function (){
$('.beforeClick').css('background-color',"#C1B0B3");
$(this).css('background-color',"#9C7260");
});
});
<style>
.beforeClick {
margin-left: 0.4%;
background-color:#C1B0B3;
font-weight: bold;
width: 14em;
height: 2em;
}
</style>
this is my buttons and its forms:
<html>
<body>
<button type="button" id="incbutton" class="beforeClick" style="background-color:#9C7260">Report1</button>
<button type="button" id="dthbutton" class="beforeClick">Report2</button>
<button type="button" id="negbutton" class="beforeClick"> Report3</button>
<script type="text/javascript">
$("#incbutton").click(function() {
$("#form_sub_container1").show();
$("#form_sub_container2").hide();
$("#form_sub_container3").hide();
})
$("#dthbutton").click(function() {
$("#form_sub_container2").show();
$("#form_sub_container1").hide();
$("#form_sub_container3").hide();
})
$("#negbutton").click(function() {
$("#form_sub_container3").show();
$("#form_sub_container1").hide();
$("#form_sub_container2").hide();
})
</script>
<div id="form_sub_container1" style="display:<?= ( isset($_POST['rep']) || (!isset($_POST['report21']) && !isset($_POST['report31'])))? 'block':'none'?>">
//report1 functionalities
<input type="submit" name="rep" value="Save" id="btnsize1" /></td>
</div>
<div id="form_sub_container2" style="display: <?= isset($_POST['report21'])? 'block':'none'?>">
//report2 functionalities
<input type="submit" name="report21" value="Save" id="btnsize2" /></td>
</div>
<div id="form_sub_container3" style="display: <?= isset($_POST['report31'])? 'block':'none'?>">
//report3 functionalities
<input type="submit" name="report31" value="Save" id="btnsize3" /></td>
</div>
</body>
<html>
this my report3:
<div id="form_sub_container3" style="display: <?= isset($_POST['report31'])? 'block':'none'?>">
<?php
if (isset($_POST['report31']))
{
$daydropdown111=$_POST['daydropdown111'];
$monthdropdown111=$_POST['monthdropdown111'];
$yeardropdown111=$_POST['yeardropdown111'];
$dreport_place=$_POST['dreport_place'];
$dreport_address=$_POST['dreport_address'];
$dreport_additional=$_POST['dreport_additional'];
}
else
{
$daydropdown111="";
$monthdropdown111="";
$yeardropdown111="";
$dreport_place ="";
$dreport_address="";
$dreport_additional="";
}
if (isset($_POST['report31']))
{
$death = $DataAccessController->death_reports($_POST['daydropdown111'],$_POST['monthdropdown111'],$_POST['yeardropdown111'],$_POST['dreport_place'], $_POST['dreport_address'], $_POST['dreport_additional']);
if ($death) {
echo"<p><font color=red size='5pt' > Your Report has been Registered</font></p>";
}
}
?>
<div id="color" >
<table>
<h1 align="center"><p> Report</h1>
<form action="" method="POST" id="form_id">
<tr><td>Date </td><td>
<select name="daydropdown111" id="daydropdown111"></select>
<select name="monthdropdown111" id="monthdropdown111"></select>
<select name="yeardropdown111" id="yeardropdown111"></select>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
populatedropdown("daydropdown111", "monthdropdown111", "yeardropdown111")
</script>
</td></tr>
<tr><td></br> Place </td><td></br><select name="dreport_place"id="wgtmsr">
<option value="hospital" >Hospital</option><option value="residence">Residence</option><option value="others">Others</option></select></td></tr>
<tr><td>Address </td><td></br><textarea name="dreport_address" rows="5" cols="32" id="loc" value=""> </textarea></td></tr>
<tr><td>Additional Cases if any</td><td></br> <textarea name="dreport_additional" rows="5" cols="32" id="loc" value=""> </textarea></td></tr></label></td></tr>
<tr><td></td><td><input type="submit" name="report31" value="Save" id="btnsiz" /></td></tr>
</form>
</table></br>
</div>
</div>
Nah..is this what you want?
$(document).ready(function(){
$('.beforeClick').click(function(){
$(this).css('background-color',"#C1B0B3");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="incbutton" class="beforeClick" style="background-color:#9C7260" >Report1</button>
<button type="button" id="dthbutton" class="beforeClick">Report2</button>
<button type="button" id="negbutton" class="beforeClick">Report3</button>
Create a class and call it whatever you want eg: .clickedButton or .afterClick and then when a form is submitted you do just like you did with #form_sub_container divs :
<div id="form_sub_container3" style="display: <?= isset($_POST['report31'])? 'block':'none'?>">
but this time you have to do it with your buttons, something like:
<button type="button" id="incbutton" class="<?= isset($_POST['rep'])? 'afterClick':'beforeClick'?>" >Report1</button>
<button type="button" id="dthbutton" class="<?= isset($_POST['report21'])? 'afterClick':'beforeClick'?>" >Report2</button>
<button type="button" id="negbutton" class="<?= isset($_POST['report31'])? 'afterClick':'beforeClick'?>" >Report3</button>
css
.afterClick{
background-color:#9C7260;
}
So I made a simple javascript form validator which creates a box with the error message using DOM. But I can't figure out a way how to reset all these changes when i reset the form using
<button type="reset">
I would like to know how it's done please.
Thanks.
The Code
<html>
<head>
<script type="text/javascript">
function validate(){
var fname = document.getElementById("fname");
var surname = document.getElementById("surname");
if(fname.value === "" || fname.value === null){
document.getElementById("sbody").style.display = "block";
document.getElementById("fname").style.display = "block";
return false;
}
//Verify Last Name
if(surname.value === "" || surname.value === null){
document.getElementById("sbody").style.display = "block";
document.getElementById("surname").style.display = "block";
return false;
}
}//End Validate Function
</script>
<style type="text/css">
#sbody{
width: 100px;
height: 100px;
background-color: #f3f3f3;
display:none;
}
.vis{
display: none;
font-size: 12px;
}
</style>
</head>
<body>
<section id="sbody">
<span id="fner" class="vis">First Name is missing.</span>
<span id="lner" class="vis">Surame is missing.</span>
</section>
<form id="registerForm" method="POST" action="register.php" onsubmit="return validate()">
<label for="fname" class="labelStyle">First Name: </label>
<input id="fname" name="fname" type="text" value="">
<label for="surname" class="labelStyle">Surname: </label>
<input id="surname" name="surname" type="text" value="">
<button type="submit">Sign Up</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
The browser cannot magically figure out what has to be done to reset the custom changes.
However you can listen to the reset event of the form using element.addEventListener.
DEMO
HTML
<form id="test">
<div id="errors-ct">The form has errors</div>
<button type="reset">Reset</button>
</form>
JS
//wait for the DOM to be ready
document.addEventListener('DOMContentLoaded', function () {
//store a reference to the errors container div
var errorsCt = document.getElementById('errors-ct');
//listen to the reset event of the form
document.getElementById('test').addEventListener('reset', function (e) {
var form = e.target; //this is how you could access the form
//hide the errors container
errorsCt.style.display = 'none';
});
});
If you want to reset the form, as if user hadn't made any selections or added any input, then just set all form element values to their default value, or empty.
jsFiddle
<div>
<form action="/echo/html" method="get">
<input type="text" placeholder="username" />
<br/>
<input type="password" placeholder="password" />
<br/>
<input type="checkbox" value="test" data-default="checked" checked="checked"/>
<br/>
<button type="reset" value="reset" onclick="resetForm()">reset</button>
<br/>
</form>
<div id="err">Some error message</div>
</div>
window.resetForm = function () {
var fields = $('input'),
uname, pass, check;
uname = $(fields.get(0));
pass = $(fields.get(1));
check = $(fields.get(2));
$("#err").text("");
uname.val('');
pass.val('');
if (check.attr("data-default") == "checked") {
check.attr("checked", "checked");
} else {
check.removeAttr("checked");
}
}