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.
Related
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.
I have three textboxes and a submit button. Need to enable submit button only when there is text in any of the 3 textboxes or else the button needs to be disbaled. What would be the code in angular1 or javascript to achieve this validation? Below is my code
First name:
<br>
<input type="text" id="textsend1" name="firstname1" value="Mickey">
<br>
Last name:<br>
<input type="text" id="textsend2" name="lastname" value="Mouse">
<br>
<br>
<input type="text" id="textsend3" name="firstname" value="Mickey">
<br>
<br>
<input type="submit" value="Submit" ng-disabled>
Try to add a class to enable or disable de button, check this url or just use ng-disabled
You can use a form and ng-required to accomplish this. With 3 textboxes it's manageable, but if you start to get more it can get a bit messy.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.firstname = '';
$scope.middlename = '';
$scope.lastname = '';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<form name="myForm">
First name:<br>
<input type="text"
name="firstname"
ng-model="firstname"
ng-required="!middlename && !lastname"><br>
Middle name:<br>
<input type="text"
name="middlename"
ng-model="middlename"
ng-required="!firstname && !lastname"><br>
Last name:<br>
<input type="text"
name="lastname"
ng-model="lastname"
ng-required="!firstname && !middlename"><br><br>
<input type="submit"
value="Submit"
ng-disabled="myForm.$invalid">
</form>
</div>
I´m looking for a way to run three google searches with three different keywords by one click.
Here´s what I got so far:
<form action="https://google.com/search" method="get" target="_blank">
<input type="text" id="q1" name="q" placeholder="first" required /><br>
<input type="text" id="q2" name="q" placeholder="second" required /><br>
<input type="text" id="q3" name="q" placeholder="third" required /><br>
<input type="submit" value="Google Search" />
</form>
It opens a new tab with a google search for all three keywords.
But I want it to open three different tabs/sites/frames... each one with a search for one keyword. I guess there´s a way to solve this problem with js but I know almost nothing about java script.
I need something like:
onsubmit = window.open("search1"); window.open("search2"); window.open("search3");
Hope you can help me.
Greetz
function openNewTab(url){
var redirectWindow = window.open(url, '_blank');
redirectWindow.location;
}
document.getElementById("asd").addEventListener("click", submit);
function submit(){
var a = document.getElementById('q1').value;
var b = document.getElementById('q2').value;
var c = document.getElementById('q3').value;
var url = "http://google.com/search?q=";
openNewTab(url+a);
openNewTab(url+b);
openNewTab(url+c);
}
<form>
<input type="text" id="q1" name="q" placeholder="first" required /><br>
<input type="text" id="q2" name="q" placeholder="second" required /><br>
<input type="text" id="q3" name="q" placeholder="third" required /><br>
<input type="submit" id="asd" value="Google Search" />
</form>
Well this is entirely based on user's browser settings whether he allows to open new tabs by scripts or not. Above code will only work if Popups are allowed in browser. I see no other way to sort it out
To test on your browser (Assume you're running chrome) , you can change settings here chrome://settings/content/popups in your browser and allow popups
I´ve got a solution... not very elegant but it works (sort of).
<form id="form1" action="https://google.com/search" method="get" target="_blank">
<input type="text" id="q1" name="q" placeholder="first" required /></form><br>
<form id="form2" action="https://google.com/search" method="get" target="_blank">
<input type="text" id="q2" name="q" placeholder="second" required /></form><br>
<form id="form3" action="https://google.com/search" method="get" target="_blank">
<input type="text" id="q3" name="q" placeholder="third" required /></form><br>
<button onclick="document.getElementById('form1').submit();
document.getElementById('form2').submit();
document.getElementById('form3').submit();"> Search </button>
For instance by hitting return while in an input field?
No, it's not. try the sample here: https://jsfiddle.net/tun8js68/
<form action="http://www.w3schools.com/html/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit" disabled>
</form>
You still can submit form with javascript.
before you blame me, yes I was looking for something similar for about a hour, but sadly I couldn't find my error, atleast the Questions I was looking for in stackoverflow didn't gave me a correct answere, as I have almost exactly the same thing (not Copy and Paste).
However could someone explain me, why my code (javascript) isn't working?
I am playing around with it for some hours now but I can't find it.
<html>
<head>
<title>Anmeldung/Login</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script>
function abc(){
var a = document.getElementById('pw').value;
var b = document.getElementById('repw').value;
if(a==b){
alert(yes)
}
}
</script>
</head>
<body>
<div id="banner">
<p>NAME/ÜBERSCHRIFT</p>
</div>
<form id="loginpanel">
<fieldset>
<legend>LOGIN</legend>
<p class="textinput">Benutzername: <input name="id" type="text" size="30" maxlength="30"></p>
<p class="textinput">Passwort: <input name="pw" type="password" size="30" maxlength="15"></p>
<input class="button" type="button" name="login" value="Anmelden"/>
</fieldset>
</form>
<p id="option"> ...oder Registrieren!</p>
<form id="registerpanel">
<fieldset>
<legend>REGISTER</legend>
<p class="textinput">Benutzername: <input name="id" type="text" size="30" maxlength="30"></p>
<p class="textinput">eMail: <input name="email" type="text" size="30" maxlength="30"></p>
<p class="textinput">Passwort: <input name="pw" type="password" size="30" maxlength="30"></p>
<p class="textinput">Passwort wiederholen: <input name="repw" type="password" size="30" maxlength="30"></p>
<input class="button" type="button" onclick="abc()" name="register" value="Registrieren"/>
</fieldset>
</form>
</body>
I would be happy if someone can give me an answere!
Thank you for taking your time :)!
You must have inputs with id attribute with values pw+repw. Having only a name attribute will not work
example: <input name="repw" id="repw" type="password" size="30" maxlength="30">
Corrected version (only relevant parts):
<script>
window.abc = function(){
var a = document.getElementById('pw').value;
var b = document.getElementById('repw').value;
if(a==b){
alert("yes")
}
}
</script>
...
<form id="registerpanel">
<fieldset>
<legend>REGISTER</legend>
<p class="textinput">Benutzername: <input name="id" type="text" size="30" maxlength="30"></p>
<p class="textinput">eMail: <input name="email" type="text" size="30" maxlength="30"></p>
<p class="textinput">Passwort: <input name="pw" id="register-pw" type="password" size="30" maxlength="30"></p>
<p class="textinput">Passwort wiederholen: <input name="repw" id="register-repw" type="password" size="30" maxlength="30"></p>
<input class="button" type="button" onclick="abc()" name="register" value="Registrieren"/>
</fieldset>
</form>
Note the added IDs. I didn't do pw and repw because having plain pw in login made more sense to me (11684) (don't forget to add that in the login form). Because I'd do register-pw I went for consistency and did register-repw. But it doesn't matter what these IDs are as long as they are unique.
And I changed the typo alert(yes) into alert("yes") because obviously the first throws a reference error.
A working JSFiddle: http://jsfiddle.net/7NZUc/