I have 3 textboxes, I want to create something like this: When I type to textbox1, it will duplicate to textbox3, and when I type to textbox2, it will append to textbox3 with a delimiter ( - ).
For example, if I write STACK to textbox1, textbox3 will result STACK, then if I wrote down textbox2 with OVERFLOW, textbox3 value is: STACK-OVERFLOW
Here's my code at fiddle:
$(function() {
$("#text1").keyup(function() {
$('#text3').val(this.value);
});
$("#text2").keyup(function() {
$('#text3').val.append('-'+this.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="text1" />
<input type="text" id="text2" />
<input type="text" id="text3" />
Anyone can fix my code?
$(function() {
var text1value , text2value;
$("#text1").keyup(function() {
text1value = $(this).val();
$('#text3').val(text1value);
});
$("#text2").keyup(function() {
text2value = $(this).val();
$('#text3').val(text1value+'-'+text2value);
});
});
You need to check also if text2 is empty so you don't have to concatenate the '-' in that case.
JS Fiddle
$(function() {
$("#text1").keyup(function() {
var text2 = $('#text2').val();
var temp = $(this).val();
if (text2 != '') {
temp = $(this).val()+'-'+text2;
}
$('#text3').val(temp);
});
$("#text2").keyup(function() {
var temp = $('#text1').val()+'-'+$(this).val();
$('#text3').val(temp);
});
});
$(function() {
$("#text1").keyup(function() {
$('#text3').val(this.value);
});
$("#text2").keyup(function(e) {
$('#text3').val(function(index, val) {
return $("#text1").val() + "-" + e.target.value;
});
});
});
This should do it
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="text1" />
<input type="text" id="text2" />
<input type="text" id="text3" />
This is one way to do it:
http://jsfiddle.net/6qojd9L4/
$(function() {
$("#text1").keyup(function() {
$('#text3').val(this.value + '-' + $('#text2').val());
});
$("#text2").keyup(function() {
$('#text3').val($('#text1').val() + '-'+this.value);
});
});
Related
I want to get value from these two id after they changed. How to do that.
$(document).ready(function(){
$("#Send").change(function(e){
alert(this.value);
});
$("#Receive").change(function(e){
alert(this.value);
})
})
I want something like
if( #send change && #receive change ){
var send
var receive
}
Actually, I want to see if both values of #send & #receive are changed or not. If both value are changed then I want to receive their value.
You have two possibilities to do it:
$(document).ready(function(){
$('#Send, #Receive').change(function(e){
alert(this.value);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Send">
<input type="text" id="Receive">
Or you could do it like that:
$(document).ready(function(){
$('#Send').add('#Receive').change(function(e){
alert(this.value);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Send">
<input type="text" id="Receive">
You can so something below
$(document).ready(function(){
var oldSend = $("#Send").val();
var oldReceive = $("#Receive").val();
$("#Send, #Receive").change(function(e){
var _t = $(this);
/*if(_t.attr('id') == 'Send'){
console.log('Send ' + _t.val() );
} else if('#Receive'){
console.log('Receive ' + _t.val() );
}*/
if(oldSend != $("#Send").val() && oldReceive != $("#Receive").val()){
console.log('changedd ', _t.val())
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Send">
<input type="text" id="Receive">
I've got a number of input id's in a form as follows (example, not complete form) This is for a Chrome Extension so I cannot modify the form.
<form>
<input id="data-draft-brand-name" />
<input id="data-draft-name-en-us" />
<input id="data-draft-bullet-points-bullet1-en-us" />
<input id="data-draft-bullet-points-bullet2-en-us" />
<input id="data-draft-description-en-us" />
</form>
What I am doing is using keyup on each on the inputs, and then doing the same thing for each id like so:
$( "#data-draft-description-en-us" ).keyup(function() {
var currentVal = $(this).val();
currentVal = currentVal.toLowerCase();
var currentLength = currentVal.length;
currentLength = 2000 - currentLength;
$('#description-count').text(`${currentLength} characters left`);
if(currentVal.indexOf('word') !== -1) {
$('#data-draft-description-en-us').css('border','1px solid red');
$('#data-draft-description-en-us').css('background','red');
} else {
$('#data-draft-description-en-us').css('border','1px solid #a6a6a6');
$('#data-draft-description-en-us').css('background','none');
}
});
As you can see, there will be a lot of repetition. Is there anyway I can pass an array of id's to keyup, and then access the id in the function. Some pseudo code as an example..
$(["#data-draft-brand-name","#data-draft-name-en-us"]).keyup(function(inputID) {
$(inputID).css('border','1px solid red');
}
Here you go with a solution
$("#data-draft-brand-name, #data-draft-name-en-us").keyup(function() {
var id = $(this).attr('id');
$('#' + id).css('border','1px solid red');
});
No need to provide square brackets [], id should be separated by comma.
Here you go with jsfiddle https://jsfiddle.net/tjkah0ck/2/
$( "#data-draft-brand-name, #data-draft-name-en-us" ).keyup(function() {
var currentVal = $(this).val();
currentVal = currentVal.toLowerCase();
console.log(currentVal);
var currentLength = currentVal.length;
currentLength = 2000 - currentLength;
$('#description-count').text(`${currentLength} characters left`);
if(currentVal.indexOf('word') !== -1) {
$('#data-draft-description-en-us').css('border','1px solid red');
$('#data-draft-description-en-us').css('background','red');
} else {
$('#data-draft-description-en-us').css('border','1px solid #a6a6a6');
$('#data-draft-description-en-us').css('background','none');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="data-draft-brand-name"/>
<input id="data-draft-name-en-us"/>
<input id="data-draft-bullet-points-bullet1-en-us" />
<input id="data-draft-bullet-points-bullet2-en-us" />
<input id="data-draft-description-en-us" />
</form>
Hope this will help you.
You can use start with selector for attribute, [name^=”value”] [https://api.jquery.com/attribute-starts-with-selector/][1]
If we need to edit your code then it should be below
$( "div[id^='data-draft-'" ).keyup(function() {
var currentInput = $(this);
var currentVal = $(this).val();
currentVal = currentVal.toLowerCase();
console.log(currentVal);
var currentLength = currentVal.length;
currentLength = 2000 - currentLength;
$('#description-count').text(`${currentLength} characters left`);
if(currentVal.indexOf('word') !== -1) {
currentInput.css('border','1px solid red');
currentInput.css('background','red');
} else {
currentInput.css('border','1px solid #a6a6a6');
currentInput.css('background','none');
}
});
Enjoy
To realize what you want, you should use a class to define which input will have a keyup event handler.
Also, you can retreive the id of the current input by calling attr("id").
So you'll have a code like this:
$(document).ready(function(){
$(".keupinput").keyup(function(event) {
var inputid = $(this).attr("id");
console.log("I'm the " + inputid + " input.");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input class="keupinput" id="data-draft-brand-name" />
<input class="keupinput" id="data-draft-name-en-us" />
<input class="keupinput" id="data-draft-bullet-points-bullet1-en-us" />
<input class="keupinput" id="data-draft-bullet-points-bullet2-en-us" />
<input class="keupinput" id="data-draft-description-en-us" />
</form>
I have an input where I want the first character to be #.
That means if the user writes something, it automatically adds the #, or better, the # is already present in the input.
How do I do that? I thought i could do that with jQuery mask but I couldn't make it work.
Here is the code,
$("#your-input-id").keypress(function(e) {
if (e.keyCode != 8) {
var text = this.value;
if (text.length == 0) {
this.value = text + '#';
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form action="#">
<input id="your-input-id" type="text" placeholder="Type a text here..." data-prefix="#" />
</form>
Hope this will work.
This will append # when you will start typing, and it will append everything later to #.
EDIT
$("#your-input-value").keydown(function(e) {
var cur_val=$(this).val();
var field=this;
setTimeout(function () {
if(field.value.indexOf('#') !== 0) {
$(field).val(cur_val);
}
}, 1);
});
See this solution http://codepen.io/bachors/pen/yeJOrg
Running example to meet your needs:
/***********************************************
* #### jQuery Prefix Input ####
* Coded by Ican Bachors 2015.
* http://ibacor.com/labs/jquery-prefix-input/
* Updates will be posted to this site.
***********************************************/
$(".yourClass").focus(function(){var a=$(this).data("prefix"),ibacor_currentId=$(this).attr('id'),ibacor_val=$(this).val();if(ibacor_val==''){$(this).val(a)}ibacor_fi(a.replace('ibacorat',''),ibacor_currentId);return false});function ibacor_fi(d,e){$('#'+e).keydown(function(c){setTimeout(function(){var a=bcr_riplis($('#'+e).val()),qq=bcr_riplis(d),ibacor_jumlah=qq.length,ibacor_cek=a.substring(0,ibacor_jumlah);if(a.match(new RegExp(qq))&&ibacor_cek==qq){$('#'+e).val(bcr_unriplis(a))}else{if(c.key=='Control'||c.key=='Backspace'||c.key=='Del'){$('#'+e).val(bcr_unriplis(qq))}else{var b=bcr_unriplis(qq)+c.key;$('#'+e).val(b.replace("undefined",""))}}},50)})}function bcr_riplis(a){var f=['+','$','^','*','?'];var r=['ibacorat','ibacordolar','ibacorhalis','ibacorkali','ibacortanya'];$.each(f,function(i,v){a=a.replace(f[i],r[i])});return a}function bcr_unriplis(a){var f=['+','$','^','*','?'];var r=['ibacorat','ibacordolar','ibacorhalis','ibacorkali','ibacortanya'];$.each(f,function(i,v){a=a.replace(r[i],f[i])});return a}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form action="#">
<input id="yourInput" class="yourClass" type="text" placeholder="Type a text here..." data-prefix="#" />
</form>
You can try this,
HTML
<input type="text" class="txtUrl" />
Javascript
$('.txtContent').keydown(function(e) {
var cur_val = $(this).val();
if(cur_val.length == 0) {
$(this).val('#' + cur_val);
}
});
Here is the working fiddle: http://jsfiddle.net/jMH9b/43/
Hope this helps!
As you stated, if there is already a SLASH it should not do anything. Here is the solution
$('#description').bind('input', function(event){
var currentVal = $(this).val();
$(this).val(currentVal.indexOf('#') !== 0 ? ('#' + currentVal) : currentVal)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label name="description">Enter some text</label>
<input type="text" id="description" name="description">
<input id='e' onKeyup='test(this)' value='#'/>
var input = document.getElementById('e');
function test(e){
input.value = e.value.charAt(0) !== '#' ? input.value = '#' + e.value : e.value
}
hope this helps...
I have some JS functions that looks like :
$('#div1 input[type=radio]').change(function() {
if(this.value=='YES'){
$('#field1').show();
}else{
$('#field1').hide();
}
});
$('#div2 input[type=radio]').change(function() {
if(this.value=='YES'){
$('#field2').show();
}else{
$('#field2').hide();
}
});
$('#div3 input[type=radio]').change(function() {
if(this.value=='YES'){
$('#field3').show();
}else{
$('#field3').hide();
}
});
As they are much similars, there is a way to improve them in less code?
Thanks
The easiest solution is the following. I replaced the if-else hide/show with toggle. I also used === for true type/value comparison.
function changeToggle(inputSelector, fieldSelector, value) {
$(inputSelector).change(function() {
$(fieldSelector).toggle(this.value === value);
});
}
changeToggle('#div1 input[type=radio]', '#field1', 'YES');
changeToggle('#div2 input[type=radio]', '#field2', 'YES');
changeToggle('#div3 input[type=radio]', '#field3', 'YES');
Using a Loop
$("*[id^='div']").each(function(index, div) {
var id = $(div).attr('id').match(/^\w+(\d+)$/)[1];
$(div).find('input[type=radio]').change(function(e) {
$('#field' + id).toggle(this.value === 'YES');
});
});
Try using attribute begins with selector, .closest(), String.prototype.replace() with RegExp /\D/g to match digits in id of closest element where id begins with "div"
$("[id^=div] input[type=radio]").change(function() {
var n = $(this).closest("[id^=div]")[0].id.replace(/\D/g, "");
if (this.value=="YES") {
$("#field" + n).show();
} else {
$("#field" + n).hide();
}
});
Using custom attributes is much better way or if you're in HTML 5 you can use data-attributes. See example below:
<input type="radio" data-show="#field1" />
<input type="text" id="field1" />
<input type="radio" data-show="#field2" />
<input type="text" id="field2" />
<input type="radio" data-show="#field3" />
<input type="text" id="field3" />
JS:
$('input[type=radio]').change(function() {
var targetEl = $(this).data('show');
if($(this).is(':checked')) {
$(targetEl).show();
}else {
$(targetEl).hide();
}
});
<input id="input1" type="text" />
<br />
<input id="input2" type="text" />
I have followed this simple script that stores the focus on the input text.
$(document).ready(function() {
changeFocus();
$("#input1").click(function(){
localStorage.setItem('txtObjectid', "input1");
changeFocus();
return false;
});
$("#input2").click(function(){
localStorage.setItem('txtObjectid', "input2");
changeFocus();
return false;
});
});
function changeFocus(){
if(localStorage.getItem('txtObjectid')==null)
id="input1"
else
id=localStorage.getItem('txtObjectid');
var v = "#" + id;
$(v).focus();
}
What I want to learn/know about is how to make the script flexible? How could I make this so that it won't search of the id = "input1" instead it will search for input[type=text]?
Something like this should do it
$(document).ready(function () {
var id = 'input1';
if (localStorage.getItem('txtObjectid')) {
id = localStorage.getItem('txtObjectid');
}
$('#' + id).focus();
$('input[type="text"]').on('focus', function () {
localStorage.setItem('txtObjectid', this.id);
});
});
FIDDLE