What I'm trying to do is when I update input text ID called foo it should be updated real time on input text id called goo. I already close to this solution I think but somehow it is not working. please check.
$('#foo').keyup(updatetxt);
$('#foo').keydown(updatetxt);
var foo = $('#foo');
function updatetxt() {
$('#goo').val(foo);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<input type="text" id="foo" value="something">
<input type="text" id="goo" disabled="disabled" value="something">
You are assigning the element to val() whereas you need to update the value and that should happen into the function.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
</head>
<body>
<input type="text" id="foo" value="something">
<input type="text" id="goo" disabled="disabled" value="something">
<script type='text/javascript'>
$('#foo').keyup(updatetxt);
//$('#foo').keydown(updatetxt);
//var foo = $('#foo').val();
function updatetxt() {
$('#goo').val($('#foo').val());
}
</script>
</body>
</html>
You were very close. You were just updating with the HTML element, instead of the HTML element value. Your updatetxt function should look like this:
var value = $(this).val();
$('#goo').val(value);
Here you go with a solution https://jsfiddle.net/pyvnkdc2/
$('#foo').keyup(function(){
$('#goo').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="foo" value="something">
<input type="text" id="goo" disabled="disabled" value="something">
On keyup just assign the value to another input textbox.
Related
When text is written into the input box and then the button is clicked, I want the text (value) to be added to the array I have created for it (the array is called 'subject'). The text (value) from the input box is not being added... why?
var subject = [];
function addSubjects() {
namesInputted = document.getElementById('namesInputter').value;
subject.push(namesInputted);
console.log(subject);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Prueva tu Suerte</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="" action="index.html" method="post">
<input type="text" id="namesInputter" value="">
<button onclick="addSubjects()">Add Player</button>
</form>
<span id='S'></span>
<span id='V'></span>
<span id='O'></span>
<span id='P'></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="function.js"></script>
</body>
</html>
Actually, You code is working. The input value is appending to the array. But the Issue is, You are using form. So when you click the button, It will submit the form right after add the value to array. So page will refresh and the array will become empty.
Just remove form tag, if you don't want to submit data.
var subject = [];
function addSubjects() {
namesInputted = document.getElementById('namesInputter').value;
subject.push(namesInputted);
console.log(subject);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Prueva tu Suerte</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" id="namesInputter" value="">
<button onclick="addSubjects()">Add Player</button>
<span id='S'></span>
<span id='V'></span>
<span id='O'></span>
<span id='P'></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="function.js"></script>
</body>
</html>
If you want to use form submit with jQuery, you can use like this:
Html
<form>
<input type="text" id="namesInputter" value="">
<button type="submit">Add Player</button>
</form>
JavaScript
var subject = [];
function addSubjects(e) {
}
$("form").submit(function(e){
e.preventDefault();
namesInputted = document.getElementById('namesInputter').value;
subject.push(namesInputted);
console.log(subject);
});
Using the javascript i am trying to disable users input after rich 80 charecters and if they press "Backspace" and remove some charecters then they can enter text again until rich again to 80. I have written code bellow but dont know why its not working. Any idea?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
</head>
<body>
<input type="text" class="form-control" id="editText" aria-describedby="basic-addon2" value="Something">
<span class="input-group-addon" id="basic-addon2">/80</span>
<script type='text/javascript'>
$('#editText').keyup(updateCount);
$('#editText').keydown(updateCount);
function updateCount() {
var limitText = "/80";
var lengthNumber = $(this).val().length;
if (lengthNumber>80) {
$("#editText").keydown(false);
}else{
$("#editText").keydown(true);
}
$('#basic-addon2').text(lengthNumber+limitText);
}
</script>
</body>
</html>
<input type="text" name="usrname" maxlength="80">
You can use maxlength tag.
You can directly use input property maxlength="80":
<input maxlength="80">
https://jsfiddle.net/ramseyfeng/wph565xu/
If you cant use maxlength property, and you MUST use javascript / JQuery, you could use bellow code
var limitText = 10;
$('#editText').keydown(function(e){
if ($(this).val().length > limitText)
{
if (e.keyCode != 8)
{
e.preventDefault();
return false;
}
}
});
Demo : https://jsfiddle.net/5dctLbxq/
library = https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
This is my code: I need get all values of input, I used $("input").val() but return ="" always.
input tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
</head>
<body>
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
</body>
</html>
Try this jquery library. bootstrap-tokenfield
HTML :
<input type="text" class="form-control" id="tokenfield" value="red,green,blue" />
Jquery :
$('#tokenfield').tokenfield({
autocomplete: {
source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
delay: 100
},
showAutocompleteOnFocus: true
})
Demo Fiddle
With this lab, you can call an array with all values:
$("input").tagsinput('items')
Like that (open your terminal and check the console.log): https://jsfiddle.net/DiogoBernardelli/bzyphmuu/
Please check this, I was able to print output in console,
console.log($("input").val())
All I'm trying to do is get the val() of an Text Input. Here is an example.
I don't know if external links are allowed so I will also paste it here :
<div class="input-group">
<input type="text" id="#test" class="form-control" aria-label="..." style='border-radius:4px;'>
</div>
<script>
// Always shows up as undefined..not "".
console.log($("#test").val());
</script>
Does anyone know why I cannot get the value of this element?
You have to remove the # sign from the id attribute :
<input type="text" id="#test" class="form-control" aria-label="..." ..
//_____________________^
Hope this helps.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Why can't I get the input value of the #test?</title>
</head>
<body style='padding:64px;'>
<div class="input-group">
<input type="text" value="test value" id="test" class="form-control" aria-label="..." style='border-radius:4px;'>
</div>
<script>
// Always shows up as undefined..not "".
console.log($("#test").val());
</script>
</body>
</html>
I have a date picker in my JSP page. Now I want to add start time and end time with in this datepicker i.e calender. How to do that. I also want to set validation that start time should always be less than the end time. My code for datepicker in JSP is
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>User_Interface</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$("#datepicker").datepicker({ minDate: -210, maxDate: -1 });
});
</script>
</head>
<b>Select Date to be compared</b><br>
<p>Date: <input type="text" name="datepicker" id="datepicker"></p>
<input type="submit" value="Submit"><br>
EDIT
Now my datepicker i.e. calender is also not working when I tried with this code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>User_Interface</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link type="text/css" href="css/bootstrap.min.css" />
<link type="text/css" href="css/bootstrap-timepicker.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
<script>
$(function() {
$("#datepicker").datepicker({ minDate: -210, maxDate: -1 });
});
</script>
<script type="text/javascript">
$('#timepicker2').timepicker({
minuteStep: 1,
template: 'modal',
appendWidgetTo: 'body',
showSeconds: true,
showMeridian: false,
defaultTime: false
});
</script>
</head>
<body>
<br>
<br>
<form>
<b>Select Date to be compared</b><br>
<p>Date: <input type="text" name="datepicker" id="datepicker"></p>
<div class="input-append bootstrap-timepicker">
<input id="timepicker2" type="text" class="input-small">
<span class="add-on">
<i class="icon-time"></i>
</span>
</div>
<input type="submit" value="Submit">
<br>
</form>
</body>
</html>
Can anyone please help me with this.
try by changing the type in input tag from
type="text"
to
type="datetime-local"
and start modifying accordingly
Change to a datetimepicker. There are several around.
I use this one.
You can use this Jquery Plugin which will add timepicker functionality to your input elements.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/bootstrap.min.css" />
<link type="text/css" href="css/bootstrap-timepicker.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
</head>
<body>
<div class="input-append bootstrap-timepicker">
<input id="timepicker1" type="text" class="input-small">
<span class="add-on"><i class="icon-time"></i></span>
</div>
<script type="text/javascript">
$('#timepicker1').timepicker();
</script>
</body>
</html>
Works for me.
Hope this helps.