I need to take five inputs from text into a form, with a single block for each input, and output a sentence equating to this:
(firstName) (lastName) has the role of (role) in (class) section (sectionNumber)
note that I can not use onclick.
I'll be honest, html I can figure out, javascript not so much. I dont event know where to start looking for an answer. do i need an array? If i need to change my html thats ok, but i know my js is absolutley not working. Any help at all would be apreciate!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a>Enter First Name</a>
<br>
<input type="text" id="firstName"></input>
<br>
<a>Enter Last Name</a>
<br>
<input type="text" id="lastName"></input>
<br>
<a>Enter Your Course</a>
<br>
<input type="text" id="course"></input>
<br>
<a>Enter Your Section</a>
<br>
<input type="text" id="section"></input>
<br>
<a>Enter Your Role</a>
<br>
<input type="text" id="role"></input>
<p id="nameOutput"></p>
<br>
<input type="button" id="btn" value="Submit">
<script>
function sentence(firstName,lastName,course,section,role){
this.sentence = sentence;
}
sentence.prototype.speak = function(){
console.log('${firstName}+${lastName} has the role of ${role} in ${class} section ${section}.');
}
</script>
</body>
</html>
i was atempting to use the class function to create a whole sentence without draging all of the elements declared in my html over one by one. as it is, i get no output. but i have a feeling if i did get an output, it would be incorect.
If you react on the "input" event of each input field you can get along without the "submit" button:
const [fn, ln, crs, sct, rol, out] ="firstName,lastName,course,section,role,nameOutput"
.split(",").map(id=>document.getElementById(id));
document.body.addEventListener("input",showit);
showit();
function showit(){out.textContent=`${fn.value} ${ln.value} has the role of ${rol.value} in ${crs.value}, section ${sct.value}.`}
<label>Enter First Name</label>
<br>
<input type="text" id="firstName" value="Harry">
<br>
<label>Enter Last Name</label>
<br>
<input type="text" id="lastName" value="Potter">
<br>
<label>Enter Your Course</label>
<br>
<input type="text" id="course" value="Magic Creatures">
<br>
<label>Enter Your Section</label>
<br>
<input type="text" id="section" value="B">
<br>
<label>Enter Your Role</label>
<br>
<input type="text" id="role" value="apprentice">
<p id="nameOutput"></p>
I also replaced your <a> elements with <label> elements.
Related
I have a requirement to display additional input tags based on user radio tag. I pasted the working code here. I wanted to display spouse first name and last name input tags. If not, will have to display father and mother first and last name. But problem is, I see a gap in between, which I don't want. Any help?
<!DOCTYPE html>
<html>
<head>
<script>
function check() {
if (document.getElementById('Married').checked)
{
document.getElementById('ifYes').style.visibility = 'visible';
}
else
document.getElementById('ifYes').style.visibility = 'hidden';
}
</script>
<form>
First Name <input type="text" id="UserFirstName" value="Your First Name">
Last Name <input type="text" id="UserLastName" value="Your Last Name"></br></br>
Marital Status <input type="radio" id="Married" name="MarStatus" onclick="javascript:check();" >Married <input type="radio" id="UnMarried" name="MarStatus" onclick="javascript:check();">UnMarried </br></br>
<div id="ifYes" style="visibility:hidden">
Spouse First Name <input type="text" id="SpouseFirstName" value="Spouse First Name">
Last Name <input type="text" id="SpouseLastName" value="Spouse Last Name"></br></br>
</div>
Father First Name <input type="text" id="FatherFirstName" value="Father First Name"> Last Name <input type="text" id="FatherLastName" value="Father Last Name"></br></br>
Mother First Name <input type="text" id="FatherFirstName" value="Mother First Name"> Last Name <input type="text" id="FatherLastName" value="Mother Last Name"></br>
</br>
<button onclick="window.location.href='b.php'">Submit</button>
</form>
</body>
</html>
visibility:hidden will keep the element in the page and occupies that space but does not show to the user.
display:none will not be available in the page and does not occupy any space.
You should use display:none.
Also you are using </br> wrongly, should be <br/> or simply <br>. Though I suggest you not to use that. Instead you can wrap the related information with div element and use css to set the style (margin property).
Another issue is you should use the value attribute in the radio button based on which you can set the style inside the function.
Try the following way:
<script>
function check(el) {
if (el.value == "Married") {
document.getElementById('ifYes').style.display = 'block';
}
else
document.getElementById('ifYes').style.display = 'none';
}
</script>
<form>
<div style="margin-bottom:20px;">
First Name <input type="text" id="UserFirstName" value="Your First Name">
Last Name <input type="text" id="UserLastName" value="Your Last Name">
</div>
<div style="margin-bottom:20px;">
Marital Status <input type="radio" value="Married" name="MarStatus" onclick="javascript:check(this);" >Married <input type="radio" value="UnMarried" name="MarStatus" onclick="javascript:check(this);">UnMarried
</div>
<div id="ifYes" style="display:none; margin-bottom:20px;">
Spouse First Name <input type="text" id="SpouseFirstName" value="Spouse First Name">
Last Name <input type="text" id="SpouseLastName" value="Spouse Last Name">
</div>
<div style="margin-bottom:20px;">
Father First Name <input type="text" id="FatherFirstName" value="Father First Name"> Last Name <input type="text" id="FatherLastName" value="Father Last Name">
</div>
<div style="margin-bottom:20px;">
Mother First Name <input type="text" id="FatherFirstName" value="Mother First Name"> Last Name <input type="text" id="FatherLastName" value="Mother Last Name">
</div>
<button onclick="window.location.href='b.php'">Submit</button>
</form>
Replaced visibility:hidden by display:none
<!DOCTYPE html>
<html>
<head>
<script>
function check() {
if (document.getElementById('Married').checked)
{
document.getElementById('ifYes').style.display = 'block';
}
else
document.getElementById('ifYes').style.display = 'none';
}
</script>
<form>
First Name <input type="text" id="UserFirstName" value="Your First Name">
Last Name <input type="text" id="UserLastName" value="Your Last Name"></br></br>
Marital Status <input type="radio" id="Married" name="MarStatus" onclick="javascript:check();" >Married <input type="radio" id="UnMarried" name="MarStatus" onclick="javascript:check();">UnMarried </br></br>
<div id="ifYes" style="display:none">
Spouse First Name <input type="text" id="SpouseFirstName" value="Spouse First Name">
Last Name <input type="text" id="SpouseLastName" value="Spouse Last Name"></br></br>
</div>
Father First Name <input type="text" id="FatherFirstName" value="Father First Name"> Last Name <input type="text" id="FatherLastName" value="Father Last Name"></br></br>
Mother First Name <input type="text" id="FatherFirstName" value="Mother First Name"> Last Name <input type="text" id="FatherLastName" value="Mother Last Name"></br>
</br>
<button onclick="window.location.href='b.php'">Submit</button>
</form>
</body>
</html>
Use display:none; instead of visibility:hidden;
I'm new to JS and I practice, I want to connect between my form "firstname" to my function so when someone will click the button it will change the headline to "Hello ____ (his name)". I can't understand what should I add and where to my code so it will work. Thanks for your help.
<h1 class="example"> My Application </h1>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="" >
<br>
Last name:<br>
<input type="text" name="lastname" value="">
<br><br>
<input type="submit" value="Submit">
</form>
<button onclick="Hello(name)">Click here to change headline</button>
`<script>`
function hello(name){
return document.querySelector(".example").innerHTML = "Hello" + name ;
}
</script>
There's a few small issues in your code, but you were close. You're not passing anything into the function, you just have to get the values from your form. There are several ways to do this, but without overly complicating what you already have or understand, here's a working version.
<h1 class="example"> My Application </h1>
<form action="/action_page.php">
First name:<br>
<input type="text" id="firstName" name="firstname" value="" >
<br>
Last name:<br>
<input type="text" name="lastname" value="">
<br><br>
<input type="submit" value="Submit">
</form>
<button onclick="Hello()">Click here to change headline</button>
<script>
function Hello(){
var name = document.getElementById("firstName").value;
document.querySelector(".example").innerHTML = "Hello " + name ;
}
</script>
Notice the addition of the 'id="firstName"' attribute to your input.
I'm trying to make a simple drop down menu which will have two elements: "male" and "female". I'm using a button to have these elements become visible. The problem is that they become visible but only for a fraction of a second and go back to being hidden.
Here's my code:
<html>
<head>
<title>
Validation Form
</title>
</head>
<body>
<h1>
Validation Form
</h1>
<form id="contactForm" action="" >
<fieldset>
<legend>Validation</legend>
<p>
<label for="firstname">First Name</label>
<input id="firstname" name="firstname" type="text"/>
</p>
<p>
<label for="lastname">Last Name</label>
<input id="lastname" name="lastname" type="text" />
</p>
<p>
<label for="gender">Gender</label>
<input id="gender" name="gender" type="text" />
</p>
<div class="dropdown">
<button id="btn_drop" onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" style="display: none">
<p id="drop_male">Male</p>
<p id="drop_female">Female</p>
</div>
</div>
<p>
<label for="website">Website</label>
<input id="website" name="website" type="text" />
</p>
<p>
<input type="button" id="submit" name="submit" value="Submit" />
<input type="reset" value="clear" />
</p>
</fieldset>
</form>
<script>
var dropBtn = document.getElementById("btn_drop");
dropBtn.onclick = function () {
// show all elements on clicking submit!
var drop = document.getElementById("myDropdown");
drop.style.display = 'block';
}
</script>
</body>
</html>
Look at you browser console. I assume you have an error because you didn't declare myFunction.
Please read this URL: http://www.w3schools.com/jsref/event_onclick.asp and use one of described approaches.
you can make this without javascript live fiddle with css
<p>
<label for="gender">Gender</label>
<select id="gender" name="gender" type='select' >
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</p>
Whenever I in put details to a questionnaire I made, I press the button to confirm details but this links me to the page I want it saved to. I don't want this to happen as I need to complete more things down the page that are in different form controls.
So what I want is a button that saves the text box answer to the other page without linking it.
<form action="Assignmentcheckout.php" method="post">
<p>Surname:<input name="surname" type="text" required="required">
<br>
<br>
Name:<input type="text" name="firstname">
<br>
<br>
<input type="radio" name="gender" value="female">Female
<br>
<br>
<input type="radio" name="gender" value="male">Male
<br>
<br>
Street:<input type="text" name="street">
<br>
<br>
Suburb:<input type="text" name="suburb">
<br>
<br>
City:<input type="text" name="city">
<br>
<br>
State:<select name="state">
<option>QLD</option>
<option>NSW</option>
<option>VIC</option>
<option>TAS</option>
<option>WA</option>
<option>SA</option>
<option>NT</option>
</select>
<br>
<br>
<input type="radio" name="delivery" value="delivery">Delivery
<br>
<br>
<input type="radio" name="delivery" value="pickup">Pickup<br>
<br>
</p>
<button type="submit" value="Confirm details">Confirm details</button>
</form>
Please provide an answer
Ajax would transfer the information without refreshing the exiting page. If you are looking to keep data available for further inputs, you might want to look into using $_SESSION
I have a simple form which has has to be accessible. If someone misses a mandatory field, the a error should show on the top of the page where I placed a div tag. Now, after I click the submit button, it should show an error message on the top of page and then have a focus so that the screen reader can read it without refreshing the page. I am just not being able to focus on that error. Any suggestion would be really appreciated.
Thanks
My code looks like this
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script>
function myFunction() {
document.getElementById("errors").innerHTML = "ERROR ON THE FORM";
}
function getfocus() {
document.getElementById("errors").focus();
}
function printnfocus() {
if (myFunction()) {
getfocus();
}
}
</script>
</head>
<body>
<div id="errors"></div>
<fieldset>
<legend>Eligibility</legend> <input type="checkbox" id="citizen"> <label for="citizen">I am a U.S. citizen</label><br>
<input type="checkbox" id="18"> <label for="18">I am a 18 years old</label>
</fieldset>
<p>
<br>
</p>
<form id="sex" name="sex">
<fieldset>
<legend>Sex:</legend> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br>
<br>
</fieldset>
</form>
<fieldset>
<legend>Personal Information</legend>
<form>
<label for="lname">Last Name</label> <span title="lblAstrisk" class="asterisk" style="color:red">*</span> <input type="text" name="lname" id="lname" required=""><br>
<br>
</form>
</fieldset>
<p>
<button type="button" onclick="printnfocus()">Submit</button>
</p>
</body>
</html>
You are looking for window.scrollTo(). You can get the location of the errors div with this:
document.getElementById('errors').offsetTop