I need to change the value displayed in a form. For example:
<span id="copy" onClick="addValue()">**Text1**</span>
<span id="copy" onClick="addValue()">Text2</span>
Based from what I click, I want to move it to the input value like this:
<input id="paste" class="text" type="input" name="select" value="**Text1**"/>
Function
<script language="javascript" type="text/javascript">
<!--Hide Javascript
function addValue(){
document.getElementById('paste').value = this.innerText;
}
--> </script>
When I click on Text1 in value fild I get "undefined" instead of "Text1" ...
Give this a go.
You need to pass the element into your function so you can access it's properties to assign them to your form input.
HTML:
<form name="myForm">
<span onclick="copyText(this)" >Text1</span>, <span onclick="copyText(this)" >Text2</span>
<br>
<input name="myField"></input>
</form>
Javascript:
function copyText(element) {
document.myForm.myField.value = element.innerHTML;
}
I'd use:
function addValue(el) {
document.getElementById('paste').value = el.innerText || el.textContent || el.outerText;
}
And set the HTML tag like so:
<span id="copy" onClick="addValue(this)">**Text1**</span>
document.myForm.myField.value = "I'm a different value now!";
Is this what you're looking for?
Form and input should have a "name" property, like:
<form name="myForm">
<input name="myField" />
in the case above.
Related
<input type="number" class="setter" id="day-set" name="day-set" value="day"max="30" min="0" placeholder="00"onkeyup="if(parseInt(this.value)>30){ this.value =30; return false;}">
How do I make it so that the input typed in by the user in the input field is cleared when a submit button is pressed (the one which does not refreshes the page)
you can add this to the onclick function of your button and replace the myForm with the id of your form element
document.getElementById("myForm").reset();
<html>
<body>
<p>Clear the input field when you click on the button:</p>
<button onclick="document.getElementById('myInput').value = ''">Clear input
field</button>
<input type="text" value="Blabla" id="myInput">
</body>
</html>
You can also write the javaScript in-between the script tag in a Function or any other way that you want.
You can create a function and add it into the onSubmit event of your form (assuming that you have a form) and then inside of that function you only need to clear the value using something like this:
document.getElementById('day-set').value = ''
Example:
<form onsubmit="myFunction()">
<input type="number" class="setter" id="day-set" name="day-set" value="day"max="30" min="0" placeholder="00"onkeyup="if(parseInt(this.value)>30){ this.value =30; return false;}">
<input type="submit">
</form>
<script>
function myFunction(){
document.getElementById('day-set').value = ''
}
</script>
I want to do this by typing my name in the input, then pressing the button and an h1 tag will appear below the input: Hello (my name)! I don't know how to solve this.
Here is my html and jQuery code:
<form>
<label for="Name">Name</label>
<input type="text" id="Name">
<button id="button" type="button">Click</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#button').click(function () {
$('body').append('<h1></h1>')
$("h1").append('Hello')//+ my name
})
</script>
You need to get the value from the #Name input. Unless you have a specific reason for doing this in multiple steps, you can append the html as a whole like this:
<form>
<label for="Name">Name</label>
<input type="text" id="Name">
<button id="button" type="button">Click</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#button').click(function () {
if ($('#Name').val()) { //make sure the user entered something
$('body').append(`<h1>Hello ${$('#Name').val()}!</h1>`);
}
});
</script>
The backticks `` are a template literal, they allow you to build strings without a bunch of concatenation.
`Hello ${my_name}!` vs 'Hello ' + my_name + '!'
To get the value of the input field you can use:
$('input#Name').val();
Instead of appending it to the h1 element, you can simply set its text to the wanted value, in your case: .text('hello '+getName).
In case a visitor makes a mistake you only need to modify the inner text of the h1 instead of appending it to the body again.
$('h1').text();
$('#button').click(function () {
let getName = $('input#Name').val();
if(!$('h1').length){
$('body').append('<h1 class="greeting-title"></h1>');
}
$("h1").text('Hello '+getName)//+ my name
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label for="Name">Name</label>
<input type="text" id="Name">
<button id="button" type="button">Click</button>
</form>
I've been attempting to grab text input from HTML and trying to output the text back into HTML but for some reason it does not seem to be working. Does putting input within a form alter the interaction with getElementById or is it possible that the second button usage of formaction is interrupting this?
$(document).ready(function(){
$("#submit").on("click",function(){
var test = document.getElementById("searchInput");
$("#text").html(test);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id = "text">
<h1>test</h1>
</div>
EDIT: I have attempted to change
var test = document.getElementById("searchInput");
to
var test = document.getElementById("searchInput").value;
previously and it is still not working. Is there an interaction that is failing that I am missing? Also I would like to be able to store the input as variable i.e thats why I am purposely putting it into a variable before outputting it.
EDIT2: There wasn't anything particularly wrong about the code other than retrieving the value. I am currently using codepen.io to code and did not load jquery into the pen.
Since you're using jQuery, it will make more sense to use jQuery to obtain the elements' value:
Use this to always replace #text element contents with #searchInput value:
$("#text").html($("#searchInput").val());
Use this to append #searchInput value to #text element:
$("#text").append($("#searchInput").val());
But the whole logic does not make any sense. You are changing an elements' value that it is outside the form you are submitting. Either you should prevent submit button click event from submitting the form, or have the #text element inside the form as an input, textarea or hidden field:
$(document).ready(function(){
$("#submit").on("click",function(e) {
e.preventDefault();
$("#text").html($("#searchInput").val());
})
});
or having the #text element inside the form for submitting:
<form>
<input type="hidden" id="text" name="text">
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
You Using form element, so once you click the button , the form will be reloaded, if you want to display textbox value to the element , once remove the form element.
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
<div id ="text">
<h1 id="welc"></h1>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#submit").on("click",function(){
var test = $('#searchInput').val();
$("h1").html(test);
});
});
</script>
Just Remove tag, and check it.
You need to find the element's value and then set it as HTML.
$("#text").html(test.value);
I have updated your question mate check this one .
$(document).ready(function(){
$("#submit").on("click",function(){
var test = document.getElementById("searchInput").value;
$("#text").html(test);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id = "text">
<h1>test</h1>
</div>
I think this will work for you.
<! doctype HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<input type="text" id="searchInput">
<br>
<button type="button" id="submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id="text">
<h1>test</h1>
</div>
</body>
<script>
$(document).ready(function () {
$("#submit").on("click", function () {
$("#text").html($("#searchInput").val());
})
});
</script>
</html>
Edit your JS code please try:
EDIT:
$(document).ready(function(){
$("#submit").on("click",function(){
var test = $("#searchInput").val();
$("#text").html(test);
})
});
I simply want to have a textbox on my webpage, using the HTML form, and input tags, and be able to have the inputted value be used by the Javascript on the page. My HTML looks like this:
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
</div>
and the Javascript I'm trying to use looks like this:
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice);
}
However, all I see on the webpage, underneath the textbox, is "[object HTMLInputElement]". What do I do to get this to work right?
Thanks
here's an example with change event listener for firing a function when there's a change in form
var div = document.querySelector('div');
var topMenuChoice = document.getElementById("firstinput");
topMenuChoice.addEventListener('change',function(e){
div.innerHTML = e.target.value/***e.target.value is your input***/
var divInner = div.innerHTML;
setTimeout(function(){
document.write(divInner);
},2000)
})
<form id="firstbox">Choice:
<input id="firstinput" type="text" name="choice" value=66>
</form>
<div>look here!!</div>
Check this !
document.write(document.forms['firstbox'].firstinput.value);
OR
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice.value);
}
See http://www.w3schools.com/jsref/prop_text_value.asp
var htmlInputElementObjet = document.getElementById("firstinput");
document.write(htmlInputElementObjet.value);
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice" value="initial value">
</form>
</div>
If you want to get the text typed in your input you need to use the value property of the element. You can also use another HTML tag to show the results (avoid using document.write):
HTML
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
<div id="result"></div>
</div>
JS
var topMenuChoice = document.getElementById("firstinput");
document.getElementById("result").innerHTML = topMenuChoice.value;
You have to consider the usage of an event (click, keypress) to control the exactly moment to retrieve the input value.
JS
document.getElementById('firstinput').addEventListener('keypress', function(e) {
if(e.which == 13) { //detect enter key pressed
e.preventDefault();
document.getElementById('result').innerHTML = this.value;
}
});
use the value property
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice).value;
}
I need to enable my button when I type text into my text box. What am I doing wrong?
Code:
<body>
<script>
function IsEmpty(){
if(input1.value!=null){
sendbutton.enabled==true;
}
}
IsEmpty();
</script>
<input class="draft" name="input1" type="text"/>
<button class="send" id="sendbutton" disabled> Send </button>
<ul class="messages">
</ul>
</body>
Change you JavaScript to:
var input1 = document.getElementById('input1'),
sendbutton = document.getElementById('sendbutton');
function IsEmpty(){
if (input1.value){
sendbutton.removeAttribute('disabled');
} else {
sendbutton.addAttribute('disabled', '');
}
}
input1.onkeyup = IsEmpty;
And HTML:
<input class="draft" id="input1" type="text"/>
<button class="send" id="sendbutton" disabled>Send</button>
DEMO
You probably wanted sendbutton.enabled=true;, with a single =. What you've written checks whether they are equal (false, presumably), and then doesn't do anything with the result.
To modify an element at the DOM you need either to use pure Javascript's functionality, let's say getElementById function, or any other Javascript framework.
document.getElementById('sendbutton')
Then refer to the attribute and change it.
You can also use JQuery which will help you heaps. I mean, using selectors.
Hope that helps,
You need to assign an id to your input element.
<input class="draft" name="input1" id='input1' type="text"/>
and in your javascript access it like this:
if(document.getElementById('input1').value != null || document.getElementById('input1').value!='undefined'){
document.getElementById('sendbutton').disabled=false;
}