I'm new to javascript I'm trying to create a web page where we can enter
name in an input box and using javascript's alert method show an alert box which says hello and the name that we entered in the input box
my code is
//html
<input id="test" type="text" name="nm" placeholder="Enter name">
<button onclick="fun(i dont know what to pass here in order to get the text entered in that text box)" type="button" name="button">Click here</button>
//javascript
//i tried like this...first
function fun(x) {
alert("HELLO" + x);
}
//i tried this...then
var x = document.getElementsById("test").value; [->here i also dono what to put.]
function fun(x) {
alert("HELLO" + x);
}
It should be getElementById instead of getElementsById. I hope this helps, and happy learning :)
Your code:
function fun() {
var textInTest = document.getElementById("test").value;
alert("Value entered" + textInTest);
}
<input id="test" type="text" name="nm" placeholder="Enter name">
<button onclick="fun()" type="button" name="button">Click here</button>
Related
I need to redirect the user to a page specificed in an input tag.
<div id="center">
<input type="text" id="username" placeholder="Username">
<button onclick="location.href='rooms/VALUE'" id="connect">EnterRoom</button>
</div>
So where it says "VALUE" inside of the button tag, it would redirect to mysite.com/rooms/VALUE
the "VALUE" input would be inputted by the user inside the input tag.
Any simple way I can do this?
You can get the value of the input using
document.getElementById('username').value
<div id="center">
<input type="text" id="username" placeholder="Username">
<button onclick="location.href='rooms/' + document.getElementById('username').value" id="connect">EnterRoom</button>
</div>
If you are using jQuery then;
<button onclick="location.href='rooms/' + $('#username').val() " id="connect">EnterRoom</button>
and with the javascript
<button onclick="location.href='rooms/' + document.getElementById('username').value " id="connect">EnterRoom</button>
Here is a version with script separated from HTML of what you want.
<div id="center">
<input type="text" id="username" placeholder="Username">
<button id="connect">EnterRoom</button>
</div>
<script type="text/javascript">
var value = ""
var username = document.getElementById("username")
username.addEventListener('change', function (e) {
value = e.target.value
console.log(value)
})
var connect = document.getElementById("connect")
connect.addEventListener('click', function (e) {
location.href='rooms/'+value
})
</script>
You can use document.getElementById() in button tag.
onclick="location.href='rooms/' + document.getElementById('username').value"
Its good to have a separate javascript function to do redirect task.
In your HTML add onclick event for the button and in javascript function write code to validate and redirect.
HTML
<button onclick="toRedirect()" id="connect">EnterRoom</button>
Javascript
<script type="text/javascript">
function toRedirect(){
// get the user input
var user_value = document.getElementById('username').value ;
// check the validation
if(user_value!=''){
// redirect
location.href='rooms/' + user_value;
}else{
// alert error message
alert("validation error");
}
}
</script>
<form id="form1">
Title: <input type="text" id="title1" size="25"/><br/><br/><br/>
Description <input type="text" id="desc1" size="55"/><br/><br/><br/>
<input type="submit" value="Submit" onclick="doit();"/>
</form>
<script type="text/javascript">
function doit(){
var title = document.getElementById("title1").value;
var description = document.getElementById("desc1").value;
document.write("<h3>Title: " + title + "</h3>");
document.write("<h3>Description: " + description + "</h3>");
}
</script>
I need help with getElementById. My script takes the values the user typed in textboxes and when the user clicks submit the values are written to the page using document.write, however the code doesn't work as it expected.
<script type="text/javascript">
function doit() {
document.write("Do it function");
var title = document.getElementById("title1").value;
var description = document.getElementById("desc1").value;
document.write("<h3>Title: " + title + "</h3>");
document.write("<h3>Description: " + description + "</h3>");
}
</script>
The execution doesn't even reach the first line of the function. In the button I have:
<input type="submit value="submit" onclick="doit();"/>
If:
<input type="submit value="submit" onclick="doit();"/>
is indeed what you have, you're missing a quote (as should be evident by the syntax coloring, reason enough to make sure you use an editor that provides such coloring).
It should instead be:
<input type="submit" value="submit" onclick="doit();"/>
You should also be aware that document.write(), if the document has already been closed, will automatically open and clear the document, so your first write may make the controls with those IDs disappear, depending on the structure of your HTML.
Kindly change your html like this
<input type="submit" value="submit" onclick="doit();"/>
I have an input text field with a placeholder attribute. The placeholder disappears when I enter text, but I would like the the placeholder text to reappear after I click the button, "clear," or when the text field is empty. What are some ways I can achieve this?
Below is the code I have below. I tried
document.text.value = "hello";
but the text "hello" stays in the box when I start typing.
HTML
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick(clearText)>
Javascript
function(clearText) {
document.text.value = " ";
}
When the text field is empty, the placeholder will reappear automatically.
When the clear button is clicked, you can use onclick attribute on the button and define the function like this:
Implementation with pure JS:
<script>
function clearText() {
// we use getElementById method to select the text input and than change its value to an empty string
document.getElementById("my_text").value = "";
}
</script>
<!-- we add an id to the text input so we can select it from clearText method -->
<input id="my_text" type="text" placeholder="hello">
<!-- we use onclick attribute to call the clearText method -->
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
Or you can use jQuery:
<script>
function clearText() {
$("#my_text").val("");
}
</script>
<input id="my_text" type="text" placeholder="hello">
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
The easiest way to do it:
<input placeholder="hello" onchange="if (this.value == '') {this.placeholder = 'hello';}"
/>
You were very close
HTML :
<input type="text" id='theText' placeholder="hello">
<input type="button" value="clear" onclick='clearText()'>
JavaScript :
clearText = function(){
document.getElementById('theText').value = "";
}
Demo : http://jsfiddle.net/trex005/7z957rh2/
There are multiple problems with your javascript syntax, starting from function declarations and ending with onclick event specification.
However, you were on the right way, and code below does the trick:
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('input').value=''">
However, it will only work if this is the only input box in your document. To make it work with more than one input, you should assign it an id:
<input type="text" id="text1" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('#text1').value=''">
and use "text2" and so on for other fields.
You should not forget to set "return false;"
document.getElementById('chatinput').onkeypress = function(){
var key = window.event.keyCode;
if (key === 13) {
var text = this.value;
var object = document.getElementById('username_interface');
email = object.email;
username = object.username;
empty = /^\s+$/;
// function Send Message
this.value = "";
return false;
}else{
return true;
}}
I am new to javascript, and i only know c++ so far, but i know the logic but i just don't know the syntax on javascript
so i have this form :
<span>Please type your name here: </span>
<input id="inputname" type="text" value=""></input>
when the user types his/her name how do i save the value to some variable and display it with javascript?
i have already tried using
function displayName(){
var username = getElementById("inputname").value;
document.write(username);
}
and i put
<script>displayName();</script>
below the form. it doesn't seem to work, how do i do it?
and how do i use:
<input type="submit"></input>
in relation to it?
Try this,
Javascript
function displayName(){
var username = document.getElementById("inputname").value;
document.getElementById("msg").innerHTML = username;
}
HTML
<span>Please type your name here: </span>
<input id="inputname" type="text" value=""></input>
<input type="button" onclick="displayName();"></input>
<span id="msg"></span>
By changing onclick="return displayName()" to onkeypress="displayName()" you will be able to see the changes on the spot.
change your html and js like this. onblur function call when user leaves the input from focus. get the enter value onblur
<span>Please type your name here: </span>
<input id="inputname" type="text" onblur="displayName();" value=""></input>
js
function displayName(){
var username = document.getElementById("inputname").value;
document.write(username);
}
you need to change your fucntion little bit..
getElementById() is not a direct function in javascript..use it with document object
function displayName(){
var username = document.getElementById("inputname").value;
document.getElementById("msg").innerHTML = username;
return false;
}
on submit click
<input type="submit" id="btnSave" onclick="return displayName();" value="Save" />
<div id="msg" > </div>
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