HTML Form Output Formatting (with JavaScript) - javascript

I want to make an HTML form that churns out formatted email signatures.
I want the output on
1) separate lines and
2) have each line of be formatted uniquely. So, first line bold and blue, second like non-bold and grey font, etc. like typical email signatures. So far it all appears in one long identically formatted output.
Eventually I'd like blank entries to be omitted and to add an automatic copy function, but I can tackle those later.
Spent a few dozen hours on this and can't get it, so hoping for some guidance.
<!DOCTYPE html>
<html lang = "en-US">
<title>Email Signature</title>
<head>
<body>
<font face="century gothic">
<h3>Creating Signature</h3>
<p>Enter you information<p>
<form>
Name<br>
<input type="text" name="wholename" ><br>
<br>Position</br>
<input type="text" name="pos"><br>
<br>Position 2</br>
<input type="text" name="pospos"><br>
<br>Phone 1</br>
<input type="text" name="phone"><br>
<br>Phone 2</br>
<input type="text" name="phonephone"><br>
<p>Select Location<p>
<input type="radio" name="location" value="Redding" checked>Redding<br>
<input type="radio" name="location" value="San Francisco" checked> San Francisco<br>
<input type="radio" name="location" value="Woodland Hills" checked> Los Angeles<br><br>
<input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)">
<em>Check this box when you're all set</em>
<p>
<b>Your Custom Signature:</b><br><br>
<textarea type="textarea" id="billingname" style="font-family:century gothic;font-size:1.2em;color:rgb(126,128,130)" rows="10" cols="40" ></textarea><br>
<script type="text/javascript">
function copyText(){
document.getElementById("billingname").select();
document.execCommand('copy');
}
function FillBilling(f) {
f.billingname.value =
f.wholename.value + " " + f.pos.value + " | " + f.pospos.value + "" + f.phone.value + " " + f.phonephone.value + " " + f.location.value;}
if(f.billingtoo.checked == true) {}
</script>
</form>
<br><br><br><br>
</font face>
</head>
</body>
</html>

I don't think you want to use a <textarea> because that doesn't allow for multiple formatting like you want in the signature. Try using a <div> with separate <p> tags, like this:
<!DOCTYPE html>
<html lang = "en-US">
<title>Email Signature</title>
<head>
<body>
<font face="century gothic">
<h3>Creating Signature</h3>
<p>Enter you information<p>
<form>
Name<br>
<input type="text" name="wholename" value="John Doe"><br>
<br>Position</br>
<input type="text" name="pos" value="Systems Engineer"><br>
<br>Position 2</br>
<input type="text" name="pospos" value="Senior Manager"><br>
<br>Phone 1</br>
<input type="text" name="phone" value="(123)-456-7890"><br>
<br>Phone 2</br>
<input type="text" name="phonephone" value="(123)-456-7890"><br>
<p>Select Location<p>
<input type="radio" name="location" value="Redding" checked>Redding<br>
<input type="radio" name="location" value="San Francisco" checked> San Francisco<br>
<input type="radio" name="location" value="Woodland Hills" checked> Los Angeles<br><br>
<input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)">
<em>Check this box when you're all set</em>
<p>
<b>Your Custom Signature:</b><br><br>
<div id="billingname" style="width: 400px; height: 300px; border: solid black 2px;">
<b id="wholename" style="margin:0; line-height:14px; display:inline-block; color:#245996"></b>
<p id="pos" style="margin:0; line-height:14px; display:inline-block; color:#245996"></p>
<p id="pospos" style="margin:0; line-height:14px; display:inline-block; color:#245996"></p>
<p id="phone" style="margin:0; line-height:14px; color:grey"></p>
<p id="phonephone" style="margin:0; line-height:14px; color:grey"></p>
<p id="location" style="margin:0; line-height:14px; color:grey"></p>
</div>
<br>
<script type="text/javascript">
function copyText(){
document.getElementById("billingname").select();
document.execCommand('copy');
}
function FillBilling(f) {
document.getElementById("wholename").innerHTML = f.wholename.value + " ";
document.getElementById("pos").innerHTML = f.pos.value + " | ";
document.getElementById("pospos").innerHTML = f.pospos.value;
document.getElementById("phone").innerHTML = f.phone.value;
document.getElementById("phonephone").innerHTML = f.phonephone.value;
document.getElementById("location").innerHTML = f.location.value;
}
//if(f.billingtoo.checked == true) {}
</script>
</form>
<br><br><br><br>
</font face>
</head>
</body>
</html>
Let me know if you have any questions about the code or if I misinterpreted what you wanted.
Happy Coding!

Related

How to make a confirmation page in Javascript with a user's inputs from HTML

I'm attempting to make an HTML page with a script that will store the user's input in a query string, then display it back to the user with the appropriate labels/descriptions in a confirmation page. This is what I have so far, I'm very new to Javascript but have some experience with HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bob's Pet Store</title>
<script src="petshop.js"></script>
</head>
<body>
<form id="myForm">
<h1>Place your customer information below!</h1>
<h2>Customer Information:</h2>
<h3>Please enter the neccessary information.</h3>
<p>First Name: <input type="text" id="fname" /></p>
<p>Last Name: <input type="text" id="lname" /></p>
<p>Email Address: <input type="text" id="address" /></p>
<p>State: <input type="text" id="state" /></p>
<p>Phone Number: <input type="text" id="number" /></p>
<br></br>
<br><input type="submit" id="submit" value="Submit Information"></form>
</br>
</body>
</html>
for this you could use confirm() and .value of the ID to get the job done like so:
JAVASCRIPT:
function buttonFunction() {
var confirmationFNAME = document.getElementById("fname").value
confirm("Is, " + confirmationFNAME + " the right information?")
var confirmationLNAME = document.getElementById("lname").value
confirm("Is, " + confirmationLNAME + " the right information?")
var confirmationADDRESS = document.getElementById("address").value
confirm("Is, " + confirmationADDRESS + " the right information?")
var confirmationSTATE = document.getElementById("state").value
confirm("Is, " + confirmationSTATE + " the right information?")
var confirmationNUMBER = document.getElementById("number").value
confirm("Is, " + confirmationNUMBER + " the right information?")
}
HTML (added onclick to button):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bob's Pet Store</title>
<script src="petshop.js"></script>
</head>
<body>
<form id="myForm">
<h1>Place your customer information below!</h1>
<h2>Customer Information:</h2>
<h3>Please enter the neccessary information.</h3>
<p>First Name: <input type="text" id="fname" /></p>
<p>Last Name: <input type="text" id="lname" /></p>
<p>Email Address: <input type="text" id="address" /></p>
<p>State: <input type="text" id="state" /></p>
<p>Phone Number: <input type="text" id="number" /></p>
<br></br>
<br><input onclick = "buttonFunction()" type="submit" id="submit" value="Submit Information"></form>
</br>
</body>
</html>
Hope this helped, if you got any bugs or problems feel free to reach out or comment.

The .prop() function isn't changing an element's name

I have this Jquery/javascript code which clones a template element and assigns the clone an iterative ID (so the first clone is called 'eventCard0', the second 'eventCard1' etc.)
This works fine besides .prop('name', 'eventCard' + number) which for some reason doesn't change the clone's name attribute in the same manner as it changes the clone's ID. I can't figure out why this is at all
var newEventBtn = document.getElementById("newEventButton");
newEventBtn.onclick = function() {
let number = $('#events .eventInputs').length;
let cloneParent = "#eventCardTemplate";
let newClone = $(cloneParent).clone().prop('id', "eventCard" + number).prop('name', "eventCard" + number);
newClone.appendTo("#events");
}
This is the template tag <li id="eventCardTemplate" name="eventCardTemplate" class="eventInputs">
And this is the entire HTML:
<?php
session_start();
if (!isset($_SESSION['loggedin'])) {
header('Location: index.html');
exit();
}
?>
<html>
<head>
<title>Timeline Creator</title>
<link rel="stylesheet" type="text/css" href="timelineCreator.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<li id="eventCardTemplate" name="eventCardTemplate" class="eventInputs">
<input type="text" name="eventName" class="eventName" maxlength="50" placeholder="Event Name" required>
<textarea name="eventDesc" class="eventDesc" placeholder="Event Description" required></textarea>
<p class="label">Start Date</p>
<input type="date" name="startDate" class="date" required>
<!-- <label for="startIsEnd">Start date = End Date</label>
<input type="checkbox" name="startIsEnd" class="startIsEnd"> -->
<p class="label">End Date</p>
<input type="date" name="endDate" class="date" required>
<p class="label">Political</p>
<input type="checkbox" name="political" value="political" class="checkboxes">
<p class="label">Economic</p>
<input type="checkbox" name="economic" value="economic" class="checkboxes">
<p class="label">Social</p>
<input type="checkbox" name="social" value="social" class="checkboxes">
</li>
<-- Back
<form action="createTimeline.php" method="post" id="timelineCreator">
<input type="text" name="timelineName" id="timelineName" maxlength="50" placeholder="Timeline Name" autofocus required>
<textarea id="timelineDesc" name="timelineDesc" placeholder="Timeline Description" required></textarea>
<ul id="events">
</ul>
<button type="button" id="newEventButton">+ Add Event</button>
<input type="submit" id="createTimeline" value="Create Timeline">
</form>
<script src="timelineCreator.js"></script>
</body>
</html>
Your element does not have the name property, so .prop won't change it.
Look at this link for a list of elements that do have the name property. https://developer.mozilla.org/en-US/docs/Web/API/Element/name
In this case you should be using .attr instead of .prop :
let newClone = $(cloneParent).clone().attr('id', "eventCard" + number).attr('name', "eventCard" + number);

How can I set the value in a textbox on form load?

This is what I tried for setting the textbox values but it doesn't seem to be working. I want the textboxes to have the values in them when the page loads. the function is within the script tag.
function setMSRP()
{
var MSRP = "$29,120.00";
var destinationCharge = "$875.00";
var rebate = "-$10,000.00";
var taxes = "6%"
var titlesAndFees = "$209.00";
document.getElementById("txtMSRP").value = MSRP;
document.getElementById("txtDestinationCharge").value = destinationCharge;
document.getElementById("txtRebates").value = rebate;
document.getElementById("txtTaxes").value = taxes;
document.getElementById("txtElectricTitleAndFees").value = titlesAndFees;
}
</script>
</head>
<body onload="setMSRP()">
<form>
<h1>Calculate Focus Price</h1>
<hr/>
<label for="txtMSRP">MSRP:</label>
<input autofocus id="txtMSRP" type="text" readonly="readonly"/>
<br/>
<label for="txtDestinationCharge">Destination Charge:</label>
<input type="text" id="txtDestinationCharge" readonly="readonly"/>
<br/>
<label for="txtRebates">Rebates:</label>
<input type="text" id="txtRebates" readonly="readonly"/>
<br/>
<label for="txtTaxes">Taxes:</label>
<input type="text" id="txtTaxes" readonly="readonly"/>
<br/>
<label for="txtElectricTitleAndFees">Electric Title and Fees:</label>
<input type="text" id="txtElectricTitleAndFees" readonly="readonly"/>
<br/>
<input type="button" id="btnCalculateTotal" onclick="calcTotal()"
</form>
</body>
You have some syntax errors in code. Look at the modified example below:
<html>
<head>
<script>
function setMSRP() {
var MSRP = "$29,120.00";
var destinationCharge = "$875.00";
var rebate = "-$10,000.00";
var taxes = "6%"
var titlesAndFees = "$209.00";
document.getElementById("txtMSRP").value = MSRP;
document.getElementById("txtDestinationCharge").value = destinationCharge;
document.getElementById("txtRebates").value = rebate;
document.getElementById("txtTaxes").value = taxes;
document.getElementById("txtElectricTitleAndFees").value = titlesAndFees;
}
</script>
</head>
<body onload="setMSRP()">
<form>
<h1>Calculate Focus Price</h1>
<hr/>
<label for="txtMSRP">MSRP:</label>
<input autofocus id="txtMSRP" type="text" readonly="readonly" />
<br/>
<label for="txtDestinationCharge">Destination Charge:</label>
<input type="text" id="txtDestinationCharge" readonly="readonly" />
<br/>
<label for="txtRebates">Rebates:</label>
<input type="text" id="txtRebates" readonly="readonly" />
<br/>
<label for="txtTaxes">Taxes:</label>
<input type="text" id="txtTaxes" readonly="readonly" />
<br/>
<label for="txtElectricTitleAndFees">Electric Title and Fees:</label>
<input type="text" id="txtElectricTitleAndFees" readonly="readonly" />
<br/>
<input type="button" id="btnCalculateTotal" onclick="calcTotal()">
</form>
</body>
</html>
I want the textboxes to have the values in them when the page loads.
You don't need JS for this:
<input id="txtMSRP" type="text" value="<your_value>" />
If you wanted placeholders inside the input[type=text], simply use
var textbox = document.querySelector("#textbox");
textbox.setAttribute("placeholder", "This is the Placeholder");
Or use the HTML Attribute to set the value/placeholder:
<input type="text" id="textbox" value="Hello" placeholder="Introductory Statement" />

Retrieve data from form html

Hi all i have this 3 forms:
<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">
<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">
<label for="result" style="color: red;">Risultato:</label>
<input type="text" class="form-control" id="result" >
and a button
<button type="button" onclick="merge()">merge</button>
Now i want that the function merge() takes the text inserted in the first 2 forms and put the append of the 2 string in the 3rd form.
i tried something like:
<script>
function merge(){
var r1= $('#idform1').val();
var r2= $('#idform2').val();
$('#idform3').val('r1+r2');}
</script>
idform1 , idform2 and idform3 are not the correct id's but it's just to be more clear.
Of course it's not working , can anyone help me out ? thanks
replace your code with this
<!DOCTYPE html>
<html>
<script src="put your path to jquery.js"></script>
<body>
<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">
<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">
<label for="result" style="color: red;">Risultato:</label>
<input type="text" class="form-control" id="result" >
<button type="button" onclick="merge()">merge</button>
<script>
function merge(){
var r1= $('#color1').val();
var r2= $('#color2').val();
$('#result').val(r1+r2);}
</script>
</body>
</html>
You got every thing Just change this
<script>
function merge(){
var r1= $('#idform1').val();
var r2= $('#idform2').val();
$('#idform3').val('r1+r2');}// this line
</script>
to
<script>
function merge(){
var r1= $('#idform1').val();
var r2= $('#idform2').val();
$('#result').val(r1+r2);}// to this
</script>
and if you have for more specification you can use String(yourValue) function like this $('#result').val(String(r1)+String(r2)) but here we don't really need this.
first you know you use wrong input tag id change correct ids then change val("r1+r2") to val(r1+r2). if you use variable there not string " " quote String Quote only for when normal text you set.
and finally you use jQuery under JavaScript so add in Head tag jQuery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
here your full code :
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function merge(){
var r1= $('#color1').val();
var r2= $('#color2').val();
$('#result').val(r1+r2);}
</script>
</body>
<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">
<br>
<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">
<br>
<label for="result" style="color: red;" >Risultato:</label>
<input type="text" class="form-control" id="result" >
<br>
<button type="button" onclick="merge()">merge</button>
</body>
</html>

html/javascript - Trying to validate the form

I did a website and made a form ,and I have done the most of the validation but I am stuck at one. what I am trying to achieve here is when the the submit button of the form is clicked, a alert message show appear on screen saying thanks'customer name' for feed back and you chose 'radiobutton' and your comment was 'textincommentfield'.for one or another reason validation is not working. Any help would be great and thanks in advance , btw I am new to this.
Code: http://jsfiddle.net/92tSw/
HTML:
<title> Contact</title>
<body>
<div class="container">
<div id="wrap">
<div id="logo">
<img class="p" src="images/logo.png" align="left">
</div>
<img class="d" src="images/title.gif" align="middle">
<div id="menu">
<div id="menu2">
<ul>
<li><a href="homepage.html" ><span>Home</span></a></li>
<li><a href="about.html" ><span>About Us</span></a></li>
<li><a href="clubs.html" ><span>Clubs</span></a></li>
<li><a href="shop.html" ><span>Shop</span></a></li>
<li><a href="contact.html" ><span>Contact Us</span></a></li>
</ul>
</div>
</div>
<form>
<fieldset>
<legend style="font-size:20px; padding-top:20px;">Fill in the form Below to contact Us:</legend>
<p><label for="full name">Full Name:</label>
<input id="full name" type="text" size="40" name="customername" placeholder="Type first and last name" autofocus/></p>
<p><label for="Address">Address:</label>
<input type="text" name="address1" placeholder="Address Line 1" size="42%">
<input type="text" name="address2" placeholder="Address Line 2" size="42%">
<p><label for="Address"> </label>
<input type="text" name="city" placeholder="City/Town" size="20%">
<input type="text" name="postcode" placeholder="Post Code" size="20%"></p>
<p><label for="Telephone No.">Telephone Number:</label>
<input type="text" name="Telephone No." maxlenght="12"placeholder=" Enter Telephone No." size="42%"></p>
<p><label for="email">Email:</label>
<input name="email" type="email" size="25" placeholder="youremail#you.com" /></p>
<legend style="font-size:20px;" >Comments</legend>
<p><label for="quantity"> How great is the website?Choose one<em>*</em> :</label>
<input type="radio" name="myRadio" value="VG" >Very Great
<input type="radio" name="myRadio" value="G" >Great
<input type="radio" name="myRadio" value="NVG">Not Very Great
<input type="radio" name="myRadio" value="U" >Useless
<BR>
<BR>
<BR>
<BR>
<p><label for="comment">Your Message:</label>
<textarea cols="35" rows="5" name="comments" Placeholder="eg. please knock on the dooor, ring the bell etc." >
</textarea></p>
</fieldset>
<fieldset>
<input type="checkbox" name="Terms and Condition"value="Terms and Condition" required> Accept Terms and Condition<br>
<input id="bor" type="reset" value="Reset">
<input id="chor" type="submit" name="button" value="Submit" onclick="getMyForm(this.form)" >
</fieldset>
</div>
</div>
CSS:
form{ padding-top:100px; color:White;}
fieldset { background-color:#980000 ; margin: 1%;}
label { float:left; width:20%; text-align:right;}
legend{font-weight:bold;}
.foot {
padding-top:.75pt;
padding-bottom:.75pt;
padding-right:auto;
padding-left:auto;
width:100%;
}
JS:
function getMyForm(frm)
{
var myinfo = getRadioValue(frm.myRadio);
var customername = document.getElementById("customer").value;
var comment = document.getElementById("comment").value;
alert("Dear"+ customername + ",Thank you very much for your feedback.You have rated our site as" + myinfo +"your comment was Very informative website."+ comment +".");
}
function getRadioValue(radioArray){
var i;
for (i = 0; i < radioArray.length; i++){
if (radioArray[i].checked) return radioArray[i].value;}
return "";
}
It may be better to have the event on the form
<form id="form1" onsubmit="return getMyForm(this)">
To prevent the form from actually submitting, you have to return false; from the javascript method.
To submit the form programmatically in JS
frm.submit();
Or
document.getElementById("form1").submit();
Then return true; from the function under the right conditions to allow the submit to complete.
(I noticed you didn't include the action and method attributes on the form. I assumed this was just for the example.)
http://jsfiddle.net/92tSw/2/
Use JQuery if you are new to javascript.. its much more comfortable:
$(document).ready(function() {
$("#yourmockform").submit(function(e) {
var customername = $(this).find('#fullname').val();
var comment = $(this).find('#comment').val();
var myinfo = $(this).find('[name="myRadio"]:checked').attr('value');
alert("Dear"+ customername + ",Thank you very much for your feedback.You have rated our site as" + myinfo +"your comment was Very informative website."+ comment +".");
return false;
});
});

Categories