I am creating a JS form where i need 3 inputs from user and after typing the 3 inputs , on clicking 'Add record' button ,it should display them on the same page one after another (line by line) for every button click. With my code, it is writing every new input entry in the same line and not next line. How do i do it ?
My result:
Andrew Arts 2007 Evelyn Computers 2006
Expected result :
Andrew Arts 2007
Evelyn Computers 2006
function doSubmit() {
document.getElementById('f1').innerHTML += document.myform.name.value + " ";
document.getElementById('f1').innerHTML += document.myform.major.value + " ";
document.getElementById('f1').innerHTML += document.myform.year.value + " ";
return false;
}
<body>
<form name="myform">
<p>
Name: <input name="name" size="30" type="text" /> course: <input name="major" size="30" type="text" /> Year : <input name="year" size="4" type="text" />
</p>
<input type="button" value="Add record" onClick='doSubmit(); return false' />
</form>
<p id='f1'></p>
</body>
You use a <br> tag to break the line inside a <p> tag.
You just have to make a small change in your function :
function doSubmit() {
document.getElementById('f1').innerHTML += document.myform.name.value + " ";
document.getElementById('f1').innerHTML += document.myform.major.value + " ";
document.getElementById('f1').innerHTML += document.myform.year.value + " ";
document.getElementById('f1').innerHTML +='<br />'
return false;
}
If you're looking to style your form values , it would be good to append <p>tag for each form value . It will require a small change like below :
function doSubmit() {
document.getElementById('form-value').innerHTML += '<p>'+ document.myform.name.value + " " + document.myform.major.value + " " + document.myform.year.value + " " + "</p>";
return false;
}
Your HTML :
<body>
<form name="myform">
<p>
Name: <input name="name" size="30" type="text" /> course: <input name="major" size="30"
type="text" /> Year : <input name="year" size="4" type="text" />
</p>
<input type="button" value="Add record" onClick='doSubmit(); return false' />
</form>
<div id="form-value">
</div>
I would suggest creating a new p element for every submitted input. You also don't want to store the user input into the innerHTML, because it can lead to cross-site scripting attacks. To prevent this, you can use innerText instead. Here is an example of how you can achieve all that with your code:
function doSubmit() {
const newInputParagraph = document.createElement("p");
newInputParagraph.innerText += document.myform.name.value + " ";
newInputParagraph.innerText += document.myform.major.value + " ";
newInputParagraph.innerText += document.myform.year.value + " ";
document.getElementById("inputs").appendChild(newInputParagraph);
}
And you need to add container for input results (simple div) to your markup, for example like this:
<form name="myform">
<p>
Name: <input name="name" size="30" type="text" /> course: <input name="major" size="30" type="text" /> Year : <input name="year" size="4" type="text" />
</p>
<input type="button" value="Add record" onClick='doSubmit(); return false' />
</form>
<div id="inputs"></div>
Related
I am trying to create form where I can submit two answers.
Alongside the form I would like to create an alert where the alert takes the input from the form when one of the buttons are clicked. That works fine.
Alongside the form I would like to create another button that displays the text from the form in html.
function htmlText(argument) {
document.getElementById("fname").innerHTML = alertText();
document.getElementById("lname").innerHTML = alertText();
}
function alertText(argument) {
return "Your name is: " +
document.getElementById("fname").value + " " +
document.getElementById("lname").value + ".";
}
<form>
<label>Name :</label><input type="text" id="fname"> <br>
<label>Name2 :</label><input type="text" id="lname"> <br>
</form>
<button onclick="htmlText()">html</button>
<button onclick="window.alert(alertText())">alert</button>
You likely meant to do this
Note the user of recommended eventListeners instead of inline event handlers
window.addEventListener("load", function() { // on page load
function getText() {
return "Your name is: " +
document.getElementById("fname").value + " " +
document.getElementById("lname").value + ".";
}
document.getElementById("htmlButton").addEventListener("click", function() {
document.getElementById("fullName").innerHTML = getText();
});
document.getElementById("alertButton").addEventListener("click", function() {
alert(getText());
});
});
<form>
<label>Name :</label><input type="text" id="fname"> <br>
<label>Name2 :</label><input type="text" id="lname"> <br>
</form>
<button type="button" id="htmlButton">html</button>
<button type="button" id="alertButton">alert</button>
<sid id="fullName">
</div>
I made a calculator with specific properties in HTML and I would like for the user to be able to press enter to show both of display1() and display2().
In other words, I want the enter key to trigger button Both.
Here is the code I have and what I have tried so far I attempted to add:
<!DOCTYPE html>
<html>
<head>
<title>Square Yards Calculator</title>
</head>
<body>
<div id='calc-contain'>
<form name="calculator">
<input type="text" name="answer" />
<br>
<input type="button" value=" 1 " onclick="calculator.answer.value += '1'" />
<input type="button" value=" 2 " onclick="calculator.answer.value += '2'" />
<input type="button" value=" 3 " onclick="calculator.answer.value += '3'" />
<input type="button" value=" + " onclick="calculator.answer.value += '+'" />
<br/>
<input type="button" value=" 4 " onclick="calculator.answer.value += '4'" />
<input type="button" value=" 5 " onclick="calculator.answer.value += '5'" />
<input type="button" value=" 6 " onclick="calculator.answer.value += '6'" />
<input type="button" value=" - " onclick="calculator.answer.value += '-'" />
</br>
<input type="button" value=" 7 " onclick="calculator.answer.value += '7'" />
<input type="button" value=" 8 " onclick="calculator.answer.value += '8'" />
<input type="button" value=" 9 " onclick="calculator.answer.value += '9'" />
<input type="button" value=" Flex61 " onclick="display1()" />
</br>
<input type="button" value=" c " onclick="calculator.answer.value = '',
document.getElementById('printhere1').innerHTML= '',
document.getElementById('printhere2').innerHTML= ''" />
<input type="button" value=" 0 " onclick="calculator.answer.value += '0'" />
<input type="button" value=" Both " onclick="display1(),display2()" />
<input type="button" value=" Gap55 " onclick="display2()" />
</br>
</form>
<div id="agh">
<p>Enter how many Square yards (SY) you are covering</p>
<p id="printhere1"></p>
<p id="printhere2"></p>
</div>
</div>
<script type="text/javascript">
function display1(){
//Assigning the variable to the user input
var squareyards = eval(calculator.answer.value);
if (squareyards < 0 || squareyards == null){
squareyards = 0
}
var pounds = 5
pounds = squareyards * pounds
// to print the input here
document.getElementById("printhere1").innerHTML = "For "+ squareyards + " SY sou need: "+ pounds + " lbs of Elasto Flex61";
}
function display2(){
//Assigning the variable to the user input
var squareyards = eval(calculator.answer.value);
if (squareyards < 0 || squareyards == null){
squareyards = 0
}
var rolls = 9
rolls = Math.ceil(squareyards * rolls / 103)
// to print the input here
document.getElementById("printhere2").innerHTML = "For "+ squareyards + " SY sou need: "+ rolls + " Rolls of Gap55 Smooth";
}
$(function(){
$(':text').bind('keydown',function(e){ //on keydown for all textboxes
if(e.keyCode==13){ //if this is enter key
e.preventDefault();
e.display1();
e.display2();
}
});
});
</script>
</body>
</html>
You're almost there. It looks like you have a mix of native JavaScript, the document.getElementById stuff and jQuery for the keydown functionality. jQuery's not necessary so I would recommend just using native JavaScript for everything.
So I would refactor this bit:
$(function(){
$(':text').bind('keydown',function(e){ //on keydown for all textboxes
if(e.keyCode==13){ //if this is enter key
e.preventDefault();
e.display1();
e.display2();
}
});
});
To be native JavaScript:
// Capture enter button event on entire page
document.addEventListener('keydown', getAnswer);
// I made it a separate function in case you want to re-use
function getAnswer(e) {
if (e.keyCode==13) { //if this is enter key
e.preventDefault();
display1();
display2();
}
}
Here is a working codepen.
However, this is just the first step to get it working. Like #certainperformance said the next step would be to remove the document.getElementByIds from the "Clear" button onclick and move them to a separate function.
Hope this helps.
I'm trying to take the user input of the form and on submit, populate a space in the DOM with the input. I also want to be able to print multiple user inputs in the same space (i.e. something like printing an array of user inputs onto the page each time a user submits)
function create_list_markup() {
document.getElementById("display").innerHTML =
"<h1 class='list-title'>"
+ document.getElementById('title').value + "</h1>"
+ "<br><br>"
+ "Recipient: "
+ document.getElementById('recipient').value
+ "<br>" + "Link: "
+ document.getElementById('link').value
+ "<br>"
+ "Price: "
+ document.getElementById('price').value;
}
function create_gift_markup(gift) {
const markup = `
<p>
<span class=''> ${gift.title} </span><br>
<span class=''> ${gift.recipient} </span><br>
<span class=''> ${gift.link} </span><br>
<span class=''> ${gift.price} </span><br>
</p>`;
return markup;
}
function insert_gifts(gift_markup) {
const gift_fragment = document.createDocumentFragment();
gift_markup.forEach(function __append_markup_to_docfrag(markup) {
let container_element = document.createElement('span');
container_element.insertAdjacentHTML('afterbegin', markup);
gift_fragment.appendChild(container_element.firstElementChild);
});
document.body.appendChild(gift_fragment);
}
function create_list_markup() {
const gift_markup = create_gift_markup(gifts)
insert_gifts(gift_markup)
}
The create_list_markup function works and prints out the user input to the screen (in conjunction with a div with an id of "display"), however I wanted to print multiple outputs to the same space, so I wrote the rest of the code. That's the stuff that doesn't work.
Here is the markup:
<h1>Christmas Gifts</h1>
<form class="gift-form" name="giftform" action="" id="gift">
<h2>Gift Submit Form</h2>
<label>Title of Gift</label>
<input type="text" name="title" value="" placeholder="Enter a title" id="title">
<label>Recipient of Gift</label>
<input type="text" name="recipient" value="" placeholder="Enter a recipient" id="recipient">
<label>Link to Gift Picture</label>
<input type="text" name="link" value="" placeholder="Enter link to picture" id="link">
<label>Price of Gift</label>
<input type="text" name="price" value="" placeholder="Enter price" id="price">
<button type="button" value="Submit" onClick="create_list_markup()">Submit</button>
</form>
<div class="list-box">
<h2>Gift List</h2>
<div id="display"></div>
</div>
I'm trying to make a form which when I click the submit button will send the information from the form fields to a javascript function and then show the results to the user. I've made something like this before that's very similar and works fine, but for some reason this isn't doing anything when I click submit. I must have missed something. Here's the code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" >
<title>Javascript Form</title>
</head>
<body>
<form id="formID" name="myform" action="" method="get">
Customer Name:
<input type="text" name="names" value="">
<br/>
Street Address:
<input type="text" name="street" value="">
<br/>
City:
<input type="text" name="city" value="">
<br/>
State:
<input type="text" name="state" value="">
<br/>
Zip Code:
<input type="text" name="zip" value="">
<br/>
Beginning Odometer Reading:
<input type="text" name="beginO" value="">
<br/>
Ending Odometer Reading:
<input type="text" name="edinO" value="">
<br/>
Number of Days Car was Used:
<input type="text" name="days" value="">
<br/>
<input type="button" name="button" value="Submit" onClick="car(this.form)">
</form>
<script type="text/javascript">
function car(form) {
var names = form.names.value;
var street = form.street.value;
var city = form.city.value;
var state = form.state.value;
var zip = form.zip.value;
var beginO = form.beginO.value;
var endO = form.endO.value;
var days = form.days.value;
var miles = endO - beginO;
var charge = days * 15 + miles * 0.12;
alert("Miles driven: " + miles + ". Charge: " + charge + ". Name: " + names + ". Address : " + street + " , " + city + " " + state + " " + zip + ". ");
}
</script>
</body>
</html>
It's because you have a JavaScript error at this line:
var endO = form.endO.value;
You have a typo in your form element name:
<input type="text" name="edinO" value="">
form.endO is undefined, so getting value throws an error.
I am trying to input a break tag at the end of each line of code so that it doesn't just read all in one line inside the input box.
I have encoded the break tag as i thought that's how you can use html inside of an input box but for some reason it is just showing exactly what i have typed.
Any help to correct this would be much appreciated.
This is what i have so far. I have only encoded one of the break tags for demonstration purposes, just to show you what i have done.
<div data-role="content" id="feedbackcontent">
<form action="MAILTO:bg54wl#student.sunderland.ac.uk" method="post" enctype="text/plain" id="fback">
<label for="fname">Full Name:</label>
<input type="text" name="fname" id="fname" data-clear-btn="true" placeholder="Your Full name..." required>
<label for="email">Email:</label>
<input type="text" name="email" id="email" data-clear-btn="true" placeholder="Your Email Address..." required email>
<label for="comments">Comments (Optional):</label>
<input type="text" name="comments" id="comments" data-clear-btn="true">
<label for="deviceinfo" id="deviceinfo">Device Information:
<input style="height:50px;" readonly name="deviceinfo" id="deviceinformation"/>
</label>
<input type="submit" value="Send">
</form>
</div>
</div><!-- /content -->
<script>
document.addEventListener('deviceready', function(event) {
var content = "";
content += "Version: " + device.cordova + "<br/>";
content += "Platform: " + device.platform + "<br/>";
content += "Device Model: " + device.model + "<br/>";
content += "Platform Version: " + device.version + "<br/>";
content += "UUID: " + device.uuid + "<br/>";
var element = document.getElementById("deviceinformation").value = content;
}, false );
</script>
Input tags completely ignore newlines.
You can use a textarea instead. Textareas preserve whitespace.
<textarea name="theName">
You can have
Multiple lines
In textareas
</textarea>