Menu
Good morning!
I will start by saying i am fairly new to the world of Javascript and have some experience with HTML and CSS. In the code below i am simply testing out a form with a submit button. However i would like the information input to the form to then appear below the form when the user clicks the 'Sign Up' button.
I can place document.write() code where the document.getElementById() code is and it will write the results, however the form will disappear once the button is clicked.
I have looked at other questions however none seem to answer what i'm after as i'm not entirely sure what part i'm getting wrong.
If you could please explain the answer as simply as possible i would be grateful.
<html>
<head>
<title></title>
<script>
function click (){
var add1 = document.getElementById("ad1").value;
var add2 = document.getElementById("ad2").value;
var add3 = document.getElementById("ad3").value;
var postc = document.getElementById("pcode").value;
var tel = document.getElementById("tno").value;
var order = document.getElementById("ot").value;
var deliv = document.getElementById("dt").value;
var amount = document.getElementById("money").value;
var email1 = document.getElementById("email").value;
document.getElementById("addr1").innerHTML = add1;
document.getElementById("addr2").innerHTML = add2;
document.getElementById("addr3").innerHTML = add3;
document.getElementById("pc").innerHTML = postc;
document.getElementById("telephone").innerHTML = tel;
document.getElementById("ordertype").innerHTML = order;
document.getElementById("deliverytype").innerHTML = deliv;
document.getElementById("currencyamount").innerHTML = amount;
document.getElementById("emailer").innerHTML = email1;
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm();" method="post">
<table>
<tr><td>Address 1</td><td><input type="text" name="addressaddress" id="ad1" placeholder="House Number"></input>
</td></tr>
<tr><td>Address 2</td><td><input type="text" name="ad2" id="ad2"></input>
</td></tr>
<tr><td>Address 3</td><td><input type="text" name="ad3" id="ad3"></input>
</td></tr>
<tr><td>Postcode</td><td><input type="text" name="pcode" id="pcode"></input>
</td></tr>
<tr><td>Telephone</td><td><input type="text" name="tno" id="tno"></input>
</td></tr>
<tr><td>Order Type</td><td><input type="text" name="ot" id="ot"></input>
</td></tr>
<tr><td>Delivery Type</td><td><input type="text" name="dt" id="dt"></input>
</td></tr>
<tr><td>How much do you want to spend?</td><td><input type="text" name="money" id="money"></input>
</td></tr>
<tr><td>Email</td><td><input type="text" name="email" id="email"></input>
</td></tr>
<tr><td><input type="submit" value="Sign Up" id="mybtn" onClick="Click();"></input> </td></tr>
</table>
</form>
<p id="addr1"></p>
<p id="addr2"></p>
<p id="addr3"></p>
<p id="pc"></p>
<p id="telephone"></p>
<p id="ordertype"></p>
<p id="deliverytype"></p>
<p id="currencyamount"></p>
<p id="emailer"></p>
</body>
</html>
Thanks guys! :)
PS. i realise my naming conventions aren't the clearest!
433
asked Sep 19 '26 15:09
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
function validateForm() {
var add1 = document.getElementById("ad1").value;
var add2 = document.getElementById("ad2").value;
var add3 = document.getElementById("ad3").value;
var postc = document.getElementById("pcode").value;
var tel = document.getElementById("tno").value;
var order = document.getElementById("ot").value;
var deliv = document.getElementById("dt").value;
var amount = document.getElementById("money").value;
var email1 = document.getElementById("email").value;
document.getElementById("addr1").innerHTML = add1;
document.getElementById("addr2").innerHTML = add2;
document.getElementById("addr3").innerHTML = add3;
document.getElementById("pc").innerHTML = postc;
document.getElementById("telephone").innerHTML = tel;
document.getElementById("ordertype").innerHTML = order;
document.getElementById("deliverytype").innerHTML = deliv;
document.getElementById("currencyamount").innerHTML = amount;
document.getElementById("emailer").innerHTML = email1;
//document.myForm.submit();
/*
this will submit the form and will refresh the page so the content will disappear
*/
return false;
/*
due to this content will be displayed and form will not be submitted until be uncomment the above form submission
*/
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm();" method="post">
<table>
<tr><td>Address 1</td><td><input type="text" name="addressaddress" id="ad1" placeholder="House Number" />
</td></tr>
<tr><td>Address 2</td><td><input type="text" name="ad2" id="ad2" />
</td></tr>
<tr><td>Address 3</td><td><input type="text" name="ad3" id="ad3" />
</td></tr>
<tr><td>Postcode</td><td><input type="text" name="pcode" id="pcode" />
</td></tr>
<tr><td>Telephone</td><td><input type="text" name="tno" id="tno" />
</td></tr>
<tr><td>Order Type</td><td><input type="text" name="ot" id="ot" />
</td></tr>
<tr><td>Delivery Type</td><td><input type="text" name="dt" id="dt" />
</td></tr>
<tr><td>How much do you want to spend?</td><td><input type="text" name="money" id="money" />
</td></tr>
<tr><td>Email</td><td><input type="text" name="email" id="email" />
</td></tr>
<tr><td><input type="submit" value="Sign Up" /> </td></tr>
</table>
</form>
<p id="addr1"></p>
<p id="addr2"></p>
<p id="addr3"></p>
<p id="pc"></p>
<p id="telephone"></p>
<p id="ordertype"></p>
<p id="deliverytype"></p>
<p id="currencyamount"></p>
<p id="emailer"></p>
</body>
</html>
You're calling Click();, but you defined click(). JavaScript is case sensitive.
Also, <input /> is a standalone tag, not a closing tag. There's no </input> necessary (in fact, it's invalid).
<input type="submit" value="Sign Up" id="mybtn" onClick="click();" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
