I am try to make application there i need when input filed value enter than this value show in editable div.so i am using keyup function but now i need editable div value show in input filed i mean revers process.Below i am showing what i have done.
JavaScript
$('#input1').keyup(function () {
txt = $('#input1').val();
$('#field1').text(txt);
});
HTML
<input type="text" id="input1" />
<div id="field1" contentEditable='true'; ></div>
You just need to do the reverse. Here is the code:
$('#field1').keyup(function () {
$('#input1').val($('#field1').text());
});
Demo http://jsfiddle.net/yRzyE/1/
Related
I want text in the span field to change as the input field changes live.
So I have a input field
<input type="text">
and a span field
<span></span>
I want text in the span field to change as I type in the input field.
I know there's already a question like this that was asked Change span when text field changes. But what makes this question different is the changes should happen as you type i.e. live.
Here is a vanilla JavaScript version.
var input = document.querySelector("[type=text]"),
output = document.querySelector(".output");
function keydownHandler() {
output.innerHTML = this.value;
}
input.addEventListener("input", keydownHandler);
<input type="text">
<span class="output"></span>
Very simple, use a keyup event.
$(function () {
$("input").keyup(function () {
$("span").text(this.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<p><span></span></p>
In the latest browsers, you can use oninput event.
You can use HTML5 input event, listen the event using on()
$('.input').on('input', function() {
$('.span').text(this.value)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="input">
<br><span class="span"></span>
JavaScript solution with input event
function change(val) {
document.querySelector('.span').innerHTML = val;
}
<input type="text" oninput="change(this.value)">
<br><span class="span"></span>
I am trying to remove parent div if the input value is empty and show parent div if the input value is not empty?
the value of the input field is dynamic which means the value of it is the value of another input filed and I do this using javascript.
so far I haven't been able to show/hide the parent div for some reason. and I suspect the reason is because the value of the input field is dynamic which means the users are not typing anything in that input field. they are typing in another input filed and the value of the dynamic input field gets updated accordingly.
Here is what i have so far for show/hide the parent div:
HTML:
<div id="BOTTEXT2" class="secTxt">
<input type="text" class="sect2" id="sect2" style="border:none; background:none; " value="" size="12" readonly="readonly"/>
</div>
JAVASCRIPT:
<script type="text/javascript">
if(document.getElementById("sect2").value == ""){
document.getElementById("BOTTEXT2").style.display="block";
}
</script>
could someone please help me out with this?
Wrap your code in an event handler:
window.onload = function() {
var input = document.getElementById('sect2');
input.addEventListener('change', function() {
document.getElementById('BOTTEXT2').style.display = (input.value ? 'block' : 'none');
}, false);
};
This way, whenever you update the input, the div state changes accordingly.
I don't know if it will work for you, but follow the solution.
I created another input type out of main div to simulate the situation.
I used jQuery. After that, you can set your css of your way.
HTML
<div id="BOTTEXT2" class="secTxt">
<input type="text" class="sect2" id="sect2" style="border:none; background:none; " value="BSAU145D" size="12" readonly="readonly"/>
</div>
<input type="text" id="sect1">
Javascript (jQuery)
$(document).ready(function(){
$('#sect1').keyup(function(){
if($('#sect1').val() == 'test') {
$('#BOTTEXT2').css({'display':'none'});
} else {
$('#BOTTEXT2').css({'display':'block'});
}
});
});
Here is the fiddle
So every 'special-input' div contains an input field. I am trying regulate when each information can be entered into each input field.
Initially, I would like the first input field from the top to be enabled, while the rest of the input fields below it be disabled.
OnChange of input field 1, I would like for the next input field below it to be enabled, while the rest disabled. OnChange of input field 2, I would like for input field 3 to become enabled, while the rest remain disabled, etc...
I know I can use JQuery's attr() to enable input fields when needed, but I am unsure how to apply the logic to accomplish this as JQuery is quite new to me.
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
......
......
......
<div class="special-input"><input type="text" /></div>
// Cache the inputs, this is a good way to improve performance of your
// jQuery code when re-using selectors.
var $inputs = $('.special-input :input');
// Disable all except the first input
$inputs.not(':first').attr('disabled', 'disabled');
$inputs.each(function(i) {
// For each input, bind a change event to enable the next input,
// if the user presses enter, the next textbox will receive focus. if the user
// presses tab, the following input won't receive focus, so you'll have to add
// code if you want this to work.
$(this).on('change', function() {
// Get the index of the current input element we're looking at,
// We need to re-wrap the $input[i] element as it is now a normal
// DOM element.
var $nextInput = $($inputs[i + 1]);
$nextInput.removeAttr('disabled').focus();
});
});
Edit: You can see a working example at http://jsfiddle.net/dFZEq/11/
Edit 2:
To enable the next line's set of elements after a certain condition is met, use this:
var $specialInputs = $('.special-input');
// don't disable the first line's input elements.
$specialInputs.not(':first').find(':input').attr('disabled', 'disabled');
$specialInputs.on('change', function() {
var $this = $(this);
if ($this.find(':input').filter(function() {
// you can change this filter to match any condition you
// like, for now we'll just make sure all inputs have a non-empty value
return $(this).val() == '';
}).length == 0) {
var $nextInputSet = $($specialInputs[$this.index() + 1]).find(':input');
// enable the next set of elements
$nextInputSet.removeAttr('disabled');
// focus your element here, requires more work
$nextInputSet.first().focus();
}
});
Example at http://jsfiddle.net/tFG5W/
I've not tested the following code, but should look something like this :
$(".special-input").bind("change",function(event){
$(this).attr("disabled","disabled");
$(this).next().removeAttr("disabled").focus();
});
i need to create a html form where upon entering value on one input text field should automatically enter calculated value in another input text field using jquery.I found a source http://pastie.org/2607417,where i have input text value which output in a paragraph... Any help would be greatly appreciated
$("input[name='textbox1']").blur(function() {
//if u want to perform any calculation
var textbox2val=.....;
//if u want to just paste the textbox1 value
var textbox2val=$(this).val();
$("input[name='textbox2']").val(textbox2val);
});
Try
<input type="text" value="" id="text1" />
<p></p>
<div></div>
<script>
$("#text1").keyup(function () {
var value = $(this).val();
value2 = value*2;
value3 = value*3.7;
$("p").text(value2);
$("#text2").val(value3);
});
</script>
<input type="text" value="" id="text2" />
Greetings,
Assume that I have such hidden div:
<div id="option-dialog" style="display:none;">
First
Second
</div>
And I have a text input field:
<input type="text" id="myinput" />
When myinput field is clicked by mouse, I want the hidden div to appear close to the selected input field and once user selects a link from this div, div dissapears and the value selected is becomes the value of the text input field. How to achieve this?
I use jquery and jquery ui
Regards
You can use Cluetip to do this.
have you considered using JQueryUI: Autocomplete ?
This does exactly what you are looking for
$("#myinput").live("focus", function() {
$("#option-dialog").toggle();
});
$(".option").live("click", function() {
var opt_val = $(this).attr("value");
$("#myinput").val(opt_val);
$("#option-dialog").toggle();
});
add class="option" to your list items
Hi may be this what to you need?
$(function() {
$("#myinput").click(function(){
$(this).hide('slow');
$('#option-dialog').show('slow');
});
$('#option-dialog a').click(function(){
var a = $(this).text();
$(this).parent().hide('slow');
$("#myinput").val(a).show('slow');
});
});
<div id="option-dialog" style="display:none;">
First
Second
</div>
<input type="text" id="myinput" />