using java script, save text fields data in java script variable
assign java script variable value to html span tag.
Working Properly:
Form takes data successfully.
java script variable successfully store data of text field.
Problem:
1.When i assign java script variable to HTML span tag’s ID using innerHTML or innerText : it display me form text fields data in span tag place for a second and then replace it with by default text of span.
e.g
<span id="abc">Hello</span>
Here, suppose i replace value of FIrst Name from form.It display First Name for a second and on eye blink it disappears and display Hello there.
I shall be very thankful to you guys if you will help me out.
Thank you
While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://www.freecodecamp.org/learn.
With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).
It is pretty typical on here for people to share a codepen / repl.it / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.
Please provide some example of what you’ve tried and I’m sure you’ll get more help.
Thank you for you reply ma’am
This is the html and js of what i am doing and what i’ve try
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
<!--external css file,inside "css" folder with "main.css" file name-->
<link rel="stylesheet" type="text/css" href="css/main.css" />
<!--external javascript file,inside "js" folder with "invitation.js" file name-->
<script type="text/javascript" src="js/invitation.js"></script>
</head>
<body>
<!-- header that contains main menu -->
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li><a href="index.html">Home</a>
</li>
<li><a href="invitation.html" class="active">Invitation</a>
</li>
<li><a href="gallery.html">Gallery</a>
</li>
<li><a href="registration.html">Registration</a>
</li>
</ul>
</nav>
</header>
<!-- header closed -->
<section id="pageForm">
<!-- HTMl form -->
<form action="#">
<label for="recipientName">Recipient name:</label>
<input type="text" name="recipientName" id="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:
</label>
<input type="text" name="organizationName" id="organizationName" placeholder="Enter your Organization Name" />
<label for="eventDate">Event Date:
</label>
<input type="text" name="eventDate" id="eventDate" placeholder="Enter your Event Date" />
<label for="websiteURL">URL:
</label>
<input type="text" name="websiteURL" id="websiteURL" placeholder="Enter your Website URL" />
<label for="hostName">Host name:
</label>
<input type="text" name="hostName" id="hostName" placeholder="Host Name" />
<input type="submit" value="Submit" onclick="invitationWelcome()">
</form>
</section>
<article id="placeholderContent">
<!-- input field data will display here -->
Hello <span id="rName">recipientName</span>!
<br/>
<br/> You have been invited to volunteer for an event held by <span id="oName">organizationName</span> on <span id="eDate">eventDate</span>. Please come to the following website: <span id="wURL">websiteURL</span> to sign up as a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id="hName">hostName</span>
</article>
<footer>This events site is for IT-FP3215 tasks.
</footer>
</body>
</html>
/**
variable declaration to store input field data
*recipient_Name take recipient name
*organization_Name take organization name
*event_Date take event date
*website_URL take website URL
*host_Name take host name
**/
var recipient_Name;
var organization_Name;
var event_Date;
var website_URL;
var host_Name;
/**
*invitationWelcome is a function name
*it will extract value from input text fields
*replace text of span to input text fields
**/
function invitationWelcome() {
/**
store input fields data in variables on clicking submit button
*value in ID=recipientName will assign to recipient_Name
*value in ID=organizationName will assign to organization_Name
*value in ID=eventDate will assign to event_Date
*value in ID=websiteURL will assign to website_URL
*value in ID=hostName will assign to host_Name
**/
recipient_Name = document.getElementById("recipientName").value;
organization_Name = document.getElementById("organizationName").value;
event_Date = document.getElementById("eventDate").value;
website_URL = document.getElementById("websiteURL").value;
host_Name = document.getElementById("hostName").value;
/**
*replace placeholder data with the variables
*recipient_Name assign to placeholder of recptName
*organization_Name assign to placeholder of orgName
*event_Date assign to placeholder of evntDate
*website_URL assign to placeholder of webURL
*host_Name assign to placeholder of hstName
**/
document.getElementById("rName").innerText = recipient_Name;
document.getElementById("oName").innerText = organization_Name;
document.getElementById("eDate").innerText = event_Date;
document.getElementById("wURL").innerText = website_URL;
document.getElementById("hName").innerText = host_Name;
}
I wish I could help you more through Team Viewer or something.
I do have an account but unfortunately I haven’t been very active on it lately but I would love to do the tasks.
