I want to focus next input once the input field reach the maxlength, but the input fields are in different containers.
My Code:
$(document).ready(function(){
$('input').keyup(function(){
if($(this).val().length==$(this).attr("maxlength")){
$(this).next().focus();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="date" class="container_date">
<div class="date_day" id="input_day">
<input type="text" maxlength="2" name="input_day" id="1" value="">
</div>
<div class="date_month" id="input_month">
<input type="text" maxlength="2" name="input_month" id="2" value="">
</div>
<div class="date_year" id="input_year">
<input type="text" maxlength="4" name="input_year" id="3" value="">
</div>
</div>
<div id="time" class="container_time">
<div class="time_hour" id="input_hour">
<input type="text" maxlength="2" name="input_hour" id="1" value="">
</div>
<div class="time_minute" id="input_minute">
<input type="text" maxlength="2" name="input_minute" id="2" value="">
</div>
</div>
The Jquery works for input fields in the same div/container, but not in a different one. How to focus also in another div/container?
You could try to get a list of all related input-fields by traversing the DOM up until a certain parent element and looking for each input, determining the current input element and select the next one.
I would propose a different solution: use the tabindex attribute.
div class="date_day" id="input_day">
<input type="text" maxlength="2" tabindex="1" name="input_day" id="1" value="">
</div>
<div class="date_month" id="input_month">
<input type="text" maxlength="2" tabindex="2" name="input_month" id="2" value="">
</div>
<div class="date_year" id="input_year">
<input type="text" maxlength="4" tabindex="3" name="input_year" id="3" value="">
</div>
With this you can create a non-linear movement in regard to the "next" field. The focus can easily be moved to the next one:
$('input').keyup(function(){
if($(this).val().length==$(this).attr("maxlength")){
var tabIndex = +$(this).attr('tabindex');
$('[tabindex=' + (+tabIndex+1) + ']').focus();
}
});
Get the index of the current input by searching the matched elements $('input').index(this) Then you can select the next input in the matched elements with .eq(i+1)
$(document).ready(function(){
$('input').keyup(function(){
if($(this).val().length==$(this).attr("maxlength")){
var i = $('input').index(this);
$('input').eq(i+1).focus();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="date" class="container_date">
<div class="date_day" id="input_day">
<input type="text" maxlength="2" name="input_day" id="1" value="">
</div>
<div class="date_month" id="input_month">
<input type="text" maxlength="2" name="input_month" id="2" value="">
</div>
<div class="date_year" id="input_year">
<input type="text" maxlength="4" name="input_year" id="3" value="">
</div>
</div>
<div id="time" class="container_time">
<div class="time_hour" id="input_hour">
<input type="text" maxlength="2" name="input_hour" id="1" value="">
</div>
<div class="time_minute" id="input_minute">
<input type="text" maxlength="2" name="input_minute" id="2" value="">
</div>
</div>
Related
I want this input project name and address displayed in the text area.
currently, the input project name and checkbox text can be displayed in the textbox.
ps: I forgot to add checkbox HTML codes in the previous question.
I would appreciate your help.
here is my code:
let existValue = "";
$('input:checkbox').click(function(){
var tb = "#"+$(this).attr('rel');
let text_to_add = this.name + "\n";
let inputVal = $('#pname').val()
//when click a checkbox and show checked items in the text area
if($(this).is(":checked")){
$(tb).val($(tb).val() + text_to_add);
}else{
let remove = this.name +"\n";
//when a box is unchecked it clears the previously populated text from checkbox
$(tb).val($(tb).val().replace(remove,""));
}
//storing the value to existValue
existValue = $(tb).val().replace(`${inputVal}\n`, "");
});
$('#pname').on('input',(e)=>{
//here to adding the input value to the existValue
$('#textbox1').val(`${e.target.value}\n${existValue}`)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name">
<form>
<label for="projectname">Project name:</label>
<input type="text" id="pname" name="pname">
<br>
<div class="form-group">
<label>Project Address:</label>
<input type="text" class="form-control" id="search_input" placeholder="Type address..." />
<input type="hidden" id="loc_lat" />
<input type="hidden" id="loc_long" />
</div>
<div class="latlong-view">
<p><b>Latitude:</b> <span id="latitude_view"></span></p>
<p><b>Longitude:</b> <span id="longitude_view"></span></p>
</div>
</div>
<div class="series1">
<tr><input type="checkbox" rel="textbox1" name="Cabinets" class=test/>
Cabinets
</tr>
<input type="checkbox" rel="textbox1" name="Doors"/>
Doors
<input type="checkbox" rel="textbox1" name="Drawers">
Drawers
<input type="checkbox" rel="textbox1" name="Drawer Fronts">
Drawer Fronts
<input type="checkbox" rel="textbox1" name="Handles">
Handles
</div>
<br>
<textarea id="textbox1" ></textarea>
This should do it:
const inps=$('input[type=text]').on('input',()=>
$('#textbox1').val(inps.get().map(i=>i.value).join("\n"))
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name">
<form>
<label for="projectname">Project name:</label>
<input type="text" id="pname" name="pname">
<br>
<div class="form-group">
<label>Project Address:</label>
<input type="text" class="form-control" id="search_input" placeholder="Type address..." />
<input type="hidden" id="loc_lat" />
<input type="hidden" id="loc_long" />
</div>
<div class="latlong-view">
<p><b>Latitude:</b> <span id="latitude_view"></span></p>
<p><b>Longitude:</b> <span id="longitude_view"></span></p>
</div>
</div>
<textarea id="textbox1"></textarea>
As there are no checkboxes in your current HTML I removed the event handling for these elements and concentrated on the text-inputs. In my snippet I selected the input fields by their type (=text). In a real example you should apply a common class to them and select them through that.
I was trying to create other fields to be unclickable when the first input is focused but it seems it doesn't work. I did an illustration so that it will be understandable and my code looks like this.
May I know where I did it wrong?
$('.form-control').click(function() {
$(this).parent('div').next().children('.form-control').prop('disabled', false);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
<div class="name">
<input class="form-control" type="text" placeholder="name" />
</div>
</div>
<div>
<div class="age">
<input class="form-control" type="text" placeholder="age" disabled="disabled" />
</div>
<div class="city">
<input class="form-control" type="text" placeholder="city" disabled="disabled" />
</div>
</div>
<div class="submit">
<input class="form-control" type="submit" value="Submit" disabled="disabled" />
</div>
</form>
You want something like this:
$('.form-control').click(function() {
$(this).closest('form').find('.form-control:disabled:first').prop('disabled', false);
})
$(this).parent('div') returns something like <div class="name"> and then using .next() will not find anything since it don't have any siblings.
Demo
$('.form-control').click(function() {
$(this).closest('form').find('.form-control:disabled:first').prop('disabled', false);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
<div class="name">
<input class="form-control" type="text" placeholder="name" />
</div>
</div>
<div>
<div class="age">
<input class="form-control" type="text" placeholder="age" disabled="disabled" />
</div>
<div class="city">
<input class="form-control" type="text" placeholder="city" disabled="disabled" />
</div>
</div>
<div class="submit">
<input class="form-control" type="submit" value="Submit" disabled="disabled" />
</div>
</form>
I need to get a DOM container (entire HTML code inside it), inside it has some input texts. When I save this DOM in the database the input values are not there.
I have tried:
$(".container").html()
$(".container").prop('outerHTML')
$(".container").text()
$(".container").get(0).outerHTML
Example:
As it is in the database now:
<div class="container stackExemple">
<input type="text" name="1">
<input type="text" name="2">
<input type="text" name="3">
<input type="text" name="4">
</div>
As i need it to be:
<div class="container stackExemple">
<input type="text" name="1" value="value1">
<input type="text" name="2" value="value2">
<input type="text" name="3" value="value3">
<input type="text" name="4" value="value4">
</div>
You should set the value attribute using .each() and .attr()
$(".container [type=text]").each(function(i){
$(this).attr('value', 'value'+(i+1));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container stackExemple">
<input type="text" name="1">
<input type="text" name="2">
<input type="text" name="3">
<input type="text" name="4">
</div>
How about writing the val() back as a value attribute on demand?
$('#test').on('click',function(){
var $container = $('.container');
$('input',$container).each(function(){
$(this).attr('value',$(this).val());
});
console.log($container.html());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container stackExemple">
<input type="text" name="1">
<input type="text" name="2">
<input type="text" name="3">
<input type="text" name="4">
</div>
<button id="test">Click for html</button>
Updating the html attribute value will update the value of the input, but updating the the value of the input, will not update the html attribute.
The trick is to update the value attribute of the elements before you read the html.
$("#print").on("click", function() {
$("#results").text(JSON.stringify(getContainer(), (key, value) => (!key || !isNaN(key)) ? value : undefined, 4).replace(/\\n/g, "\n").replace(/\\"/g, "'"));
});
function getContainer() {
return $(".container").map(function() {
$("input", this).each(function() {
this.setAttribute("value", this.value);
});
return this.outerHTML;
});
}
#results {
display: block;
white-space: pre;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container stackExemple">
<input type="text" name="1">
<input type="text" name="2">
<input type="text" name="3">
<input type="text" name="4">
</div>
<div class="container stackExemple">
<input type="text" name="5">
<input type="text" name="6">
<input type="text" name="7">
<input type="text" name="8">
</div>
<button id="print">Print</button>
<code id="results"></code>
When below input form is focused, I would like to execute a jQuery function:
var hasFocus = $("input#edit-search-block-form--2").is(':focus');
if (hasFocus) {
alert('It is working!');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post" id="search-block-form" accept-charset="UTF-8">
<div>
<div class="container-inline">
<h2 class="element-invisible">Search form</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<label class="element-invisible" for="edit-search-block-form--2"></label>
<input title="Enter the terms you wish to search for." placeholder=" " id="edit-search-block-form--2" name="search_block_form" value="" size="15" maxlength="128" class="form-text" type="text">
</div>
<div class="form-actions form-wrapper" id="edit-actions">
<input id="edit-submit" name="submit" value="Search" src="search.svg" class="form-submit" style="display: inline-block;" type="image">
</div>
<input name="form_build_id" value="1234567890abc" type="hidden">
<input name="form_id" value="search_block_form" type="hidden">
</div>
</div>
</form>
But I just don't get it to work. Would be glad for every advice.
You need to attach an event handler that keeps checking the focus event on that input element. Your current code executes only once, and at the time of execution the element does seemingly not have focus.
$(document).ready(function() {
$("input#edit-search-block-form--2").on('focus', function() {
alert('It is working!');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post" id="search-block-form" accept-charset="UTF-8">
<div>
<div class="container-inline">
<h2 class="element-invisible">Search form</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<label class="element-invisible" for="edit-search-block-form--2"></label>
<input title="Enter the terms you wish to search for." placeholder=" " id="edit-search-block-form--2" name="search_block_form" value="" size="15" maxlength="128" class="form-text" type="text">
</div>
<div class="form-actions form-wrapper" id="edit-actions">
<input id="edit-submit" name="submit" value="Search" src="search.svg" class="form-submit" style="display: inline-block;" type="image">
</div>
<input name="form_build_id" value="1234567890abc" type="hidden">
<input name="form_id" value="search_block_form" type="hidden">
</div>
</div>
</form>
Please check the updated code below.
Run the focused function onfocus of the element.
I am then focusing on the submit button, otherwise everytime you close the alert, the focus will be placed on the input box again, and it will go into an infinite loop.
function focused(){
alert('It is working!');
$('#edit-submit').focus();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post" id="search-block-form" accept-charset="UTF-8">
<div>
<div class="container-inline">
<h2 class="element-invisible">Search form</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<label class="element-invisible" for="edit-search-block-form--2"></label>
<input title="Enter the terms you wish to search for." placeholder=" " id="edit-search-block-form--2" onfocus="focused()" name="search_block_form" value="" size="15" maxlength="128" class="form-text" type="text">
</div>
<div class="form-actions form-wrapper" id="edit-actions">
<input id="edit-submit" name="submit" value="Search" src="search.svg" class="form-submit" style="display: inline-block;" type="image">
</div>
<input name="form_build_id" value="1234567890abc" type="hidden">
<input name="form_id" value="search_block_form" type="hidden">
</div>
</div>
</form>
I have multiple product div with buttons having same onlick function.I want to get the values of the input fields on click of button.Both, input fields and button belong to same div.Currently i am getting values of very 1st product onclick of any button.Please help
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$15.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp" id="itemqty" value="1">
<input type="hidden" name="prod_id" id="prod_id" value="150">
<input type="hidden" name="code" id="code" value="151PM">
<input type="button" value="" onclick="promoproduct(this.id)" id="promo_button_1">
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp" id="itemqty" value="1">
<input type="hidden" name="prod_id" id="prod_id" value="151">
<input type="hidden" name="code" id="code" value="152PM">
<input type="button" value="" onclick="promoproduct(this.id)" id="promo_button_2">
function promoproduct(clicked_id){
var qty = $("#itemqty").val();
var prod_id = $("#prod_idprod_id").val();
var code = $("#code").val();
Identifiers must be unique.
You should pass the current element content this to inline click event handler. You can use common class and various traversal methods to target elements.
<input type="button" value="" onclick="promoproduct(this)" id="promo_button_2">
Then use relationship to target parent buy using .parent()/.closest() afterward using .find()
function promoproduct(clickedElem){
var parent = $(clickedElem).closest(".buy");
var qty = parent.find('.quantity-wrp').val();
var prod_id = parent.find('[name="prod_id"]').val();
var code = parent.find('name="code"').val();
}
As you have both buttons in different divs you can use the parent as reference to get the values from input.
Also when calling function you need to pass this not this.id
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$15.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp" id="itemqty" value="1">
<input type="hidden" name="prod_id" id="prod_id" value="150">
<input type="hidden" name="code" id="code" value="151PM">
<input type="button" value="" onclick="promoproduct(this)" id="promo_button_1">
</div>
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp" id="Hidden1" value="1">
<input type="hidden" name="prod_id" id="Hidden2" value="151">
<input type="hidden" name="code" id="Hidden3" value="152PM">
<input type="button" value="" onclick="promoproduct(this)" id="promo_button_2">
</div>
<script>
function promoproduct(clicked_id) {
var parent = $(clicked_id).closest("div.buy");
var qty = $(parent).find("input[name=qty]").val();
var prod_id = $(parent).find("input[name=prod_id]").val();
var code = $(parent).find("input[name=code]").val();
}
</script>
First, the id attribute should be unique in the same document, so you could use the general classes instead :
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp itemqty" value="1">
<input type="hidden" name="prod_id" class="prod_id" value="151">
<input type="hidden" name="code" class="code" value="152PM">
<input type="button" value="" onclick="promoproduct()" id="promo_button_2">
</div>
NOTE : No need to pass a parameter to the click function promoproduct(this) just pass this so you could get the current clicked element using this object inside your function.
You could use the closest() method to go up to the parent div buy then get the values :
function promoproduct(clicked_id){
var parent_buy = $(this).closest(".buy");
var qty = parent_buy.find('.quantity-wrp').val();
var prod_id = parent_buy.find('.prod_id').val();
var code = parent_buy.find('.code').val();
}
Hope this helps.
Snippet avoiding the use of the inline-event onclick :
$('.buy input:button').on('click',function(){
var parent_buy = $(this).closest(".buy");
var qty = parent_buy.find('.quantity-wrp').val();
var prod_id = parent_buy.find('.prod_id').val();
var code = parent_buy.find('.code').val();
console.log(qty,prod_id,code);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp itemqty" value="1">
<input type="hidden" name="prod_id" class="prod_id" value="151">
<input type="hidden" name="code" class="code" value="152PM">
<input type="button" value="Promo product" id="promo_button_1">
</div>
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp itemqty" value="2">
<input type="hidden" name="prod_id" class="prod_id" value="252">
<input type="hidden" name="code" class="code" value="255PM">
<input type="button" value="Promo product" id="promo_button_2">
</div>