I have a form code tat will allow the user to enter information. I'm trying to display certain parts of that information onto a new page using javascript. Basically, the page is meant to have the user enter information and have the name, date, time, and email display in a new tab or page. But I can't seem to have it displayed. Can anyone help me?
<html lang="en" >
<head>
<title>Shy Music Booking Confirmation</title>
<link rel="stylesheet" href="music.css" type="text/css" />
<body>
<div id="wrapper">
<div id="form">
<header><h1>Shy Music Private Lessons</h1></header>
<script type="text/javascript">
function addtext()
{
var userName = document.booking.userName.value;
var userDate = document.booking.userDate.value;
var userTime = document.booking.userTime.value;
var userEmail = document.booking.userEmail.value;
document.writeln("Thank you! You have just entered the following:");
document.writeln("<pre>");
document.writeln("Name: " + userName);
document.writeln("Date: " + userDate);
document.writeln("Time: " + userTime);
}
</script>
</head>
<hr>
<form name="booking">
<h1>Book a Slot Here!</h1>
<label for="userName">Name: <br><input type = "text" name = "userName"></label> <br><br>
<label for="userEmail">E-mail Address: <br><input type = "email" name = "userEmail"></label><br><br>
<label for="userPhone">Phone Number: <br><input type = "tel" name = "userPhone"> </label><br><br>
<label for="userInstrument">Instrument:
<select>
<option>Guitar</option>
<option>Drums</option>
<option>Piano</option>
</select>
</label>
<br><br>
<label for="userTime">
Preffered Time:
<select>
<option>9:00</option>
<option>9:30</option>
<option>10:00</option>
<option>10:30</option>
<option>11:00</option>
<option>11:30</option>
<option>12:00</option>
<option>12:30</option>
<option>1:00</option>
<option>1:30</option>
<option>2:00</option>
<option>2:30</option>
<option>3:00</option>
<option>3:30</option>
<option>4:00</option>
<option>4:30</option>
</select>
</label>
<select>
<option>AM</option>
<option>PM</option>
</select>
<br>
<br>
<label for="userDate">Date: <br><input type = "date" name = "userDate"></label><br><br>
<input type="submit" value="Submit" >
<form action="#">
<input type="button" value = "Back" onclick="javascript:history.go(-1)" />
</form>
</form>
</div>
</div>
</body>
</html>
I was working on this for a lot of time, but it wasn't working. But, I tried it recently and it worked! I hope this was helpful.
<html>
<head>
<h1> Welcome</h1>
</head>
<body>
<p> Enter name: </p>
<input id="name" name="name"class="Name" type="text" placeholder="Enter Full name" required>`
<input type="Submit" onclick="submitted()"> <br> <br>
<a id="new" href="www.google.com"> </a>
<script>
function submitted()
{
var a = document.getElementById("name").value;
if (a=="")
{
document.getElementById("new").innerHTML="";
alert("Please Enter a valid name!");
}
else if (a==" ") {
document.getElementById("new").innerHTML=""
alert("Please Enter a valid name!");
}
else
{
document.getElementById("new").innerHTML="Thank you, " + a + ". " + "Click here to continue.";
}
}
</script>
</body>
</html>
Or, slightly tightened, as a working snippet:
function submitted()
{
var a = document.getElementById("name").value.trim();
document.getElementById("new").innerHTML=
a===""?"":"Thank you, " + a + ". " + "Click here to continue.";
}
<p> Enter name: </p>
<input id="name" name="name"class="Name" type="text" placeholder="Enter Full name" required>
<input type="Submit" onclick="submitted()"> <br> <br>
<a id="new" href="www.google.com"> </a>
The problem with your code was that you were using document.write in a dynamic setting. When using it in this context, document.write will erase the content of the current document and replace it with the text specified by its parameters. For this reason, document.write is commonly regarded as poor way to represent and insert text/data. And it typically affects the plethora of beginners learning JavaScript. Here are some alternatives you should keep in mind:
element.innerHTML: Like I said in the comments. Use .innerHTML to insert the formatted HTML into document through an element on the page. It doesn't necessarily have to be specified by an id attribute. It can very well be given by any other form of element obtainment.
node.appendChild: This method is more DOM-friendly than the first. It allows you to insert a node at the end of the body of the element specified by node. For example:
var form = document.myForm,
new_element = document.createElement('input');
new_element.type = "button";
new_element.value = "Submit";
form.appendChild( new_element );
I hope this helped.
Related
Hey so I am new to using JS and HTML and still practicing the language, I am trying to print out the user name of both players but without using alert. I want to print the player's names and later going to change it up using CSS but having trouble with the simplest way of printing user inputs I have this so far and was wondering why it is not working, any help will be appreciated.
function welcome(){
var first = document.getElementById("FirstName").value;
var last = document.getElementById("LastName").value;
var Print_name = "Welcome " + first +" "+ last;
console.log(Print_name);
}
<!DOCTYPE html>
<html>
<head>
<title>Print Names</title>
</head>
<body>
<form method="get">
<label for="Player1Name">Player 1 Name:</label>
<input type="text" id="Player1Name" name="player1Name" placeholder="Name"><br>
<label for="Player2Name">Player 2 Name:</label>
<input type="text" id="Player2Name" name="player2Name" placeholder="Name"><br>
<input type="submit" value="Submit" class="btn">
</form>
<script>
/*javascript code here*/
</script>
</body>
</html>
You should find an HTML element (with id="Player1Name") and (with id="Player2Name").
Try it code in HTML
<input type="submit" value="Submit" class="btn" onclick="welcome()">
Try it code in JavaScript
function welcome(){
var first = document.getElementById("Player1Name").value;
var last = document.getElementById("Player2Name").value;
var Print_name = "Welcome " + first +" "+ last;
alert(Print_name);
}
your document.getElementById is referencing the wrong Id.
So if you text field is defined as
<input type="text" **id="Player1Name"** name="player1Name" placeholder="Name">
Then what you should be doing is document.getElementById("Player1Name").value
The same goes with the Player2Name field.
I'm fairly new to programming but was wondering how I could attach a users first/last name after my domain to make a custom URL?
I have a form that asks for a users name, email, phone, and how many kids they need babysat.
Once they submit the form I want the success page to show a custom url: domain.com/firstLast and then theoretically they can share their link with other people for a possible discount.
I have the copy function working but I cannot seem to get the url to display. Please help!
<body>
<section>
<container>
<div>
<div .form-wrapper>
<form>
<div .slider>
<div .slide>
<div .form-content>
<input type="text" id="name">
</div>
</div>
<div .slide>
<div .form-content>
<input type="email" id="email">
</div>
</div>
<div .slide>
<div .form-content>
<input type="tel" id="phone">
<input type="submit" id="contactMe">
</div>
</div>
</div>
</form>
<div class="success-message">
<div>
<input type="text" name="share-link" id="share-link">
<button onclick="myFunction()">Copy Url</button>
<script>
slug = document.getElementById("name").value;
slug = slug.replace(/\s/g, '');
url = "https://babysittingmadeeasy.com/" + slug;
document.getElementById("share-link").value = url;
<script>
....
On your form tag
<form id="onboarding-form">
And your js
<script>
document.getElementById('onboarding-form').onsubmit = function(event){
event.preventDefault();
slug = document.getElementById("name").value;
slug = slug.replace(/\s/g, '');
url = "https://babysittingmadeeasy.com/" + slug;
document.getElementById("share-link").value = url ;
}
<script>
Try moving your Javascript after your HTML:
<input type="text" name="share-link" id="share-link">
<button onclick="myFunction()">Copy Link</button>
<script>
slug = document.getElementById("name").value;
slug = slug.replace(/\s/g, '');
url = "https://babysittingmadeeasy.com/" + slug;
document.getElementById("share-link").value = url;
</script>
As your code is currently written, your Javascript will execute before the element share-link exists.
Here is some problems:
Where is html tag with id="name". I also add 1 input tag with this attribute for you.
Just replace the region below the defined html tag. Or put it on function - make sure that the script run after element is created.
Done. There is my test and result:
<input type="text" id="name" class="hidden" value="demoname"/>
<input type="text" name="share-link" id="share-link">
<button onclick="myFunction()">Copy Link</button>
<script>
var slug = document.getElementById("name").value;
slug = slug.replace(/\s/g, '');
url = "https://babysittingmadeeasy.com/" + slug;
document.getElementById("share-link").value = url;
</script>
screenshot of result with this code
Best Regards,
i'm with a ridiculous problem (i think). I just can't get a tag content using a Script/Function/document.getElementById. The alert tha i'm using to see the content of variable (wM) is always blank. I looked a lot of examples in the Web and all of them is similar, sometimes just like my code. See below:
<!DOCTYPE html>
<html lang ="pt-br">
<head>
<title> loginServlet2 </title>
<meta http-equiv = ”Content-Type” content=”text/html; charset=UTF-8”>
<link rel="stylesheet" type="text/css" href="c:/java/html/css/estilo.css"/>
<script type="text/javascript">
function oMsg()
{
var wM = document.getElementById("wMsgB").textContent;
// var wM = document.querySelector("span").textContent;
alert("wM = "+ wM);
if (wM == "Teste OK!")
{
// document.getElementById("wMsgA").innerHTML = "Test is OK";
document.getElementById("wMsgA").textContent = "Test is OK";
}
else
{
alert("Test is not OK. Before set new msg");
document.getElementById("wMsgA").textContent = "Test is not OK";
}
}
</script>
</head>
<body>
<h2> Login Page2 </h2>
<p>Please enter your username and password</p>
<form method="GET" action="loginServlet2">
<p id="test2"> Username <input type="text" name="userName" size="50"> </p>
<p> Password <input type="password" name="password" size="20"> </p>
<p> <input type="submit" value="Submit" name="B1" onclick="oMsg()"> </p>
</form>
<h3> MsgB : <span id="wMsgB"<%=request.getAttribute("wMsg")%></span></h3>
<p> MsgA : <span id="wMsgA"> </span> </p>
</body>
</html>
Could anyone help me, please? Thanks.
You are trying to get the value of a p element, but p elements don't have a value property. Only form fields do. Non-form fields that contain text between their opening and closing tags have .textContent and .innerHTML properties you can use to get/set their contents.
If you want to give the user a place to type in some data, you need to create some input form fields and then you have to wait until they've done that before attempting to get the values.
Next, you have smart quotes “” instead of straight quotes "" which can cause encoding problems. Make sure you write your code in an editor that doesn't apply any formatting to the code. There are plenty of great free web editors out there.
You also have a reference to a .css file using a full local path, which isn't going to work when you deploy this code later. You should be using relative paths to reference files that are part of your system.
Finally, you are using some old HTML syntax in your meta, link and script tags, so take note of the modern versions of those in the snippet below.
<head>
<title>loginServlet2</title>
<meta charset=UTF-8”>
<link rel="stylesheet" href="c:/java/html/css/estilo.css"/>
<script>
function oMsg() {
var wM = document.getElementById("wMsg").textContent;
alert("wM = " + wM);
if (wM == "Test OK!") {
document.getElementById("wMsgA").textContent = "Test is OK";
} else {
alert("Test is not OK. Before set new msg");
document.getElementById("wMsgA").textContent = "Test is not OK";
}
}
</script>
</head>
<body>
<h2> Login Page2 </h2>
<p>Please enter your username and password</p>
<form method="GET" action="loginServlet2">
<p id="test2"> Username <input type="text" name="userName" size="50"> </p>
<p> Password <input type="password" name="password" size="20"> </p>
<p> <input type="submit" value="Submit" name="B1" onclick="oMsg()"> </p>
</form>
<h2>MsgB : <span id="wMsg"><%=request.getAttribute("wMsg")%></span> </h2>
<p>MsgA : <span id="wMsgA"> </span> </p>
I have a form on a website that requires two text inputs and two radio inputs (one radio input currently not working because I can't figure out how to get them both to print instead of one overwriting the other). Upon hitting submit, the information posts underneath the form. I am trying to make it so that when the page is refreshed, the previously entered information will not disappear. Is there a simple way to achieve this?
I have heard about setting return onsubmit=false but have had no success so far.
<!--COMMENTING FORM-->
<div>
<div id="getdata">
<form id="form1" onsubmit="return confirmdata(false)">
<!--Input (text) asking for input of name-->
<p><b>Name:</b><br><input type="text" name="nameValue" value="" id="nameValue"></p>
<!--Input (radio) asking for type of output:
<p><b>Type of Event:</b></p>
<input type="radio" name="eventType" value="Food"> Food</br>
<input type="radio" name="eventType" value="Study"> Study</br>
<input type="radio" name="eventType" value="Event"> Event</br>
<input type="radio" name="eventType" value="Danger"> Danger</br>
TO DO FIX LATER -->
<!--Input (radio) asking for location: -->
<br>
<p><b>Location:</b></p>
<input type="radio" name="locationType" value="Library West"> Library West</br>
<input type="radio" name="locationType" value="Smathers Library"> Smathers Library</br>
<input type="radio" name="locationType" value="Marston Library"> Marston Library</br>
<input type="radio" name="locationType" value="Turlington Plaza"> Turlington Plaza</br>
<!--Input (text) asking for input of description-->
<br>
<p><b>Description:</b><br><input type="text" style="width:200px; height:50px;" name="desValue" value="" id="desValue"></p>
<!--submit button-->
<p><input type="submit" name="myButton" value="Submit!">
<input type="reset" value="Reset Form"></p>
</form>
</div>
<div id="confirm">
</div>
</div>
</body>
<!--COMMENTING FORM END-->
<!-- COMMENTING FORM SCRIPT -->
<script type="text/javascript">
var txt1 = document.getElementById('nameValue');
var types = document.getElementsByName('eventType');
var types = document.getElementsByName('locationType');
var txt2 = document.getElementById('desValue');
document.getElementById("form1").addEventListener("submit", confirmdata);
function confirmdata(event) {
event.preventDefault();
var nameValue = txt1.value;
var selected = 'none';
var desValue = txt2.value;
for (var i = 0; i < types.length; i++) {
if (types[i].checked === true) {
selected = types[i].value;
}
}
if (selected !== 'none' && nameValue !== '') {
//document.getElementById("confirm").innerHTML += '<p><b>Name:</b> ' + nameValue + '</p>';
//document.getElementById("confirm").innerHTML += '<p><b>Event Type:</b> ' + selected + '</p>';
//document.getElementById("confirm").innerHTML += '<p><b>Additional Details: </b>' + desValue + '</p>';
document.getElementById("confirm").innerHTML += '<p> User <b>' + nameValue + '</b> has an event located at <b>' + selected + '</b>. <br><b> Additional details: </b>' + desValue + '</p>';
document.getElementById("confirm").innerHTML += '<p><b>--------------------</b> ' + '</p>';
} else {
alert('Invalid input');
}
return false;
}
</script>
<!-- COMMENTING FORM SCRIPT END -->
</form>
</div>
</div>
either store the information on local storage or intercept the onsubmit event (edit: as a result, form submission triggers js function, but not page reload).
<form onsubmit="return myFunction()">
<!-- put form elements here -->
</form>
<script>
function myFunction(){
//do stuff here
return false
}
</script>
You could always use ajax for form submission without reloading.
you can store the data in browser local storage and on page load take the data from local storage and place in required fields. Always clear the locally stored data once form submitted successfully. Be sure not to store personal data there are high chances of data leak if it is a shared PC.
I am studying web design for first year in university. We have just started and I am trying to do different things with my basic knowledge of html. My question is how can it show the text entered in a form after clicking a button? I tried something but it's not working.
This is my wrong code:
<body>
<script>
function name(name1)
{ alert ("Your name is" + name1)
}
</script>
Enter a name:
<form> <input type="text" name="name1"/></form> </br>
<button onclick="name(name1)">Click!</button>
</body>
You can to use querySelector, to get the element based using attribute selector.
<script>
function yourMethod(name1) {
var inputName = document.querySelector('input[name=' + name1 + ']').value;
console.log("Your name is: " + inputName)
}
</script>
Enter a name:
<input type="text" name="name1" />
<button onclick="yourMethod('name1')">Click!</button>
Try this
<body>
<script>
function name1(name)
{
alert("Your name is " + name);
}
</script>
Enter a name:
<form> <input type="text" name="name" id="name"/></form> </br>
<button onclick="name1(document.getElementById('name').value)">Click!</button>
</body>
try this
<body>
<script>
function name()
{
var value = document.getElementById('name1').value;
alert("Your name is" + value);
}
</script>
Enter a name:
<form>
<input type="text" id="name1" name="name1" />
</form>
</br>
<button onclick="name();">Click!</button>
</body>
make onclick="name()"
then function name(){ alert( document.querySelector("input[name='name1']").value ) }
what it does is when the button gets clicked, the function name is called. This will alert the text by finding the element with the querySelector. The query selector returns an element, if found. You can access every elements attribute with element.attributeName.
In this case you want to use querySelecor because querySelectorAll will return a nodelist. Where querySelector will return only an element