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());
});
Related
Being directly, I'm working on a project that have a filter button, but one of the requirements is to keep the parameters from the filter forms if the user refreshs the page.
The problem is: When I refresh the page with values into the form, just the DATE input resets
I have three forms, and the last is a Date. I managed to make it work for the first two with jQuery but with the date field it just does not work ...
Does anyone know how to solve it? thank you!
$(document).ready(function() {
if (document.getElementById("car_result"))
document.getElementById("car_result").value = localStorage.getItem("item_result");
if (document.getElementById("car_action"))
document.getElementById("car_action").value = localStorage.getItem("item_action");
if (document.getElementById("dei"))
document.getElementById("dei").value = localStorage.getItem("item_dei");
});
$(window).on('beforeunload', function() {
localStorage.setItem("item_result", document.getElementById("car_result").value);
localStorage.setItem("item_action", document.getElementById("car_action").value);
localStorage.setItem("item_dei", document.getElementById("dei").value);
});
<div class="container-fuid">
<div class="row col-sm-12">
<div class="col-sm-6">
<form class="form text-center" id="form1">
Result: <input id="car_result" type="text" class="form-control"><br>
Last name: <input id="car_action" type="text" class="form-control">
<input placeholder="Initial date" class="textbox-n form-control borderform" type="text" onfocus="(this.type='date')" name="dei" id="dei" /><br><br>
<button>Filter</button>
</form>
</div>
</div>
</div>
Javascript focus is not working in my code.
HTML
<div class="col-md-6" style="border:none; margin-top:2px; padding-right:5px">
<input type="text" id="edtunt" ng-model="Unit" class="form-control" placeholder="Edit Unit" />
</div>
Javascript
var textbox = document.getElementById('edtunt');
//document.getElementById("edtunt").focus();
document.getElementById("edtunt").focus();
$scope.Unit = unit.name;
use tabindex="0" for making div focusable
Your code works:
document.getElementById('edtunt').focus();
<div class="col-md-6">
<input
type="text"
id="edtunt"
ng-model="Unit"
class="form-control"
placeholder="Edit Unit">
</div>
Also, within your AngularJS application, you can add the autofocus attribute:
angular
.module('MyApp', [])
.controller('MyController', function() {});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<div class="col-md-6">
<input
autofocus
type="text"
id="edtunt"
ng-model="Unit"
class="form-control"
placeholder="Edit Unit">
</div>
</div>
Indeed your code should work. Just a question, why you do:
var textbox = document.getElementById('edtunt');
document.getElementById("edtunt").focus();
Instead of:
var textbox = document.getElementById('edtunt');
textbox.focus();
What worked for me is making sure the whole document is loaded before setting focus. A very easy way to do that is using this copy paste JQuery code:
$( document ).ready(function() {
var textbox = document.getElementById('edtunt');
textbox.focus();
});
Hope this might help!
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>
Say I have the following structure representing inputs for soccer matches:
<form>
<div class="match">
<div class="scores">
<input type="text">
<input type="text">
</div>
</div>
<div class="match">
<div class="scores">
<input type="text">
<input type="text">
</div>
</div>
<div class="match">
<div class="scores">
<input type="text">
<input type="text">
</div>
</div>
</form>
And I want to randomly populate each input, but each pair must be different.
So this is what I tried to do:
$('form .match .scores').each(function () {
var inputs = $(this).find('input[type=text]');
// generate scores...
inputs[0].val(score1);
inputs[1].val(score2);
});
I don't know what I am missing because when trying to populate the first input the console reports the following error:
Uncaught TypeError: inputs[0].val is not a function
What am I doing wrong?
Wrap your input in a jquery selector like $(inputs[0]) or you can use input[0].value since input[0] is a dom element.
$(function(){
$('form .match .scores').each(function () {
var inputs = $(this).find('input[type=text]');
console.log(inputs);
$(inputs[0]).val(score1);
$(inputs[1]).val(score2);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="match">
<div class="scores">
<input type="text">
<input type="text">
</div>
</div>
<div class="match">
<div class="scores">
<input type="text">
<input type="text">
</div>
</div>
<div class="match">
<div class="scores">
<input type="text">
<input type="text">
</div>
</div>
</form>
I actually answered a very similar question today:
jQuery .each() function accessing other selector via indexes
When calling a jquery array object using brackets (like inputs[0]) you're getting back an HTML node element, not a jQuery object.
try using inputs.eq(0) which will return the jQuery object in position i, then you can use jQuery's val()
for more on eq, see jQuery documentation: https://api.jquery.com/eq/
Given a jQuery object that represents a set of DOM elements, the .eq() method constructs a new jQuery object from one element within that set. The supplied index identifies the position of this element in the set.
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>