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");
Related
I have a form in which users can talk on a chatroom. My problem is that I have a gallery in which users can select pictures.
My question is how could a user click a html link and for that html link to input text into the input so when the user clicks the link which says cat it inputs into the text field :cat.
This is the form I have so far:
<form method="POST" action="chat.php">
<input type="text" name="message"></input>
<input type="submit" />
</form>
This is the gallery:
<img src="cat.jpg"/>
So again, the question is how I could insert text into the text box once the user clicks the image of the cat?
Thank you for anyone who spends time on helping me solve this issue.
If you're using jQuery you could do something like this:
$('a.cat').click(function()
{
$('input[name="message"]').val(':cat');
});
In this case you would need to update the link with the following:
<a class="cat" href="#"><img src="cat.jpg"/></a>
You can create a js function and then call it with the anchor to change the value attribute of the input. Input type text should not have a closing tag either.
function changeChatInput(value) {
document.getElementById('chatInput').value = value;
}
<form method="POST" action="chat.php">
<input type="text" name="message" id="chatInput" />
<input type="submit" />
</form>
<a href="javascript: changeChatInput(':cat');">
<img src="cat.jpg" />
</a>
Here is a solution in JS (without jQuery):
http://jsbin.com/doqedodezo/3/edit?html,js,output
The image triggers a JS function and passes the text which is supposed to be added to the input field.
I added a id to the input to address it.
I'd use
$('a > img').click(function() {
var imgName = retrieveImgName($(this).attr('src'));
$('input[name="message"]').val(':' + imgName);
});
var retrieveImgName = function(imgPath) {
return imgPath.substring(0, imgPath.indexOf('.'));
};
Doing that you can extract the logic for retrieving the name based on the src attribute of the img.
So, if the logic changes for some reason, you can sobstitute it quite easily.
You can achieve your job by using this jQuery syntax.
<script type="text/javascript">
$('a > img').click(function(e){
e.preventDefault();
$('input[name="message"]').val(':cat');
});
</script>
Here is my sample code in js which display a form with textbox name=q and a submit button.
var imghtml='<div id="qrfile"><canvas id="out-canvas" width="320" height="240"></canvas>'+
'<form name="test" action="qr.js" method="get"><div id="imghelp">Enter student id'+
'<br> manually<br>'+
'<input type="text" name="q"/><input type="submit" value="submit" onclick="myFunction()">'+
'</div></form>'+
'</div>';
I want to capture the value when user click on submit button, the value is display in a div. i've create the function myFunction() below:
function myFunction(){
document.getElementById("result_1").value=`q`;
}
the error is that i've wrongly capture q which is textbox name. any help
Give your textbox an id and find that id using document.getElementById. Then you'll be able to get the value in the textbox.
Give the field an ID then access/set the value in the way Suman suggested or using jquery instead you could do the following
$("#result_1").val() //Retrieve
$("#result_1").val("q") //Set
<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(););
}
I'm having a strange behaviour with this code:
<script type="text/javascript">
function get()
{
alert("gggg");
jQuery.get (
"http://localhost:8080/c/portal/json_service",
{
serviceClassName: "com.liferay.test.service.TrabajadorServiceUtil",
serviceMethodName: "findByName",
servletContextName: "TrabajadorPlugin-portlet",
serviceParameters: "[param]",
param : document.getElementById("nombre")
}
);
}
</script>
<div>
<form>
<input type="text" id="nombre" value="<%=searching%>"/>
<input type="button" value="Submit" onClick="javascript:get()"/>
</form>
</div>
Liferay portal gets blocked when the button "Submit" is pressed. The pop-up with the message "gggg" is showed, but after click ok on it, the page becomes blocked.
If I remove the line 'param : document.getElementById("nombre")', it doesn't block.
Can anyone explain me where is the error, or the reason of this behaviour?
Thanks in advance,
Rafa
The problem is that you're trying to pass an entire DOM element as the value for param, which jQuery isn't going to like. What type of element has ID nombre, and what property from that element do you want? If it's some kind of input, you likely want the value property, so you'd do:
param : document.getElementById("nombre").value
Updated Answer:
Thinking this through a little more, you should probably do this in a different way altogether. You're sending the data when the user clicks on the submit button, but remember if a user hits enter while typing in the input text box the form will submit but your code will not catch that.
A more robust solution would be to do it this way instead:
<div>
<form id="nombre_search">
<input type="text" id="nombre" value="<%=searching%>"/>
<input type="submit" value="Submit"/>
</form>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#nombre_search").submit(function(){
$.get("http://localhost:8080/c/portal/json_service", {
serviceClassName: "com.liferay.test.service.TrabajadorServiceUtil",
serviceMethodName: "findByName",
servletContextName: "TrabajadorPlugin-portlet",
serviceParameters: "[param]",
param : $("#nombre").val()
});
return false;
});
});
</script>
Changes to your code:
Added an id to the form.
Made the submit button a submit button instead of just a button.
Placed code inside $(document).ready block.
Code runs when form is submitted not when button is clicked.
Hope this helps,
Sandro
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);
});
});