I currently have a table that consists of 4 columns that contain forms. Two text boxes and two calendar widgets. I am trying to add a fifth column(reset), which will give the user the chance to reset any information on the row. I was able to reset, but, there's a bug. If I change a few columns and click the reset on my desired row it will reset the whole table. How can I reset one row, without it affecting the rest?
I found this example on w3schools.com, where it will reset both forms as well.
<html>
<body>
<p>Enter some text in the fields below, then press the "Reset form" button to reset the form.</p>
<form id="myForm">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Reset form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").reset();
}
</script>
</body>
</html>
So, I tried fiddling with the script so only the first name form would reset and not the last name. This isn't working, how can I accomplish this? Thanks
<html>
<body>
<p>Enter some text in the fields below, then press the "Reset form" button to reset the form.</p>
<form>
First name: <input type="text" name="fname" value="Marie" id="myForm"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Reset form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").value= ' ';
}
</script>
</body>
</html>
The reset method only works on the entire form. If you want to clear just one input you need to clear his value.
See the code below:
<html>
<body>
<p>Enter some text in the fields below, then press the "Reset form" button to reset the form.</p>
<form>
First name: <input type="text" name="fname" id="myForm"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Reset form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").value='';
}
</script>
</body>
</html>
Related
I have a strange behaviour here with focus method.
I Just want to understand why it is happening like this.
Case 1:
With the below code when I come out of last element i.e driveD hyperlink ,focus is not getting set to first text box even though I applied .focus() to first text box.
function lastFocusOut() {
alert('focus out ,setting focus to first text box');
document.getElementById('nameId').focus();
}
input,a,button{
display:block;
margin:10px;
}
<form>
<input id="nameId" type="text" name="name"> drive
<input id="nameId1" type="text" name="name">
<input type="submit" value="test" />
<input type="text" name="name"> driveE </form> driveD </body>
Case 2:
When I add a buttton after the last hyperlink It sets the focus back to first text box.
function lastFocusOut() {
alert('focus out ,setting focus to first text box');
document.getElementById('nameId').focus();
}
input,a,button{
display:block;
margin:10px;
}
<form>
<input id="nameId" type="text" name="name"> drive
<input id="nameId1" type="text" name="name">
<input type="submit" value="test" />
<input type="text" name="name"> driveE </form>
driveD </body>
<button type ="submit" >Submit</button>
I want to understand two things here.
1)Why the focus is not getting set to first text box in case 1.
2)What really makes the difference just by adding the button at the end ,which is making the code work as expected.
I have the below code which allows me to dynamically add additional text fields when the button is pressed. I'm essentially mocking up multiple destinations along a route.
<!doctype html>
<head>
<title>Test</title>
</head>
<body>
<div id="form">
<form id="address">
<p>Route:</p>
<input type="text" name="Address" placeholder="Origin">
<input type="text" name="Address" placeholder="Destination">
<button type="button" id="add" onclick="addField('address')">Add field</button>
</form>
</div>
<script type="text/javascript">
function addField(id) {
// OnClick function for adding additonal fields for
// transit routes with multiple destinations.
var field = `<br/><br/>
<input type="text" name="Address" placeholder="Origin">
<input type="text" name="Address" placeholder="Destination">`
document.getElementById(id).innerHTML += field
}
</script>
</body>
</html>
I can fetch an array of all the elements within:
var elements = document.getElementById("address").elements;
But what I want to do is link every Destination field to the next Origin field, so that the Destination in the last field ends up as the Origin for the next row. I imagine it's something like below, but it's not clicking in my head.
elements[elements.indexOf(this)-1].value;
I am looking to create a button at the bottom of a form that will create an alert box that will show the form data entered. Form includes:
First Name
Last Name
Address 1
Address 2
City
State
Zip
Phone
Fax
Once the form is completed, the button is clicked and an alert box pops up showing the form data entered.
Does anyone know how to accomplish without the form actually being submitted or validated? There is no database for the form data to be submitted to, so there is no database to pull the information from.
Any help would be greatly appreciated.
I have not included the form code due to its length, but the current code I am working with for the Alert Box looks like this:
<script>
function display_alert()
{
alert("");
}
</script>
<body>
<input type="button" onclick="display_alert()" value="Display alert box">
</body>
If I get it right you need something like this:
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById('send').onclick = function(e){
alert(document.getElementById("name").value);
return false;
}
}
</script>
</head>
<body>
<form method="post">
<input type="text" name="name" id="name" />
<input type="submit" name="send" id="send" value="send" />
</form>
</body>
</html>
I don't really get what you mean with a database to pull the information from, but the example uses a click event to get the data from the form field and shows it in an alert without a submit.
html code:
<html>
<SCRIPT SRC="PR8_4.JS"></SCRIPT>
<body>
<form name=details>
<table>
<tr><td>ENTER FRIST NAME:<input type=text name=fname></td></tr>
<tr><td>ENTER LAST NAME:<input type=text name=lname></td></tr>
<tr><td>ENTER PHONE NUM :<input type=text name=phnum></td></tr>
</table>
<input type="button" value="Click Me" onclick="display();">
</form>
</body>
</html>
javascript code:
function display()
{
var x=document.details.fname.value;
var y=document.details.lname.value;
var z=document.details.phnum.value;
alert("FIRST NAME:"+x+" "+"LAST NAME:"+y+" "+"PHONE NUMBER:"+z);
}
To stop a form submitting you can create an onsubmit event within the tag and return false - e.g. ...form elements.... This has the benefit of working when someone submits the form by pressing the enter key as well as pressing the submit button.
Thus, to achieve what you desire you could create a function (lets call it formAlert) and call it from the onsubmit event e.g. ...form elements...
The formAlert function would look something like:
function formAlert() {
alert_string = '';
alert_string = alert_string + document.getElementById('first_name').value;
alert_string = alert_string + ' ';
alert_string = alert_string + document.getElementById('last_name').value;
alert(alert_string);
}
and this would correspond to a form looking like:
<form id="foo" onsubmit="formAlert(); return false;">
<p><label for="first_name">First Name<label><input type="text" id="first_name" value="fred" /></p>
<p><label for="last_name">Last Name<label><input type="text" id="last_name" value="blogs" /></p>
<p><input type="submit" value="click me" /></p>
</form>
Note1, this won't be a pretty modal box - it'll simply display "fred blogs" in a Javascript alert box.
Note2, if there is a Javascript error your form will still submit (although in the example here it'll submit to itself).
Here is a JS Fiddle demonstrating the above code: http://jsfiddle.net/D59su/
I think this might be what you're looking for:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="javascriptform.css">
</head>
<body>
<form name= "details"><div class="box1"><div id="a"><input type="text" name="lastname" placeholder="LAST NAME"></div><br>
<div id="b"><input type="text" name="firstname" placeholder="FIRST NAME"></div><br>
<div id="c"><input type="e-mail" name="email" placeholder="E-MAIL"></div><br>
<div id="d"><input type="password" name="password" placeholder="PASSWORD"></div><br>
<div id="sub-button"><button onclick="getdetails();">submit</button></div></form>
</div>
<script>
function getdetails()
{
var a = document.forms["details"]["lastname"].value;
var b = document.forms["details"]["firstname"].value;
var c= document.forms["details"]["email"].value;
alert("Your name is "+a+" "+b+". Your e-mail is "+c);
}
</script>
</body>
</html>
It Is Very Simple
Using .value will help.
HTML:
<form onsubmit="return myFunction()>
<input type="text" id="name>
<input type="submit" value="SEND">
Use return before your function
Javascript:
function myFunction () {var name = document.getElementById("name").value; alert("Hi " + name)}
After Submitting It Will Show As (If I Write Alex and Submit It)
Hi Alex
Hope it will work
Why does the following code not add another text input field when clicking on the add another field input button?
<html>
<head>
<script>
function add_field()
{
var elem = document.createElement("input");
elem.setAttribute('type','text');
elem.setAttribute('name','user');
document.body.insertBefore(elem, document.getElementById('su'));
}
</script>
</head>
<body>
<form name="input" method="get">
Put input here:<br>
<input type="text" name="user">
<input type="button" onclick="add_field()" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
</body>
</html>
According to the MDN reference page, you need to call parent.insertBefore(newElem, referenceElem). In your example, I suppose that <form> is the parent, not <body>. Changing the last line of your function to this:
var target = document.getElementById('su');
target.parentNode.insertBefore(elem, target);
will make it work.
jQuery solution here
<form name="input" method="get">
Put input here:<br>
<input id='ap' type="text" name="user">
<input id="addField" type="button" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
JavaScript
$('#addField').click(function(e)
{
$('<input type="text" />').insertBefore('#su')
});
So I'm working on a form that when you click it it brings up another form, then another, etc etc.
For the example, this is what I have so far:
<head>
<script langauge="javascript">
function showGeneral(){
document.getElementById('general').style.display="block";
document.getElementById('colors').style.display="none";
document.getElementById('domain').style.display="none";
document.getElementById('details').style.display="none";
}
function showColors(){
document.getElementById('general').style.display="none";
document.getElementById('colors').style.display="block";
document.getElementById('domain').style.display="none";
document.getElementById('details').style.display="none";
}
function showDomain(){
document.getElementById('general').style.display="none";
document.getElementById('colors').style.display="none";
document.getElementById('domain').style.display="block";
document.getElementById('details').style.display="none";
}
function showDetails(){
document.getElementById('general').style.display="none";
document.getElementById('colors').style.display="none";
document.getElementById('domain').style.display="none";
document.getElementById('details').style.display="block";
}
</script>
</head>
<body>
<div id="general" name="general">
<h1> General </h1>
<form id="general" name="general">
Name <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
Email <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
<input type="button" id="frm1btn1" name="frm1btn1" value="Continue" onclick="showColors();"/> <br>
</form>
</div>
<div id="colors" name="colors" style="display:none">
<h1> Colors </h1>
<form id="frm2" name="frm2">
Green? <input type="text" id="frm2txt1" name="frm2txt1"/> <br>
Red? <input type="text" id="frm2txt2" name="frm2txt2"/> <br>
<input type="button" id="frm2btn1" name="frm2btn1" value="Continue" onclick="showDomain();"/> <br>
</form>
</div>
<div id="domain" name="domain">
<h1> Domain Name? </h1>
<form id="frm1" name="frm1">
Yes <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
No <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
<input type="button" id="frm1btn1" name="frm1btn1" value="Continue" onclick="showDetails();"/> <br>
</form>
</div>
<div id="details" name="details">
<h1> Describe Your Order </h1>
<form id="frm1" name="frm1">
Img <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
kk <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
<input type="button" id="frm1btn1" name="frm1btn1" value="Finish" onclick="showGeneral();"/> <br>
</form>
</div>
</body>
The functions work fine - but the problem is it displays all the forms at on page refresh/load. How do I make it so just the first one displays when you load that page?
Cheers!
When the page loads there is no call to any of the JS functions so none of them are being processed and all your forms are displayed. You need to add an explicit call to one of the functions. So to display the first form only you'd need to add
showGeneral();
In your script block (after the showDetails() function for example).
You need to tie up each of your JS functions with an event, so that the function is called when the event is triggered.
From what I understood of your question, you need to have an onclick event handler associated with some element of your form - so that when the first one is clicked, it calls the appropriate function for the second form and so on. Also, initially just set the first form to be visible (through your CSS).