I have two input inside same div and need to change the value of one when I write in another one:
Note: I need to use this because I have same div with same class and id.
My Code:
function customInput() {
let customContent = event.target.value;
let customInput = this.parents('.1');
$(customInput .a1 .b1).val(customContent);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="" onkeyup="customInput()">
</div>
</div>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="" onkeyup="customInput()">
</div>
</div>
To refer the current element in the function you can pass this to the function.
You can try with .closest() and .find()
function customInput(el) {
$(el).closest('.1').find('.b1').val(el.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="" onkeyup="customInput(this)">
</div>
</div>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="" onkeyup="customInput(this)">
</div>
</div>
Though I prefer using .on() to attach the event (not using the inline event handler) along with input event:
$('.b2').on('input', function() {
$(this).closest('.1').find('.b1').val(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="">
</div>
</div>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="">
</div>
</div>
You are kinda mixing plain javascript with jQuery. Altough this works fine, I think it's better to stick to one as much as possible for readability so I changed all your code to jQuery.
Instead of inline event binding I used jQuery event binding. I recommend to avoid inline binding because it easier to maintain and you can bind multiple handlers to one event or toggle them with the jQuery off() method.
Also changed the keyup event to an input event because that also works on for example copy pasting, you could stick to the keyup event if you don't want that of course.
With the jQuery closest() function you can find the first matching parent.
With the jQuery find() function you can find the matching children.
You can beautify your code a bit to use jQuery chaining if you like. So my commented one liner.
With the find function you can find elements within the parent.
$('.b2').on('input', function() {
let $this = $(this);
let customContent = $this.val();
let $customInput = $this.closest('.1');
$($customInput).find('.a1 .b1').val(customContent);
//One liner that does the same.
//$(this).closest('.1').find('.b1').val($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="">
</div>
</div>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="">
</div>
</div>
Related
Got a 3 selection radio button options and also a number field, in case somebody wants to select more than radio buttons can offer. And i'm trying to pass a radio button value to the number field when radio value is changed.
Here is my html code for it
<!-- this is main add to cart form -->
<form>
<!-- and this is secondary form for radio buttons, so, only one could be selected -->
<form class="quanform">
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio1" value="1" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio2" value="2" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio3" value="3" name="quanline" />
</div>
</div>
</div>
</form>
<div class="newquanfield tablecell almiddle">
<input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="2" />
</div>
</form>
And this is my jquery code for it
$("form.quanform .pricelinewrap .priceline .pricelinecellval input[type=radio]").each(function(){
$(this).click(function(){
var quanval = $(this).val();
$(this).parents().find(".newquanfield input[type=number]").val(quanval);
});
});
Nothing happens and there are no errors in the console
The problem lies purely in your selector:
$("form.quanform) won't work, as your <form class="quanform"> is wrapped inside another <form>, which is invalid markup; <form> cannot be nested inside another <form>.
Because the 'desired' markup is invalid, it actually never gets added to the DOM. You can confirm this by viewing the source yourself with CTRL + U - <form class="quanform"> doesn't exist. Thus, you cannot target it with jQuery.
You can validate your markup with the W3 Validation service to ensure that your HTML is indeed valid, ensuring that your jQuery selectors work the way you expect.
As for your current structure, you can omit the .quanform component, and simply use $("form .pricelinewrap .priceline .pricelinecellval input[type=radio]"), which will work based off of the outer <form> element (which does indeed exist in the DOM).
This can be seen working in the following example:
$("form .pricelinewrap .priceline .pricelinecellval input[type=radio]").each(function() {
$(this).click(function() {
var quanval = $(this).val();
$(this).parents().find(".newquanfield input[type=number]").val(quanval);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- this is main add to cart form -->
<form>
<!-- and this is secondary form for radio buttons, so, only one could be selected -->
<form class="quanform">
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio1" value="1" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio2" value="2" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio3" value="3" name="quanline" />
</div>
</div>
</div>
</form>
<div class="newquanfield tablecell almiddle">
<input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="2" />
</div>
</form>
Hope this helps! :)
$(document).ready(function() {
$('form').submit(function() {
var principle = $("#principle").val();
var rate = $("#rate").val();
var time = $("#time").val();
var interest = principle * rate * time / 100;
interest = $("p").append(interest);
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="table commonTable">
<div class="row">
<div class="cell">
<label for="P">Principal (P): $</label>
</div>
<div class="cell">
<input name="P" id="principle" value="10,000.00" class="nmbr_real real" type="text" title="positive real number" placeholder="amount" required="" />
</div>
</div>
<div class="row">
<div class="cell">
<label for="R">Rate (R): %<br />
<span class="note small">per year</span></label
>
</div>
<div class="cell">
<input
name="R"
id="rate"
value="3.875"
class="nmbr_real real"
type="text"
title="positive real number"
placeholder="rate"
required=""
/>
</div>
</div>
<div class="row">
<div class="cell">
<label for="t">Time (t):</label>
</div>
<div class="cell">
<input name="t" id="time" value="5" class="nmbr_real real" type="text" title="0 or positive real number" placeholder="#" required="" />
</div>
</div>
</div>
<button>Calculate</button>
</form>
just create inputbox
<input type="text" id="abc" name="price" value="" />
and use below code for insert value in inputbox
jQuery(document).ready(function($) {
$("#abc").val('100');
});
If you want to get the output in input box the use val() function.
$("input").val(interest);
If you want to get the output in HTML element the use html() function.
$("p").html(interest);
For setting a value in textbox use val()
$('#abc').val('13');
For setting a value in 'p' use text()
<p id='p_Id'></p>
$('#p_Id').text('13');
When user clicks on "edit" how can I find closest row_form and remove it with jquery?
Here is what I tried so far jsfiddle
HTML
<div id="settings_wrapper">
<h1>General settings</h1>
<div class="settings_row">
<span class="row_name">Name</span>
<div class="row_edit"><p class="row_edit_button">Edit</p></div>
<div class="row_form">
<form action="this.php"><span>New name:</span><input type="text" /><input type="submit" value="Save"><span>New name:</span><input type="text" /></form>
</div>
</div>
<div class="settings_row">
<span class="row_name">Name</span>
<div class="row_edit"><p class="row_edit_button">Edit</p></div>
<div class="row_form">
<form action="this.php"><span>New name:</span><input type="text" /><input type="submit" value="Save"><span>New name:</span><input type="text" /></form>
</div>
</div>
</div>
JQUERY
$(document).ready(function(){
$(".row_edit_button").click(function(){
$(this).closest(".row_form").remove();
});
});
The target element is the next sibling of the parentNode of the clicked element. closest selects the closest matching parent element. One option is:
$(".row_edit_button").click(function() {
$(this.parentNode).siblings(".row_form").remove();
});
Other options are:
$(this).parent().next(".row_form").remove();
$(this).closest('.settings_row').find(".row_form").remove();
I am using this code inside $(document).ready(function(){ ... }):
$('#flavours').on('click', '.toggle-quantity', function(e){
e.preventDefault();
var $quantity_percent = $(this).parent().find('.quantity_percent');
if($quantity_percent.is(':hidden')){
console.log("is hidden");
$quantity_percent.show();
}else{
console.log("is not hidden");
$quantity_percent.hide();
}
});
What's happening is the console.log() is working, but the $quantity_percent is not showing/hiding.
Additionally, if I add an alert('test') to the beginning of the function (just after e.preventDefault) this also doesn't work, but the console.log() continues to work (it correctly logs 'is not hidden').
EDIT: Relevant HTML markup:
<div id="flavours">
<div class="row flavour" id="flavour_1" style="display: block;">
<div class="form-group">
<div class="col-xs-12">
<fieldset>
<legend>Flavour 1</legend>
<div class="col-sm-4">
<label>Flavour Name</label>
<input type="text" value="" name="flavour_name[]" data-flavour-id="1" id="flavour_name_1" class="form-control autocomp" placeholder="Flavour name">
<input type="hidden" value="" name="flavour_id[]" id="flavour_id_1" class="form-control flavour_id">
<p class="flavour_info"></p>
</div>
<div class="col-sm-6">
<label>Flavour Quantity <span class="fa fa-filter"></span> <span class="hidden-sm">Switch to </span>drops per ml</label>
<div class="input-group" id="quantity_percent">
<input type="text" class="form-control" id="flavour_percentage_1" name="flavour_percentage[]" placeholder="Flavour Quantity">
<span class="input-group-addon">%</span>
</div>
<div class="input-group" id="quantity_drops" style="display: none;">
<input type="text" class="form-control" id="flavour_drops_1" name="flavour_drops[]" placeholder="Flavour Quantity">
<span class="input-group-addon">drops/ml</span>
</div>
<p class="flavour_recommended_percentage"></p>
</div>
<div class="col-sm-2">
<label> </label>
<button class="btn btn-danger btn-block remove-flavour"><span class="glyphicon glyphicon-remove"></span> Remove</button>
</div>
</fieldset>
</div>
</div>
</div>
$(this).parent() is a label element which doesn't have a child with .quantity_percent
Also quantity_percent is an id and not a class. Use the ID selector
So use
var $quantity_percent = $('#quantity_percent');
instead of
var $quantity_percent = $(this).parent().find('.quantity_percent');
Note: IDs must be unique in HTML
EDIT: as per OPs comments
I updated it to a class rather than ID (as it's on a dynamically growing list)
Usage
var $quantity_percent = $(this).closest('.col-sm-6').find('.quantity_percent');
The .parent() targets the <label> therefore it can't find .quantity_percent
I have the following pattern of div id's defined in my code. Please take a look at it:
<div id="wideWrapper">
<div id="divContentFrame">
<div class="ContentContainer">
<cfform id="someid" action="" method="post">
<input class="noDisplay" name="token" id="sCsrfToken" value="" type="hidden">
<div id="messageInfoWrap">
<div class="messageInfo">
<div class="messageInfoFields ">
<div class="field required">
<label for="subject">From Address:<span class="indicator">*</span></label>
<input name="inpKey" id="inpKey" value="" type="text">
</div>
and so on....
</div> // for messageInfoWrap
<div class="messageInfoFields referenceName">
<div class="field required">
<label for="refname">Function Name:</label>
<input name="sRefName" id="inputDescription" type="text">
<span class="border"></span>
<span class="arrow right"></span>
</div>
</div>
In jquery function call, I am trying to access the content of From Address field in the following manner:
$("#divContentFrame #inppKey").val(d.DATA.CURRinpkey[0]);
But it's not picking up the content. Am I doing something wrong here?
Because the same thing when I am doing for another form field like:
$("#divContentFrame #inputDescription").val() it's working fine.
$("#divContentFrame #inpKey").val();
not
$("#divContentFrame #inpKey").val;
I haven't found any issue other than the missing closing tag for input.
Here your code just works fine.
<div id="wideWrapper">
<div id="divContentFrame">
<div class="ContentContainer">
<div id="messageInfoWrap">
<div class="messageInfo">
<div class="messageInfoFields ">
<div class="field required">
<input name="inpKey" id="inpKey" value="" type="text"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
$("#divContentFrame #inpKey").val('test');
And isn't d.DATA.CURRinpkey[0] an object?!
The use of two selectors here is unecessary and adds unecessary overhead. You also misspelled inpKey as inppKey. Use
$("#inpKey").val()
instead.