Jquery: Best way to pop-up a selection div - javascript

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" />

Related

How can I set the value of an input the same as the value of the radio selected?

var value = $(".radioc").attr("value");
$("input[name=user-type]").change(function() {
$(".input-txt-choose").val(value).toggle(this.value === value);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" class="radioc" name="user-type" value="Brand">Brand
<input type="radio" class="radioc" name="user-type" value="Store">Store
<input type="text" class="input-txt-choose" value="">
Show the value (.radioc) in the input (.input-txt-choose), when I select the radio (.radioc)
When I select the option "Store", input (.input-txt-choose) hides.
this is my fiddle
$("input[name=user-type]").change(function(){
$(".input-txt-choose").val($(this).val());
})
The input will disappear because the function .toggle() is used to hide/show an element by jquery.
jquery toggle
You are getting the radio hide because of the toggle implemented, so please use the below code this will solve your purpose.
$(document).on("click", ".radioc", function () {
$(".input-txt-choose").val($('.radioc:checked').val());
})

How to change label text using jquery

This is div tag
<div>
<label>some text 1</label>
<label>another text 1</label>
</div>
<button>button</button>
Whenever I click on the button, I will add the div tag. when the next div tag is added, it should change the digit in the label text.
For example: In the first div, it should be 1 and in the next div it should be 2.
I am getting the label text using
var labelValue = $('div').find('label').map(function() {
return $(this).text().replace(/\d/,2);
}).get();
What I want is to change digit in the label text to 2.
I am getting the value but the label value is not getting changed in the html.
How to get the updated label value?
Sorry if there are any mistakes
You can try this:
$('button').on('click', function(e) {
$('div:eq(0)').clone().insertAfter('div:last').find('label').filter(function(e) {
$(this).text($(this).text().replace(/\d/, $("div").length));
});
})
Fiddle Link
maybe that one you want DEMO
<div id="show_divz">
<div id="div_1">
<label>some text 1</label>
<label>another text 1</label>
</div>
</div>
<button>button</button>
in js
$(document).on('click','button',function(){
var getId = $(this).prev().find('div').last().attr('id');
getId = getId.split('_');
$("#show_divz").append('<div id="div_'+(parseInt(getId[1])+1)+'"><label>some text '+(parseInt(getId[1])+1)+'</label><label>another text '+(parseInt(getId[1])+1)+'</label> </div>');
});
Something like this:
$('div').find('label').each(function(){
$(this).text($(this).text().replace(/\d/,2));
});
make id for button and trigger the click event to achive it..
try this..
<div>
<label>some text 1</label>
<label>another text 1</label>
</div>
<button id="btn">button</button>
<script>
$('#btn').click(function(){
$('div').find('label').each(function(){
$(this).text($(this).text().replace(/\d/,2));
}); }); </script>
here is the fiddle.. http://jsfiddle.net/Sarathv15/0jbq7em3/
Hope this will be a help,
var count = 0;
$("#btn").click(function() {
count++;
$("#lbl").html(count);
}
</script>
<div><label id="lbl">1</label></div>
<button id="btn" type="button">Button</button>
Since you want to replace the HTML here use
$(this).html("new value");

remove parent div if the input value is empty and show parent div if the input value is not empty?

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

Keyup function for editable div

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/

trouble with jquery and traversing the DOM to select the appropriate elements

Hello guys i have the below html for a number of products on my website,
it displays a line with product title, price, qty wanted and a checkbox called buy.
qty input is disabled at the moment.
So what i want to do is,
if the checkbox is clicked i want the input qty to set to 1 and i want it to become enabled.
I seem to be having some trouble doing this. Could any one help
Now i can have multiple product i.e there will be multiple table-products divs within my html page.
i have tried using jQuery to change the details but i dont seem to be able to get access to certain elements.
so basically for each table-product i would like to put a click listener on the check box that will set the value of the input-text i.e qty text field.
so of the below there could be 20 on a page.
<div class="table-products">
<div class="table-top-title">
My Spelling Workbook F
</div>
<div class="table-top-price">
<div class="price-box">
<span class="regular-price" id="product-price-1"><span class="price">€6.95</span></span>
</div>
</div>
<div class="table-top-qty">
<fieldset class="add-to-cart-box">
<input type="hidden" name="products[]" value="1"> <legend>Add Items to Cart</legend> <span class="qty-box"><label for="qty1">Qty:</label> <input name="qty1" disabled="disabled" value="0" type="text" class="input-text qty" id="qty1" maxlength="12"></span>
</fieldset>
</div>
<div class="table-top-details">
<input type="checkbox" name="buyMe" value="buy" class="add-checkbox">
</div>
<div style="clear:both;"></div>
</div>
here is the javascript i have tried
jQuery(document).ready(function() {
console.log('hello');
var thischeck;
jQuery(".table-products").ready(function(e) {
//var catTable = jQuery(this);
var qtyInput = jQuery(this).children('.input-text');
jQuery('.add-checkbox').click(function() {
console.log(jQuery(this).html());
thischeck = jQuery(this);
if (thischeck.is(':checked'))
{
jQuery(qtyInput).first().val('1');
jQuery(qtyInput).first().prop('disabled', false);
} else {
}
});
});
// Handler for .ready() called.
});
Not the most direct method, but this should work.
jQuery(document).ready(function() {
jQuery('.add-checkbox').on('click', function() {
jQuery(this)
.parents('.table-products')
.find('input.input-text')
.val('1')
.removeAttr('disabled');
});
});
use
jQuery('.add-checkbox').change(function() {
the problem is one the one hand that you observe click and not change, so use change rather as it really triggers after the state change
var qtyInput = jQuery(this).children('.input-text');
another thing is that the input is no direct child of .table-products
see this fiddle
jQuery('input:checkbox.add-checkbox').on('change', function() {
jQuery(this)
.parent()
.prev('div.table-top-qty')
.find('fieldset input:disabled.qty')
.val(this.checked | 0)
.attr('disabled', !this.checked);
});
This should get you started in the right direction. Based on jQuery 1.7.2 (I saw your prop call and am guessing that's what you're using).
$(document).ready(function() {
var thischeck;
$('.table-products').on('click', '.add-checkbox', function() {
var qtyInput = $(this).parents('.table-products').find('.input-text');
thischeck = $(this);
if (thischeck.prop('checked')) {
$(qtyInput).val('1').prop('disabled', false);
} else {
$(qtyInput).val('0').prop('disabled', true);
}
});
});
Removing the property for some reason tends to prevent it from being re-added. This works with multiple tables. For your conflict, just replace the $'s with jQuery.
Here's the fiddle: http://jsfiddle.net/KqtS7/5/

Categories