HTML:
<div id="Background">
<input id="search-Bar" type="text">
<button id="SearchButton">Search</button>
</div>
var name = $("#search-Bar").val();
$("#SearchButton").on("click", function() {
console.log(name);
});
i am trying to get the value of the input using .val() but when i console log it turns out blank every time, can someone please tell me how to fix this?
$("#SearchButton").on("click", function() {
var name = $("#search-Bar").val(); //this should be here
console.log(name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Background">
<input id="search-Bar" type="text">
<button id="SearchButton"> Search </button>
The name variable is being set only once on script load, when it's actually empty and stays at this state.
Declare it inside the functions body to get a new, actual value with every function call.
$("#SearchButton").on("click", function() {
var name = $("#search-Bar").val();
console.log(name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Background"></div>
<input id="search-Bar" type="text">
<button id="SearchButton"> Search </button>
You need to get the value using : $('#search-Bar').val()
var name = $("#search-Bar").val();
$("#SearchButton").on("click", function(){
console.log($('#search-Bar').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Background">
<input id="search-Bar" type="text">
<button id="SearchButton"> Search </button>
Related
$(document).ready(function() {
var parent = $('#foo');
parent.find('#bar').val('hi');
console.log(parent.prop('outerHTML'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<input type='text' id="bar" value="" />
</div>
I have a container div with child input element, the initial value is empty, after that I change it's value using jQuery and try to get the changed html string using .prop('outerHTML'). However it returns:
<div id="foo"><input type="text" id="bar" value=""></div>
I need to return it as:
<div id="foo"><input type="text" id="bar" value="hi"></div>
Is this possible ?
You can use .attr() instead.
$(document).ready(function() {
var parent = $('#foo');
parent.find('#bar').attr('value', 'hi');
console.log(parent.prop('outerHTML'));
$('#txt').text('hello');
console.log($('#par').find('#txt').prop('outerHTML'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<input type='text' id="bar" value="" />
</div>
<div id="par">
<textarea id='txt'></textarea>
</div>
For more details - visit following link.
Sure, use direct attrbite change, not element value.
$(document).ready(function() {
var parent = $('#foo');
parent.find('#bar').attr('value', 'hi');
console.log(parent.prop('outerHTML'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<input type='text' id="bar" value="" />
</div>
try this
$(document).ready(function() {
var parent = $('#foo');
parent.find('#bar').attr('value','hi');
console.log(parent.prop('outerHTML'));
});
I have two inputs(number).
How can I duplicate data from first to second and back?
For example, I'll set some value in first input and in second input I get same value and if I set same value in second input I want to get same value in first input.
I think it must be something like that
<div class="first">
<input type="text" id="email">
</div>
<div class="second">
<input type="text" id="name">
</div>
<div id="slider"></div>
<script>
$('#email').change(function(){
$(this).val($('#name').val());
});
('#name').change(function(){
$(this).val($('#email').val());
});
$('#slider').slider();
</script>
https://jsfiddle.net/Frunky/hzh9zwfo/4/
When I'm trying to put smth in slider() function I get error in console (slider function doesn't exist)
Thanks.
You almost had it...
Try this:
$('#email').keyup(function (){
$('#name').val($(this).val()); // <-- reverse your selectors here
});
$('#name').keyup(function (){
$('#email').val($(this).val()); // <-- and here
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first">
<input type="text" id="email">
</div>
<div class="second">
<input type="text" id="name">
</div>
Building on #technophobia 's answer, if you want them to update live, try this:
$('#email').keyup(function(){
$('#name').val($(this).val());
});
$('#name').keyup(function(){
$('#email').val($(this).val());
});
Hello I just started today so im pretty new.
I have to get a string, which a user can enter on the website into my JavaScript file. I found out that I should use document.getElementById("myID").value to get the value of an input field on the html site. Here is my problem: I can't use the brackets arround my input and button because a submit will force a reload of the site and my functions wont have any affect.
So I have to get the string on the fly into my JavaScript file.
This is all I have at the moment:
<div id="searchDiv">
<input type="text" id="searchInput" placeholder="Search for Gifs..." value="" />
<input type="button" id="searchButton" value="Search"></button>
</div>
And my JavaScript file:
var searchButton = document.getElementById("searchButton");
var searchInput = document.getElementById("searchInput").value;
searchButton.addEventListener("click",
function() {
function(parameter)
}
)...
So document.getElementById("searchInput").value; give back null even if the input field has been edited.
I hope you can help me.
It is because your are storing the searchInput value even before the button is clicked,so the value would be empty irrespective of anything that you enter as input
Try accessing on the click event of the button
check this snippet
var searchButton =document.getElementById("searchButton");
var searchInput=document.getElementById("searchInput");
window.onload=function(){
searchButton.addEventListener("click",
function() {
alert(searchInput.value);
}
)
}
<div id="searchDiv">
<input type="text" id="searchInput" placeholder="Search for Gifs..." value="" />
<input type="button" id="searchButton" value="Search">
</div>
Hope it helps
You should use
<button></button>
Instead of
<input></button>
What I did was
<div id="searchDiv">
<input type="text" id="searchInput" placeholder="Search for Gifs...">
<button id="searchButton">Search</button>
</div>
<script type="text/javascript">
document.getElementById("searchButton").onclick = function(){
alert(document.getElementById("searchInput").value);
}
</script>
I have a div like this
<div id="content">
<div>
<input type="text"/>
</div>
</div>
and some one enter a text abc in textbox and click save then need a code which return var a='<div><input type="text" value="abc"/></div></div>'
$("#content").html() not working for me.
UPDATED: Try setting the input attribute.I Have updated this for multiple input fields.
$(document).ready(function(){
$('button').on('click',function(){
$('input').each(function(){//looping each input field here
$(this).attr('value', $(this).val());//you need to set the attribute value to get in html
});
console.log($("#content").html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</div>
</div>
<button >click</button>
I am trying to post the literal value of a button as form data but cannot achieve this. Here's what I have so far.
<form method="POST" action="/post" id="message">
<div class="container">
<div class="row">
<div style="line-height:22%;">
</div>
<button class="btn-change" type="submit" name="foo" value="bar"><dt><code>button for value bar</code></dt></button>
</div>
</div>
</form>
<script type="text/javascript">
$(".btn-change").on('click', function() {
var value = $(this).val();
document.getElementById('message').submit();
});
</script>
How do I post value in my form?
Solution
This seems to work:
<button class="btn-change" name="message" form="message" value="bar"><dt><code>button for value bar</code></dt></button>
With the removal of (of course):
<script type="text/javascript">
$(".btn-change").on('click', function() {
var value = $(this).val();
document.getElementById('message').submit();
});
</script>
Put the value in a hidden field to declare inside the form : <input type="hidden" name="myvalue">. It won't be displayed on screen, but you can store in it's value property anything you want to post.