Get value inside a text field - JavaScript - jQuery - javascript

I have a page portion as below;
<input name="test1" type="text" id="test1" class="test1">
<button value="hi" id="but">hi</button>
I want to get data inside text field entered by user. I tried the following;
$(document).ready(function(){
var test2 = $('#test1').val();
$('#but').click(function() {
alert(test2);
});
});
When user clicks button hi, the page alerts the text inside text field. But the alert is coming blank (without text) even with text inside. When I reload the page, the text inside text field remains there and when I click the button again, script works well alerting the text inside. Again when I clear the text and I give another text, and when I click button, the alert is coming with previous text.
I am using jQuery.
Here is the fiddle.
I want to get alert with text inside the text area. How can I do this?

You can do this:
$('#but').click(function() {
alert($('#test1').val());
});​
Or:
$('#but').click(function() {
var val = $('#test1').val();
alert(val);
});​
Working Example

Here is very simplest way
<input name="test1" type="text" id="test1" class="test1">
<button value="hi" id="but" onclick="buttonClicked()">hi</button>
<script>
function buttonClicked(){
alert(jQuery("input#test1").val())
}
</script>
Enjoy

You are getting the value on page load, outside of the handler. You need to move it inside of the click handler, otherwise you will just get the value that was fetched when the page loaded:
$(document).ready(function(){
$('#but').click(function() {
var test2 = $('#test1').val();
    alert(test2);
});
});

Related

Clicking submit button opens print preview

When clicking the submit button, within Chrome, the print preview window is opened just as it would if you pushed CTRL + P. I'm absolutely baffled. Also, nothing gets printed to the console even when text is entered into the 'myinput' input field.
html
<div class="subscribeform">
<input class="myinput">
<input placeholder="Enter Email">
<button class="subscribesubmit1" type='submit'>
Submit
</button>
</div>
javascript
<script type="text/javascript">
$('.subscribesubmit1').click(function() {
var myinput = $('.myinput').val();
print(myinput)
});
</script>
Thanks for your help
Try this:
$('.subscribesubmit1').click(function() {
var myinput = $('.myinput').val();
console.log(myinput);
});
The print() method prints the contents of the current window.
And if you are new to javascript id suggest that you don't jump straight to jquery

Retrieve text from jQuery to HTML after clicking button

I am learner for HTML and jQuery. Trying to retrieve the text from jquery to html
JQuery: To return textbox value after clicking button.
$('#value').click(function() {
var value = $("#test").val();
return value;
});
HTML: Typing the text and clicking on button.
<input type="text" id= "test" title="details/>
<input type ="button" id="value" value ="Detail" />
<!-- any suggestions how to get the stored value from jquery to html --!>
Is there a way to return the text value from jquery to HTML code so that i can able to some operations after clicking on submit button.
Can you please provide any suggestions.
I'm not sure what it is your trying to do? If i'm understanding correctly basically; you've landed on a page (page1) on page 1 there an element with a value(hidden or not) that when a button is clicked it lands into an empty text box? For example,
<p>Is your name <span id="name">John</span>?</p>
<br/>
<button id="yes_get_name" value="submit">Yes</button>
<input type="text" id="insert_tname" name="name" value=""/>
<script type="text/javascript">
$( document ).ready(function() {
// Trigger function when Button Clicked
$( "#yes_get_name" ).click(function() {
// Assigne Name as a variable
var name;
// Assign Value of Name as text of span id="Name"
var name = $('#name').text()
// Insert names value into input
$("#insert_tname").val(name);
});
});
</script>
I hope this helps. Other than this i might be misunderstanding the question.
Here's a jsfiddler on the roof to test.
Yes you can use following to write back into textbox:
$("#test").val("something");

jQuery how to get input from a form?

<script>
$(function() {
var first_name = $('#content').find('input[name="first_name"]').val();
console.log(first_name);
})
</script>
<div id="content">
<form name="info">
First Name: <input type="text" id="first_name" name="first_name"><input type="submit" id="button">
</form>
</div>
Does not print name in console, what am I doing wrong here?
The problem right now is that the code you've written is executed immediately when the page loads.
From the way your code looks, it looks like you actually want the form's button to do the console log.
I've altered your code a bit, but here's how you'd:
Select the Form and the Input
Declare the variable out of the scope
Bind onto the form's submit event
Prevent it from actually submitting
And logging to console per your example
Altered code below:
<script>
$(function() {
// Save a reference to the input
var input = $("input[name=first_name]"),
// Get the form itself
form = $("form[name=info]"),
// Storage for your first_name outside of the scope
first_name = false;
// Bind to the submit event on the form
form.bind('submit', function() {
// Set the first_name to the input's value
first_name = input.val();
// Log it out (per your example)
console.log(first_name);
// Return false to prevent the form from posting
return false;
});
});
</script>
<div id="content">
<form name="info">
First Name:
<input type="text" id="first_name" name="first_name">
<input type="submit" id="button">
</form>
</div>
I'm not saying this is the best way to handle whatever you're attempting to do with the form, realistically you shouldn't need an ID on the button, and probably would want to replace the NAME on the form with an ID for the selector. Also using an ID selector to get the input would be recommended as well, as ID selectors are faster than [name=something] selectors. (Thanks gnarf for the comment!)
The variable scoping is also probably somewhat strange in your example, but the above code should be good for learning :)
The method as you've written it only runs once, after the page loads. At that point the input element doesn't contain a value (i.e. $("#first_name").text() == ''). You can bind the logging statement to the keyup event of the element, to see the text that's being entered into it.
$(function() {
// this code only runs once
var first_name = $('#content').find('input[name="first_name"]').val();
console.log(first_name);
$('#first_name').keyup(function() {
// this code fires everytime a key is released on the element
console.log($(this).val());
});
})
Demo on plnkr
Here is the JSFiddle for your code.
<div id="content">
<form name="info">
First Name: <input type="text" id="first_name" name="first_name" value="something">
<input type="submit" id="button">
</form>
</div>
$('#content form').on('submit', function () {
console.log($('#content').find('input[name="first_name"]').val());
});
'Something' is the default value.' Try other words in the text box and you will see the new value in console.
As per your code, you are getting correct results.
Your defined function is never called because you have not attached any events to it.
I have modified your code and you can check it working here
$(document).ready(function(){
$("#first_name").focusout(function(){
var first_name = $(this).val();
alert(first_name);
});
});
$('#content form').on('submit', function () {
console.log(
$(this).find('input[name="first_name"]').val()
);
return false;
});
edit: you must run your jQuery selection after you have inputted something into the input field. Right now when you run it, it is empty
edit: try using this 'on' from the jQuery docs
http://api.jquery.com/on/
$('#content form').on('submit', function () {
console.log($('#content').find('input[name="first_name"]').val(););
}

Edit Text User inputs to textbox

so far I have this jsfiddle
<p>Click the button to remove http:// and www. from input box belove below:</p>
<textarea id="demo" name="comments" cols="25" rows="5">
http://www.google.com
</textarea><br>
<input type="submit" value="Submit" button onclick="myFunction(),myFunction2()" />
</form>
<script>
function myFunction()
{
var str=document.getElementById("demo").innerHTML;
var n=str.replace("http://","");
document.getElementById("demo").innerHTML=n;
}
function myFunction2()
{
var str=document.getElementById("demo").innerHTML;
var m=str.replace("www.","");
document.getElementById("demo").innerHTML=m;
}
</script>​
It works fine with the text pre input but it will not change submitted text.
I'm sure there's a simple answer, I'm just new to this and cannot work it out or find an answer.
You need to use .value of the textarea, not .innerHTML.
.innerHTML only looks at the generated HTML in an element. If the user types in something new, the source doesn't change.
But, the value does:
document.getElementById("demo").value = ...
Fixed in your fiddle:
http://jsfiddle.net/AbSh2/12/
A couple other pointers:
You don't need two functions to do that operation, as you can see it can be done in one.
You could use type='button' instead of a submit, since Javascript doesn't care about form submits (that only matters on the server, which receives POST and GET data. Javascript can't)
You can streamline your function even further without saving strings all over the place:
function myFunction() {
var str=document.getElementById("demo").value;
var n=str.replace("http://","");
var m=n.replace("www.","");
document.getElementById("demo").value=m;
}
works fine. You could even do
function myFunction() {
document.getElementById("demo").value =
document.getElementById("demo").value.replace("http://","").replace("www.","");
}
but that gets a little jumbled IMO, so should be for learning purposes only :)

Adding the content of a <div> to a textbox on click of a Button

First I have created a <div>....</div> which is hidden on pageload using javascript function. Then I have created an empty textbox using forms. Now when anyone clicks a button then the whole content of the hidden <div>....</div> should be loaded in the textbox in the form. What should be code for this?
maybe this way
<div id="hiddendiv"><strong>some</strong> content</div>
<button onclick="copyfunction();">click me</button>
<textarea id="textarea"></textarea>
<script>
function copyfunction() {
var textarea = document.getElementById('textarea');
var hiddendiv = document.getElementById('hiddendiv');
textarea.value = hiddendiv.innerText;
}
</script>
tested, it works
$("#textbox_id").val($("#div_id").html());

Categories

Resources