I am trying to create a form which when clicked makes an XMLHttpRequest and writes information on the page.
Here's the HTML code.
<form>
<input id="myStock" type="text"/>
<input id="iSubmit" type="submit" value="Show Me Data"/>
<input type="reset" value="Reset Me" />
</form>
<div id="demo"></div>
Here's the JS code:
var isubmit = document.getElementsByTagName("form")
[0].querySelector('input[type="submit"]');
isubmit.addEventListener("click", myFunction);
function myFunction() {
//some code here
}
var mystock = document.getElementsByTagName("form")
[0].querySelector('input[type="text"]').value.trim();
var urlext = mystock;
urlext +=
"&reportType=is&period=12&dataType=A&order=asc&columnYear=5&number=3";
var url = "https://financials.morningstar.com/ajax/ReportProcess4CSV.html?
t=";
alert(url + urlext);
xhttp.open("GET", url + urlext, true);
xhttp.send();
}
The problem is, when I am deleting the <form> tag on the HTML page and deleting the getElementsByTagName("form")[0] on the JS code, it's working fine.
However, with the form element intact, it's not returning any information.
Please help.
You can take a look at this JSfiddle I made. I dont know if it helps you out though.
$.POST( url+urltext, function( data ) {
$('#demo').html(data);
});
Your problem it's the input submit like #CBroe pointed out. You can prevent using the e.preventDefault();.
Or you can use do this:
$('#iSubmit1').on('click', function(){
var value = $("#myStock").val();
$( "#demo" ).append( '<p>'+value+'</p>' );
});
$('#reset1').on('click', function(){
$( "p" ).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="myStock" type="text"/>
<button id = "iSubmit1" type="button">Show Me Data!</button>
<button id = "reset1" type="button">Reset Me!</button>
</form>
<div id="demo"></div>
Related
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 am trying to pass a value from a button to an input value with Javascript.
What i have right now is this
this inside a javascript file
var test2 = 5;
appendeddatahtml = '<div class="test1"><button id="btn" type="button" value="' + test2 + '">This is it!</button></div>';
$("#test1").append(appendeddatahtml);
And this is the form above the script
<input type="text" name="latlon" id="latlon" style="display: none; " value="" />
First i tried to make an alert with this code
$(document).ready(function() {
$("#btn").click(function() {
alert("The button was clicked.");
});
});
But it didn't alerted anything.
Is there any way to pass the value from the button to the input value?
Since you are adding it dynamically you need event delegation here. So just add click as below:
$(document).on('click',"#btn",function(){
alert("The button was clicked.");
});
DEMO Here
It seems you have created the button dynamically via code during runtime and for such elements you need to use live or on events
http://api.jquery.com/on/
this one will help
example:
$(document).ready(function() {
$(document).on('click', "#btn", function() {
alert('here');
});
});
working here just remove $(document).ready()
var test2 = 5 ;
appendeddatahtml = '<div class="test1"><button id="btn" type="button" value="'+test2+'">This is it!</button></div>';
$("#test1").append(appendeddatahtml);
$("#btn").click(function(){
alert("The button was clicked.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="latlon" id="latlon" style="display: none; " value="" />
<div id="test1"></div>
You have not created the element first.
You forgot $();
var test2 = 5 ;
appendeddatahtml = $('<div class="test1"><button id="btn" type="button" value="'+test2+'">This is it!</button></div>');
$("#test1").append(appendeddatahtml);
link to a working example of what you wanted is here
html code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="latlon" id="latlon" style="display: block; " value="" />
<div id="test1">
</div>
javascript code
$(document).ready(function() {
var test2 = 5 ;
var appendeddatahtml = '<div class="test1"><button id="btn" type="button" value="'+test2+'">This is it!</button></div>';
$("#test1").append(appendeddatahtml);
$("#btn").click(function(){
alert("The button was clicked. "+this.value);
document.getElementById('latlon').value = this.value;
});
});
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 know only what I need but I do not know how to get that done.
This is the logic of the code, I really hope some of you has the solution.
How can I create in javascript or jQuery a function that will do the following?
If that checkbox is selected, when the button is clicked redirect the user to another page by passing the value of the textarea in the URL.
So that is the logic.
We have three elements.
1)The checkbox
2)The input type button
3) The textarea.
The checkbox is selected, the user clicks on the button and the user goes to another page , and the URL will include the value found in the textarea.
i.e.
http://mydomainname/page.php?ValueThatWasinTextArea=Hello World
Can you help me.
I think it is something simple for a javascript coder.
Thank you so much
$(function(){
$(':button').click(function(){
if($('input[type="checkbox"]').is(":checked")){
window.location.href = "http://mydomainname/page.php?ValueThatWasinTextArea="+ $('textarea').val();
}
});
});
**Of course if there's more than these three elements on the page, you're going to want some more specific selectors
You could subscribe to the submit event of the form and inside test if the checkbox was checked and if yes use window.location.href to redirect to the desired url:
$('#id_of_the_form').submit(function() {
var value = encodeURIComponent($('#id_of_textarea').val());
if ($('#id_of_checkbox').is(':checked')) {
window.location.href = '/page.php?ValueThatWasinTextArea=' + value;
return false;
}
});
If the button is not a submit button you can subscribe for the click event of this button and perform the same logic.
Might be some syntax problem because I code this on top of my head
<input id="myCheckbox" type="checkbox" />
<button id="myButton" onClick="buttonClick" />
<input id="myTextArea" type="textarea" />
<script>
function buttonClick()
{
var checkBox = document.getElementById('myCheckbox');
var textArea = document.getElementById('myTextArea');
if(checkBox.checked)
{
window.location = 'http://mydomainname/page.php?ValueThatWasinTextArea=' + textArea.value;
}
}
</script>
$(document).ready(function() {
$('#btnSubmit').click(function() {
if($('#chkBox').is(':checked')) {
window.location = '/page.php?passedValue=' + $('#txtField').val();
}
});
};
...
<form>
<p>
<input type="checkbox" id="chkBox"> Checkbox</input>
</p>
<p>
<input type="text" id="txtField" value="" />
</p>
<p>
<input type="submit" id="btnSubmit" value="Submit" />
</p>
</form>