Show certain element by clicking anchor - javascript

How do I show only one input at a time?
For example, if user clicks anchor #3, he sees input with content "1".
My guess was something like this:
$(".unit a").click(function() {
$(this).toggleClass("active");
$('input').toggle(); // ??
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='amount amount-piece'>
<input type="text" name="amount2" id="amount2" value="7" data-rate="7" readonly="readonly" />
</div>
<div class='amount amount-square'>
<input data-rate="1.25" readonly="readonly" type="text" value="1.25" name="basket[amount]" id="basket_amount" />
</div>
<div class='amount amount-box'>
<input type="text" name="amount3" id="amount3" value="1" data-rate="1" readonly="readonly" />
</div>
<div class='unit'>
#1
#2
#3
</div>
However it's not working.
https://jsfiddle.net/jjrLgpjp/

To achieve this you need to hide() all the input before showing the one related to the clicked <a> element. You can match them up by their index(), using eq(). Try this:
$(".unit a").click(function() {
var index = $(this).toggleClass("active").index();
$('input').hide().eq(index).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="amount amount-piece">
<input type="text" name="amount2" id="amount2" value="7" data-rate="7" readonly="readonly" />
</div>
<div class="amount amount-square">
<input type="text" name="basket[amount]" id="basket_amount" value="1.25" data-rate="1.25" readonly="readonly" />
</div>
<div class="amount amount-box">
<input type="text" name="amount3" id="amount3" value="1" data-rate="1" readonly="readonly" />
</div>
<div class="unit">
#1
#2
#3
</div>

You can do it by adding a attribute (for Eg: for="#one") to your inputs as per the anchor ID and then later select accordingly
$( ".unit a" ).click(function() {
$( this ).toggleClass( "active" );
// $('input').toggle(); // ??
$('input').hide();
$('input[for="#'+ $( this ).attr('id')+'"]').show();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='amount amount-piece'>
<input type="text" name="amount2" id="amount2" for ="#one" value="7" data-rate="7" readonly="readonly" />
</div>
<div class='amount amount-square'>
<input data-rate="1.25" readonly="readonly" type="text" for ="#sec" value="1.25" name="basket[amount]" id="basket_amount" style ="display:none;" />
</div>
<div class='amount amount-box'>
<input type="text" name="amount3" id="amount3" for ="#thd" value="1" data-rate="1" readonly="readonly" style ="display:none;"/>
</div>
<div class='unit'>
#1
#2
#3
</div>

Another alternative, you can use data attribute:
$( ".unit a" ).click(function(e) {
e.preventDefault();
$(this).toggleClass( "active" );
$('.'+$(this).data("target")).show().siblings().not($(this).parent()).hide();
});
.amount:not(:first-child){
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class='amount amount-piece'>
<input type="text" name="amount2" id="amount2" value="7" data-rate="7" readonly="readonly" />
</div>
<div class='amount amount-square'>
<input data-rate="1.25" readonly="readonly" type="text" value="1.25" name="basket[amount]" id="basket_amount" />
</div>
<div class='amount amount-box'>
<input type="text" name="amount3" id="amount3" value="1" data-rate="1" readonly="readonly" />
</div>
<div class='unit'>
<a data-target="amount-piece" href="#">#1</a>
<a data-target="amount-square" href="#">#2</a>
<a data-target="amount-box" href="#">#3</a>
</div>

Related

Delete all input element inside form jQuery

How to delete all kind of input field inside a form when clicking a href element?
<script type="text/javascript">
$('.delete-link').on('click', function() {
//remove all input inside #form-delete
});
</script>
<form id="form-delete" action="/post>" method="post">
<input type="text" name="test1" value="">
<textarea name="test2" rows="8" cols="80">TEST</textarea>
<input type="checkbox" name="test3" value="">
<input type="number" name="test4" value="">
<input type="password" name="test5" value="">
<input type="email" name="test5" value="">
</form>
<a href="#" class="delete-link">
<span>Remove All input</span>
</a>
To delete all input tags values (clear the input text)
//when the Document Loads, add event to clears all input fields
$(document).ready(function() {
$('.delete-link').on('click', function() {
$('input').val('');
});
});
Try it
http://jsfiddle.net/9q6jywmg/
To actually remove the element itself
//Document Loads, add event to remove all input tagged elements
$(document).ready(function() {
$('.delete-link').on('click', function() {
$('input').remove();
});
});
Try it
http://jsfiddle.net/hym5kde7/
Of course to remove textarea element, do the same by selecting textarea tagged elements also, like this
$('textarea').remove();
Just do this
document.getElementById('your_id').remove(); //also add ids to your input fields
Try it here!
http://jsfiddle.net/4WGRP/
<form id="form-delete" action="/post>" method="post">
<input type="text" name="test1" value="">
<textarea name="test2" rows="8" cols="80">TEST</textarea>
<input type="checkbox" name="test3" value="">
<input type="number" name="test4" value="">
<input type="password" name="test5" value="">
<input type="email" name="test5" value="">
</form>
<a href="#" class="delete-link">
<span>Remove All input</span>
</a>
<script type="text/javascript">
$('.delete-link').on('click', function() {
//remove elements
// $('#form-delete').children('input').remove();
//remove values
$('#form-delete').children('input').val('')
});
</script>
$(document).ready(function() {
$('.delete-link').on('click', function() {
$('#form-delete [my-input]').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form-delete" action="/post>" method="post">
<input type="text" my-input='' name="test1" value="">
<textarea my-input='' name="test2" rows="8" cols="80">TEST</textarea>
<input my-input='' type="checkbox" name="test3" value="">
<input my-input='' type="number" name="test4" value="">
<input my-input='' type="password" name="test5" value="">
<input my-input='' type="email" name="test5" value="">
</form>
<button href="#" class="delete-link">
<span>Remove All input</span>
</button>
Use the remove() method:
$(function(){
$('.delete-link').on('click', function() {
$("#form-delete").find("input").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="form-delete" action="/post" method="post">
<input type="text" name="test1" value="">
<textarea name="test2" rows="8" cols="80">TEST</textarea>
<input type="checkbox" name="test3" value="">
<input type="number" name="test4" value="">
<input type="password" name="test5" value="">
<input type="email" name="test5" value="">
</form>
<a href="#" class="delete-link">
<span>Remove All input</span>
</a>

How to rename each jQuery cloned div's child elements id dynamically

I just cloned one div using jQuery clone, how can I rename each div elements id, and value after cloning, below is my code,
jQuery(function(){
jQuery('#act').click(function(){
jQuery("#test").clone(true, true).insertAfter("div#test:last");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="test">
<input type="hidden" name="product" value="<?php /* #escapeNotVerified */ echo $_product->getId() ?>" />
<input type="hidden" name="selected_configurable_option" value="" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
<label class="label" for=""</label>
<div class="control">
<select name="super_attribute" id="attribute" class="super-attribute-select">
<option value="1">1</option>
</select>
</div>
<label class="label" for="qty"><span>Qty</span></label>
<div class="control">
<input type="number" name="qty" id="qty1" maxlength="12" value="1" title="Qty" class="input-text qty" data-validate="">
</div>
</div>
<div class="actions">
<button type="submit"
title=""
class="action primary tocart"
id="act">
<span>Add new item</span>
</button>
</div>
jQuery(function(){
var len = 0;
jQuery('#act').click(function(){
jQuery("#test").clone(true, true).insertAfter("div#test:last");
$('div#test:last').attr('id', 'test'+len);
//set name for select box
$('div#test'+len+' select').attr('name', 'super_attribute'+len);
len++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="test">
<input type="hidden" name="product" value="<?php /* #escapeNotVerified */ echo $_product->getId() ?>" />
<input type="hidden" name="selected_configurable_option" value="" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
<label class="label" for=""</label>
<div class="control">
<select name="super_attribute" id="attribute" class="super-attribute-select">
<option value="1">1</option>
</select>
</div>
<label class="label" for="qty"><span>Qty</span></label>
<div class="control">
<input type="number" name="qty" id="qty1" maxlength="12" value="1" title="Qty" class="input-text qty" data-validate="">
</div>
</div>
<div class="actions">
<button type="submit"
title=""
class="action primary tocart"
id="act">
<span>Add new item</span>
</button>
</div>
Generate some unique random numbers and append it to your id using .attr() method
jQuery(function() {
jQuery('#act').click(function() {
var randomnumber = Math.ceil(Math.random() * 100)
var el = jQuery("#test").clone(true, true).insertAfter("div#test:last").attr('id', 'test' + randomnumber);
console.log('id = ' + el.attr('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="test">
<input type="hidden" name="product" value="<?php /* #escapeNotVerified */ echo $_product->getId() ?>" />
<input type="hidden" name="selected_configurable_option" value="" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
<label class="label" for=""</label>
<div class="control">
<select name="super_attribute" id="attribute" class="super-attribute-select">
<option value="1">1</option>
</select>
</div>
<label class="label" for="qty"><span>Qty</span></label>
<div class="control">
<input type="number" name="qty" id="qty1" maxlength="12" value="1" title="Qty" class="input-text qty" data-validate="">
</div>
</div>
<div class="actions">
<button type="submit"
title=""
class="action primary tocart"
id="act">
<span>Add new item</span>
</button>
</div>
If you want to change just the new elements, apply map (from the top of my head, untested);
jQuery(".test").clone(true, true).map(function(el, index) {
return jQuery(el).attr("id", "test-" + index);
}).insertAfter("div.test:last");
Also, selecting multiple elements by ID (#test), will probably not work, and it's not allowed according to the spec to have multiple elements on a single page with the same ID. So that's why I used a class selector in my code above.

Show/Hide divs based on radio button selection

I've gotten as far as showing a certain div based on the selection of "150" and "3m" but I can't get the div to hide if both of those aren't selected?
Code below:
$(document).ready(function() {
$('input[value="100"], input[value="3m"]').change(function() {
if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) {
$('div').show();
} else {
$('div').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount" type="radio" name="amount" value="100" />
<label>150</label>
<input class="amount" type="radio" name="amount" value="150" />
<br>
<br>
<label>3</label>
<input class="month" type="radio" name="month" value="3m" />
<label>6</label>
<input class="month" type="radio" name="month" value="6m" />
<div style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>
Currently you're only updating the visibility of the div elements when the 100 or 3m radio button is changed - you want to update the visibility of the div elements on any radio button change by changing your selector:
$('input[value="100"], input[value="3m"]')
to
$('input')
$(document).ready(function() {
$('input').change(function() {
if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) {
$('div').show();
}
else {
$('div').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount" type="radio" name="amount" value="100" />
<label>150</label>
<input class="amount" type="radio" name="amount" value="150" />
<br><br>
<label>3</label>
<input class="month" type="radio" name="month" value="3m" />
<label>6</label>
<input class="month" type="radio" name="month" value="6m" />
<div style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>
For radio buttons, the change event is only triggered when the button gets checked, not when it gets unchecked.
A possible solution is to bind the change event to all (involved) inputs.
$(document).ready(function() {
$('input').change(function() {
if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) {
$('div').show();
}
else {
$('div').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount" type="radio" name="amount" value="100" />
<label>150</label>
<input class="amount" type="radio" name="amount" value="150" />
<br><br>
<label>3</label>
<input class="month" type="radio" name="month" value="3m" />
<label>6</label>
<input class="month" type="radio" name="month" value="6m" />
<div style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>
I would do it like the following using the filter function and the :checked selector:
// wrap in closure
$(function() {
// store these in variables for better performance
var month = $('.month'),
amount = $('.amount'),
toggleDiv = $('#toggle-div'); // give top level div to show an id rather than toggling all divs
// use common class on radios you want to bind the event to
$('.radio').on('change', function() {
if (amount.filter(':checked').val() == 100 && month.filter(':checked').val() === "3m") {
toggleDiv.show();
} else {
toggleDiv.hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount radio" type="radio" name="amount" value="100" />
<label>150</label>
<input class="amount radio" type="radio" name="amount" value="150" />
<br>
<br>
<label>3</label>
<input class="month radio" type="radio" name="month" value="3m" />
<label>6</label>
<input class="month radio" type="radio" name="month" value="6m" />
<div id="toggle-div" style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>
You need to put all the radio buttons id or name to do the functionality
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount" type="radio" name="amount" value="100" id="100rad"/>
<label>150</label>
<input class="amount" type="radio" id="150rad"name="amount" value="150" />
<br><br>
<label>3</label>
<input class="month" type="radio" id="3mrad" name="month" value="3m" />
<label>6</label>
<input class="month" type="radio" name="month" id="6mrad" value="6m" />
<div style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>
js
$(document).ready(function() {
$('#3mrad, #150rad,#100rad,#6mrad').change(function() {
if ($('#150rad').is(':checked') && $('#3mrad').is(':checked')) {
$('div').show();
}
else {
$('div').hide();
}
});
});
check the fiddle and let me know that it is what you required or not
Fiddle
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='gender']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
if(radioValue=='male'){
$("#divMale").show();
$("#divFemale").hide();
}
else{
$("#divMale").hide();
$("#divFemale").show();
}
});
Use the following javascript code instead. . .set change listener on input[name="month"], input[name="amount"]
$(document).ready(function() {
$('input[name="month"], input[name="amount"]').change(function() {
console.log("haha")
if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) {
$('div').show();
}
else {
$('div').hide();
}
});
});
If you are using bootstrap css, you can even make the code much more portable.
$(document).ready(function () {
$('input.rbtoggle').change(function () {
$('div.dvtoggle').toggleClass('d-none');
});
});
where 'rbtoggle' is just a class your radio buttons share, while 'dvtoggle' is a class the div to show or hide uses.
If you want the div hidden initially, add the class 'd-none' to it. E.g
<div class'dvtoggle d-none'>
<!-- other html goes here -->
</div>

Inactivate Input Text by Selecting Radio Button

If I select laptop radio button, the input text for computer should be not be enable to add any data and the the background should be grey instead of white.
Same logic if you select computer radio button and this time it would laptop.
I do not know how to create it.
Thanks!
<!DOCTYPE html>
<html>
<body>
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="device" value="laptop" checked>
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input type="text" value="" />
</span>
</BR>
<input id="computer" type="radio" name="device" value="computer">
<span class="radio-choice-name">
<label for="computer">computer</label>
<input type="text" value=""" />
</span>
</div>
</form>
</body>
</html>
give id's to the input's and then on selected radio buton disable the other input id for computer and enable the input for the laptop
$(document).ready(function(){
$('input[type=radio][name=sex]').click(function(){
var related_class=$(this).val();
$('.'+related_class).prop('disabled',false);
$('input[type=radio][name=sex]').not(':checked').each(function(){
var other_class=$(this).val();
$('.'+other_class).prop('disabled',true);
});
});
});
Simmilar Fiddle Example
Try something like below using jQuery:
HTML
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="sex" value="laptop" checked>
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input id="laptopVal" type="text" value="" />
</span>
</BR>
<input id="computer" type="radio" name="sex" value="computer">
<span class="radio-choice-name">
<label for="computer">computer</label>
<input id="computerVal"type="text" value=""" />
</span>
</div>
JAVASCRIPT
$( document ).ready(function() {
function handleClick(el) {
$('input[type=text]').css('background-color', 'grey');
$('input[type=text]').attr('readonly', 'true');
$('#' + el.attr('id') + 'Val').css('background-color', 'white');
$('#' + el.attr('id') + 'Val').attr('readonly', 'false');
}
handleClick($('#laptop'));
$("input:radio").click(function() {
handleClick($(this));
});
});
WORKING FIDDLE
You could do the following in jQuery. Let me know if you needed a pure javascript solution.
$(document).ready(function(){
$(".radio-group").on("change", ":radio", function() {
$(":text").prop("disabled", true);
$(this).next(".radio-choice-name").find(":text").prop("disabled", false);
});
});
input[disabled] { background-color: #eee }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="sex" value="laptop" checked />
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input type="text" value="" />
</span>
<br/>
<input id="computer" type="radio" name="sex" value="computer" />
<span class="radio-choice-name">
<label for="computer">computer</label>
<input type="text" value="" disabled />
</span>
</div>
</form>
I have done slight change to your html below, just added "class" attribute to input text and assigned value same as radio button values.
<!DOCTYPE html>
<html>
<body>
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="device" value="laptop" checked>
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input class="laptop" type="text" value="" />
</span>
<br>
<input id="computer" type="radio" name="device" value="computer">
<span class="radio-choice-name">
<label for="computer">computer</label>
<input class="computer" type="text" value="" disabled/>
</span>
</div>
</form>
</body>
</html>
Here is the javascript:
<script type="text/javascript">
$(function () {
$('input:radio').on('change', function(){
var value = $(this).val();
$('.radio-group').find('input[type=text]').attr('disabled', 'disabled');
$('.' + value).removeAttr('disabled');
}
);
});
</script>
I think you will find this very easy approach.

jquery keyup event on text box get id

I have build a form in html where dynamically generate some input field with dynamic ids(e.g id_1, id_2, id_3 etc). Now I want to create a event when I keyup on each input box.
here is my html file
<div id="addinput">
<div id="innneraddinput">
<div class="inputDivId">
<input class="search" id="searchid" type="text" size="30" name="p_new" value="" placeholder="" />
</div>
<div class="inputDivId">
<input type="text" id="p_new" size="10" name="p_new" value="" placeholder="" />
</div>
<div class="inputDivId">
<input type="text" id="p_new" size="10" name="p_new" value="" placeholder="" />
</div>
<div class="inputDivId">
<input type="text" id="p_new" size="10" name="p_new" value="" placeholder="" />
</div>
<div class="inputDivId">
<input type="text" id="p_new" size="10" name="p_new" value="" placeholder="" />
</div>
<div class="inputDivId">
<input type="text" id="p_new" size="15" name="p_new" value="" placeholder="" />
</div>
Add
</div>
<div id="result"></div>
</div>
$("#innneraddinput input").keyup(function() {
var v = this.id;
});
If elements are created dynamically, use the on method:
$("#innneraddinput input").on("keyup", function() {
var v = this.id;
});
$("#innneraddinput input").keyup(function() {
var id = $(this).attr('id');
}

Categories

Resources