I'm new to javascript & jquery. i have a textarea with a preset content. If i change the value on the site by entering "new" and press the "showme" button the alert box does show me the preset value, not the new contend of the textarea.
Why is this? What i have to change to get the new content from my chrome browser?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<form action="javascript:Output()">
<textarea id='area1'>preset</textarea>
<input type="submit" value="showme">
</form>
<script>
function Output() {
var s = $('#area1').html();
alert(s);
}
</script>
You need to use val method
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<form onsubmit="Output()">
<textarea id='area1'>preset</textarea>
<input type="submit" value="showme">
</form>
<script>
function Output() {
var s = $('#area1').val();
alert(s);
}
</script>
Related
I'm trying to make a table in Javascript that does not use a table element, and I'm using pure vanilla nodeJS. I can get a new row to show up very briefly, but it disappears when I hit the button that made it show up in the first place. My code is:
<!DOCTYPE html>
<html>
<body>
<h1> Title Tests </h1>
<div id="Experiments">
<form id="Exp">
<input type="text" name="url box" placeholder="publisher URL"><br>
<div class="Title">
<input type="text" name="title box" placeholder="Test Title"><br>
</div>
<button id="addButton" onclick="newRow()">+</button><br>
<input type=submit value="Submit">
</form>
</div>
<script>
function newRow(){
var number = 2;
var newTitleRow = document.createElement('div');
newTitleRow.setAttribute('id',`Title${number}`);
var newBT = document.createElement('input');
newBT.setAttribute('type','text');
newBT.setAttribute('name',`title box ${number}`);
newBT.setAttribute('placeholder','Test Title');
newTitleRow.appendChild(newBT)
var button = document.querySelector("#addButton");
button.before(newTitleRow);
number++;
}
</script>
</body>
</html>
The problem is that you're using a html <button> inside a <form> element. This means it will automatically act as a submit button unless you declare it to be something different. So as soon as you push the + button it will try to submit the form to an undefined URL.
To work around you need to define that + button to be of type "button" like:
<button type="button" id="addButton" onclick="newRow()">+</button><br>
index.php
<span class="final_build_price" data-from="0" data-to="" data-speed="500" data-refresh-interval="10">0</span>
<form method="post" action="">
<input type="text" id="finalvalue" value="">
<input type="submit" class="getquote" value="submit" name="send">
</form>
js
<script>
$(".dim_price").countTo();
$(".final_build_price").countTo();
var finalpice=$(".final_build_price").countTo()
$('.getquote').click(function(){
// var fp = JSON.stringfy(finalpice);
var fp =parseInt(finalpice);
alert(fp);
// document.getElementById("final_price").innerHTML=fp;
});
</script>
<script>
$(".dim_price").countTo();
var finalpice=$(".final_build_price").countTo()
$('.getquote').click(function(){
// var fp = JSON.stringfy(finalpice);
var fp =parseInt(finalpice);
alert(fp);
document.getElementById("final_price").innerHTML=fp;
});
</script>
In span class(final_build_price) i am getting a value from below mention jquery but I want to pass that value into input box on click on submit button and the javascript code i used is mentioned below. but I am not getting any data into input box
This issue is due to write id in place to class and name of your element.
replace
document.getElementById("final_price").innerHTML=fp;
by
$(".final_build_price").html(fp);
IM trying to test to see if my code is set up right to access the text value of a form. im just trying to access text value and then use Console.log to confirm that its getting that far.
here is my code(
<body>
<form id="form">
<input type="text" id="item">
<button class="Btn add item">Add item</button>
</form>
<script type="text/javascript">
document.getElementById("item").onclick = function() {
var output = document.getElementById("item").value;
console.log(output);
}
</script>
</body>
When I run it in the Dev tools in chrome nothing happens. No error and console doesn't log the value I entered into the form.
You can try something like this:
var output = document.getElementById("item").innerText;
Your mistake is incorrect names of the ID-attributes. Be careful!
<body>
<form id="form">
<input type="text" id="input"/>
<button id="button" type="button">Add item</button>
</form>
</body>
<script type="text/javascript">
document.getElementById("button").onclick = function(){
var str = document.getElementById("input").value;
console.log("Your string is: " + str);
}
</script>
Your input tag lacks the value attribute and has no default value.
I'm assuming you want to log the value when the button is clicked rather than the input. Try this out:
<form id="form">
<input type="text" id="item"/>
<button id="btn" class="Btn add item" type="button">Add item</button>
</form>
<script type="text/javascript">
document.getElementById("btn").onclick = function() {
var output = document.getElementById("item").value;
console.log(output);
}
</script>
It's hard to understand what you are looking for from your example, but if you want your value to be logged as you type it can be done this way :
<form id="form">
<input type="text" id="item">
<button class="Btn add item">Add item</button>
</form>
<script type="text/javascript">
document.getElementById('item').addEventListener('keyup', function(e){
var output = e.target.value
console.log(output)
})
</script>
As Markus Zeller said, when your input tag has no value, console.log will show a space.
Try entering any number of characters, then out focus, then click on the input again, you will see it displays exactly the value of the input tag you just entered.
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 have some html and some javascript code that is supposed to take input in a text box, and open a new tab with the Wikipedia page of whatever was in the text box. However, I'm using this as an extension, and google chrome doesn't allow inline javascript.
page.js
document.getElementById("search").addEventListener("click", searchPage);
function searchPage() {
console.log("test")
var temp = document.getElementById(pageName);
var temp = temp.value;
var myPage = "http://en.wikipedia.org/wiki/" + temp;
window.location.replace(myPage);
}
popup.html
<!DOCTYPE html>
<html>
<body>
Random
Enter page to lookup: <input type="text" id="pageName" /><br />
<input type="submit" value="Submit" id="search" />
<script src="./page.js></script>
</body>
</html>
Anyone have any clue why this isn't working?
what you can do instead is include your JS in your HTML <head> tag, and add an onClick attribute to your button, like so:
<!DOCTYPE html>
<html>
<body>
<a href="http://en.wikipedia.org/wiki/Special:Random/" target="_blank">$
Enter page to lookup: <input type="text" id="pageName" /><br />
<input type="submit" value="Submit" id="search" />
<script src="./page.js"></script>
</body>
</html>
I think the problem was that in your original code, you had <script src="./page.js></script> instead of <script src="./page.js"></script>
then you can change your javascript to be the following:
document.getElementById('search').addEventListener('click', searchPage);
function searchPage() {
console.log("hjabdfs");
var temp = document.getElementById('pageName');
var temp = temp.value;
var myPage = "http://en.wikipedia.org/wiki/" + temp;
window.location.replace(myPage);
}
please note that I also changed var temp = document.getElementById(pageName) to var temp = document.getElementById('pageName'), as pageName is not a variable.
Input type submit is trying to submit a form. You need to add an action to that submit button or you can change it to a button and the event will fire.
Your click event listener doesn't work because it has not been loaded yet. Or in other words, you need to make sure this line <script src="./page.js></script> is correctly pointing to page.js.