I have got the HTML but I am not sure on how to get the input box into the span.
I tried using document.getElementById but that didn't work. Any help would be great!
Name:
<p>
<input type="text" name="fname" id="name">
<p>
<button id= "button" onclick="namejs">Go</button>
<p>
<span id= "namespan">Name</span>
You can try the following, this is plain Javascript
Getting values you can use
document.getElementById("myspan").innerHTML="value";
For modern browsers
document.getElementById("myspan").textContent="value";
CODE
Name:
<p>
<input type="text" name="fname" id="name">
<p>
<button id= "button" onclick="myFunction()">Go</button>
<p>
<span id="namespan">Name</span>
function myFunction() {
var name = document.getElementById("name").value;
document.getElementById("namespan").textContent=name;
}
Added a fiddle
You can user innerHTML attribute for span tag, like below :
var name = document.getElementById("name").value; //get name from TextBox
document.getElementById("namespan").innerHTML=name ; //write in span
Hope this will help you.
<!DOCTYPE html>
<html>
<head>
<script>
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
}
</script>
</head>
<body>
<form>
<label><b>Enter a Message</b></label>
<input type="text" name="message" id="user_input">
</form>
<input type="submit" onclick="showInput();">
<label>Your input: </label>
<p><span id='display'></span></p>
</body>
</html>
If you use jquery , you can smoothly update span on real-time when you write in input :
$('#namespan').html($('#name').val()); // GET Value of INPUT --> SET IT as inner HTML of span
DEMO :
$('#name').keyup(function(){
$('#namespan').html($(this).val()); // GET Value of INPUT --> SET IT as inner HTML of span
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Name:
<p>
<input type="text" name="fname" id="name">
</p>
<p>
<button id= "button" onclick="namejs">Go</button>
</p>
<p>
<span id= "namespan">Name</span></p>
Add an onkeyup event handler
document.getElementById('name').onkeyup = function() {
document.getElementById('namespan').innerHTML = this.value;
}
Name:
<p>
<input type="text" name="fname" id="name">
</p>
<p>
<button id="button" onclick="namejs">Go</button>
</p>
<p>
<span id="namespan">Name</span>
</p>
You can simply:
Html:
Name:
<p><input type="text" name="fname" id="name"><p>
<p><button id= "button">Go</button></p>
<p><span id= "namespan">Name</span></p>
jQuery:
$('#button').click(function(){
$('#namespan').text($('#name').val());
});
Related
I'm new to Javascript and trying to adapt a script I found online but I'm unable to extract the value entered in the first name text field. I don't understand what I'm getting wrong. Please can someone take a look at it please? Thank you.
function myFunction() {
var x = document.getElementById("fname").value;
document.getElementById("demo").innerHTML = "Found " + x;
}
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
<button onclick="myFunction()">Get it</button>
<p id="demo"></p>
You are using document.getElementById() to get the value of your element.
It means your element must have the id attribute. In your case, you only have the name attribute for your element. So it should be done this way.
<!DOCTYPE html>
<html>
<body>
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname" id="lname"><br>
<input type="submit" value="Submit">
</form>
<button onclick="myFunction()">Get it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("fname").value;
document.getElementById("demo").innerHTML = "Found " + x;
}
</script>
</body>
</html>
I added the id attribute to your form elements.
I am trying to use jQuery to take the user input and insert it into multiple divs with the class of userInput. I was able to use vanilla JavaScript but i don't want to keep repeating my code using ID's.
So far i can take the user input and display it as an alert so i know its being read. So can i take this input from the input field and place it into a class?
<form>
<input class="userInput" type="text" maxlength="10" onclick="insertInput()" placeholder="Username" required><br>
<a href="#chapter-1">
<div id="submitbutton" class="button">Continue</div>
</a>
</form>
$(function() {
$("#submitbutton").click(function() {
alert($(".userInput").val());
});
});
$(function() {
$("#submitbutton").click(function() {
$('.userInput').text($(".userInput").val());
});
});
check this fiddle
Define number of divs having same class.Then just set the input value to class as text.
$(function() {
$("#submitbutton").click(function() {
var value = $(".userInput").val();
$(".insert").text(value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input class="userInput" type="text" maxlength="10" placeholder="Username" required><br>
<a href="#chapter-1">
<div id="submitbutton" class="button"> Continue</div>
</a>
</form>
<div class="insert">
</div>
<div class="insert">
</div>
<div class="insert">
</div>
Something like so:
var elements = document.querySelectorAll('p.userInput');
var doAction = function(event) {
var inputValue = document.querySelector('input.userInput').value;
for(var i=0; i < elements.length; i++) {
elements[i].innerHTML = inputValue;
}
}
var element = document.querySelector('#submitbutton');
element.addEventListener('click', doAction);
<form>
<input class="userInput" type="text" maxlength="10" placeholder="Username" required><br>
<a href="#chapter-1">
<div id="submitbutton" class="button"> Continue</div>
</a>
</form>
<p class="userInput"> </p>
<p class="userInput"> </p>
<p class="userInput"> </p>
No reason to use jQuery.
All I have to do is to show a number in a textbox and a button which add 10 every time I press it, here's my code (it doesn't work).
<head>
<script type="text/javascript">
var n=parseInt(ocument.forms["formNum"]["numero"].value);
document.getElementById("numero").value=n;
function sumar() {
n=document.forms["formNum"]["numero"].value+10;
document.forms["formNum"]["numero"].value=n;
}
function inicializar() {
n=document.forms["formNum"]["numero"].value=0;
}
</script>
</head>
<body>
<form name="formNum">
<p>
<input type="text" size="10" name="numero" id="numero" />
</p>
<p>
<input type="button" name="sumar" value="Sumar" onclick="sumar()" />
<input type="button" name="inicializar" value="Iniciar a 0" onclick="inicializar()" />
</p>
</form>
</body>
<body>
<script type="text/javascript">
function sumar(){
document.getElementById("numero").value = parseInt(document.getElementById("numero").value)+10;
}
function inicializar(){
document.getElementById("numero").value=0;
}
</script>
<form name="formNum">
<p>
<input type="text" size="10" name="numero" id="numero" value="0" />
</p>
<p>
<input type="button" value="Sumar" onclick="sumar()" />
<input type="button" value="Iniciar a 0" onclick="inicializar()" />
</p>
</form>
</body>
Five suggestions.
It is always better to give unique ids to your html elements.
Never name your HTML elements and javascript functions the same.
If you want to access the html element from javascript, if you know the id, use getElementById.
Use Firebug or Developer tools from the browser, to debug.
If you want to access your elements with the hierarchy, use elements in the form like this document.forms["formNum"].elements["numero"].value. Check this example
Demo: http://jsfiddle.net/DPJCR/
This code should work:
<input type="text" id="mytext">
<script type="text/javascript">
var elem = document.getElementById("mytext");
elem.value = "My default value";
</script>
See: Set the value of an input field
Maybe you are getting an exception from the parseInt that prevents the value from changing.
If it is an option to use jQuery, try this:
function sumar(){
$("#numero").attr("value", parseInt($("#numero").attr("value"), 10)+10);
}
Try this this will help you
var count=10;
$('#btnSumar').click(function(){
if($('#numero').val()=='')
{
$('#numero').val(count);
}else
$('#numero').val(eval($('#numero').val())+count);
});
$('#btnInc').click(function(){
$('#numero').val('');});
Fiddle here
I have been trying to dynamically append HTML input forms using a JS function to a webpage but am having trouble inserting them into the correct location. I have tried to create an empty div tag on line 40:
<div class="itemInfo"></div>
However, when I try to locate that tag from within my JS function, with the findElementById()
function it seems not to find it. I want to create a copy of the three input forms above the empty tag I created and append them underneath, but no matter what I have tried I have not been able to figure out how to put the forms in that exact location. My JS function is as follows:
function newItem(){
instance++;
var oldInput = document.getElementById("itemInfo");
var newDiv = document.createElement("INPUT");
newDiv.name = "myinput";
newDiv.value = "Enter Here";
oldInput.insertBefore(newDiv);
}
Rather than creating the forms again in this function, I would like to duplicate the following and simply append it after itself:
<p>Item: <input type="text" name="item"/>
Qty: <input type="text" name="qty"/>
Color: <input type="text" name="color"/></p>
<input type ="button" value="Add Item" onclick="newItem();"/>
<div class="itemInfo"></div>
I tried to wrap the three forms in a tag and calling that by Id, but it did not seem to work either, which is why I tried to make an empty tag after it. I have searched everywhere and there is a lot of information regarding similar issues but I can't seem to apply the solutions to my situation. I really appreciate any help. Here is the entire page:
<!DOCTYPE html>
<html>
<head>
<script type ="text/javascript">
var instance = 0;
function newItem(){
instance++;
var oldInput = document.getElementById("itemInfo");
var newDiv = document.createElement("INPUT");
newDiv.name = "myinput";
newDiv.value = "Enter Here";
oldInput.insertBefore(newDiv);
}
</script>
<title>Welcome to New Age Embroidery!</title>
<style type="text/css">
body {font-family:sans-serif;color:#4f494f;}
form input {border-radius: 7.5px;}
h5 {display: inline;}
.label {text-align: right}
.ordersBook {float:left; padding-top: 10px;}
.name {width:100%;float:left; padding:3px;}
.wrapper { padding-left: 25px; padding-top: 20px}
</style>
</head>
<body>
<input type ="button" id="btnAdd" value="Add Item" onclick="newItem();"/>
<div class = "wrapper">
<h1>Welcome to New Age Embroidery!</h1>
<div class="ordersBook_input">
<form method ="post" class="form" action = "/newguest" method = 'post'>
Name: <input type="text" name="name"/>
<p>Item: <input type="text" name="item"/>
Qty: <input type="text" name="qty"/>
Color: <input type="text" name="color"/></p>
<input type ="button" value="Add Item" onclick="newItem();"/>
<div class="itemInfo"></div>
<p>Phone: <input type="text" name="phone"/>
Email: <input type="text" name="email"/>
Artwork: <input type="file" name="file"/>
<p>Quote: <input type="text" name="quote"/></p>
</p>
<p>Notes: <textarea cols="40" rows="10"></textarea>
</p>
<input type="submit" value='Add Order'/>
</form>
</div>
<div class ="ordersBook">
<h3>Orders</h3>
%for name in mynames:
<div class="name">
<h5>Name:</h5> {{name['name']}}
<h5>Phone:</h5>{{name['phone']}}
<h5>Email:</h5>{{name['email']}}
<form action="/view/{{name['_id']}}" method='GET' ><input type="submit" value="View">
</form>
<form action="/remove/{{name['_id']}}" method='POST'> <input type="submit" value="Remove" onClick="confirm('Are you sure you want to permenantly remove this order?')">
</form>
</div>
%end
</div>
</div>
</body>
</html>
I changed your Javascript to this
function newItem(){
newInput="<p>Item: <input type="+"text"+" name="+"item"+"/></p>";
document.getElementById("itemInfo").innerHTML=newInput;
}
Here's a working FIDDLE
You are trying to use the function document.getElementById("itemInfo"); which looks for the id itemInfo. There is no element with the id itemInfo in your page. Create the div as follows:
<div class="itemInfo" id="itemInfo"></div>
This should help you get a reference of the div element.
EDIT: The Error is in the function, node.insertBefore(new Element,reference Element); is the correct function.
Why does the following code not add another text input field when clicking on the add another field input button?
<html>
<head>
<script>
function add_field()
{
var elem = document.createElement("input");
elem.setAttribute('type','text');
elem.setAttribute('name','user');
document.body.insertBefore(elem, document.getElementById('su'));
}
</script>
</head>
<body>
<form name="input" method="get">
Put input here:<br>
<input type="text" name="user">
<input type="button" onclick="add_field()" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
</body>
</html>
According to the MDN reference page, you need to call parent.insertBefore(newElem, referenceElem). In your example, I suppose that <form> is the parent, not <body>. Changing the last line of your function to this:
var target = document.getElementById('su');
target.parentNode.insertBefore(elem, target);
will make it work.
jQuery solution here
<form name="input" method="get">
Put input here:<br>
<input id='ap' type="text" name="user">
<input id="addField" type="button" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
JavaScript
$('#addField').click(function(e)
{
$('<input type="text" />').insertBefore('#su')
});