I'm trying to make option value with others , which if the user need to write other values input text will being shows to him to add what he want , otherwise he can add from the option select box , I have an issue with that which it add only the input field and not adding the value from the optin box , Can any one help me with that the project is with laravel framework
here's my form :
<div class="row">
<div class="col-md-12 unit">
<label class="label float-ar">من فضلك اختر هوايات الطفل</label>
<div class="select " id="admDivChecktop">
<select name="childHoppy" class="col-md-12 sel-has-p" id="getFname" onchange="admSelectCheck(this);">
<option value="none" selected disabled>اختر هوايات الطفل</option>
<option value="القرأه">القراه</option>
<option value="الرياضة">الرياضة </option>
<option value="السباحه">السباحه</option>
<option value="الرسم">الرسم </option>
<option id="admOption" value="0">others</option>
</select>
</div>
</div>
</div>
<div class="row" id="admDivCheck" style="display:none;">
<div class="col-md-12 unit" >
<label class="label">أَضف بيانات أخري لهواية طفلك</label>
<div class="input" >
<input type="text" class="col-md-12 bg-hover" name="childHoppy" >
<label class="icon-left" >
<i class="fa fa-user"></i>
</label>
</div>
</div>
</div>
<script>
function admSelectCheck(nameSelect)
{
if(nameSelect){
admOptionValue = document.getElementById("getFname").value;
alert(admOptionValue);
if(admOptionValue == 0){
document.getElementById("admDivCheck").style.display = "";
document.getElementById("admDivChecktop").style.display = "none";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
</script>
I would add another hidden input and store the value there.
If your select has changed, catch the change with javascript and update hidden's value. Same for the text input.
What do you think about this?
Pseudo code:
<input type="hidden" name="childHoppy" id="childHoppy">
<select name="select" id="select">
<option>...</option>
</select>
<input type="text" name="text" id="text">
<script>
$document.on('change', '#select, #text', function() {
$('#childHoppy').val($this.val());
});
</script>
Related
This question already has answers here:
jQuery select change show/hide div event
(10 answers)
Closed 2 years ago.
I have an HTML form with multiple select fields... I want to display/hide a div based on a user's selection of a previous field.
Specifically, if a user selects "Before" or "After" on the select field, I want to hide the #Length-div... the odd thing is that I have already gotten this to work for the #Yes div, and I don't know what the difference is between these two.
<div class="required">
<label class="control-label" for="before_after">When?</label>
<select class="form-control" id="before_after" name="before_after" required="">
<option selected="" value="Until the prayer after">Until the prayer after</option>
<option value="Before">Before</option>
<option value="After">After</option>
</select>
</div>
<div class="form-group required">
<label class="control-label" for="recurring">Recurring</label>
<select class="form-control" id="recurring" name="recurring" required="">
<option selected="" value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<div name="Length-div" id="Length-div" style="display:none;">
{{ wtf.form_field(form.length)}}
</div>
<div name="Yes" id="Yes" style="display: none;">
{{ wtf.form_field(form.frequency)}}
{{ wtf.form_field(form.end)}}
</div>
My Jquery scripts:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script>
$(document).ready(function(){
$("#recurring").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue=="No"){
$("#Yes").hide()
} else{
$("#Yes").show();
}
}).change();
$("#before_after").change(function(){
$(this).find("option:selected").each(function(){
var optionValue2 = $(this).attr("value");
if(optionValue2=="Until the prayer after"){
$("#Length-div").show();
} else{
$("#Length-div").hide();
}
}).change();
});
});
});
</script>
Could you please let me know why my code works for the #Yes div but not for the #Length-div ? Thank you in advance!
Your code structure is not proper otherwise it is working fine see below example
$(document).ready(function(){
$("#recurring").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue=="No"){
$("#Yes").hide()
} else{
$("#Yes").show();
}
})
});
$("#before_after").change(function(){
debugger
$(this).find("option:selected").each(function(){
var optionValue2 = $(this).attr("value");
if(optionValue2=="Until the prayer after"){
$("#Length-div").show();
} else{
$("#Length-div").hide();
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="required">
<label class="control-label" for="before_after">When?</label>
<select class="form-control" id="before_after" name="before_after" required="">
<option selected="" value="Until the prayer after">Until the prayer after</option>
<option value="Before">Before</option>
<option value="After">After</option>
</select>
</div>
<div class="form-group required">
<label class="control-label" for="recurring">Recurring</label>
<select class="form-control" id="recurring" name="recurring" required="">
<option selected="" value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<div name="Length-div" id="Length-div" style="display:none;">
{{ wtf.form_field(form.length)}}
</div>
<div name="Yes" id="Yes" style="display: none;">
{{ wtf.form_field(form.frequency)}}
{{ wtf.form_field(form.end)}}
</div>
I tried to change the default empty value "" with friendly labels however I was not successful for subcategory and name selects since data is coming dynamically from django. category works fine since there is an empty option when page loads however subcategory and name load on select data-empty_label "----------" instead and no options are visible.
<div class="form-row">
<input type="hidden" name="csrfmiddlewaretoken" value="xxxxx">
<div class="form-group custom-control col-md-3">
<select name="category" class="custom-select custom-select-lg" required id="id_category">
<option value="" selected>---------</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<div class="form-group custom-control col-md-3">
<select name="subcategory" disabled class="custom-select custom-select-lg chained-fk" required id="id_subcategory" data-chainfield="category" data-url="/chaining/filter/xxxxx" data-value="null" data-auto_choose="false" data-empty_label="--------" name="subcategory">
</select>
</div>
<div class="form-group custom-control col-md-3">
<select name="name" disabled class="custom-select custom-select-lg chained-fk" required id="id_name" data-chainfield="subcategory" data-url="/chaining/filter/xxxxx" data-value="null" data-auto_choose="false" data-empty_label="--------" name="name">
</select>
</div>
<div class="form-group col-md-3">
<input type="submit" value="Submit" class="btn-lg btn-success btn-block">
</div>
</div>
<script>
$(document).ready(function() {
$("select").on("change", function() {
if($("select[name='category']").val() == "") {
$("select[name='category'] > option:first-child").text('Category');
$("select[name='subcategory']").prop('disabled', 'disabled');
$("select[name='subcategory'] > option:first-child").text('Subcategory');
$("select[name='name']").prop('disabled', 'disabled');
$("select[name='name'] > option:first-child").text('Recipe');
} else {
$("select[name='subcategory']").removeAttr("disabled");
$("select[name='subcategory'] > option:first-child").text('Subcategory');
}
}).trigger('change');
$("select[name='subcategory']").on("change", function() {
$("select[name='subcategory'] > option:first-child").text('Subcategory');
if($(this).val() == "") {
$("select[name='name']").prop('disabled', 'disabled');
$("select[name='recipename'] > option:first-child").text('Recipe');
} else {
$("select[name='name']").removeAttr("disabled");
$("select[name='ename'] > option:first-child").text('Recipe');
}
}).trigger('change');
});
</script>
I have a table that lists all of the users invoices, and each invoice contains a pay button to allow them to pay the bill.
I currently have a loop that goes through each invoice and displays each invoice in its own row, and when a user goes to click on the pay button the JavaScript will show a selection box to use a saved card or a new card, if the user chooses a saved card then the JavaScript will show the other select box containing their saved cards, if the new card is chosen then the other input fields will be displayed, right now the showing and hiding part when selecting a saved card or new card ONLY works for the very first row in the table, no other rows work with that JavaScript, I'm sure its because JavaScript is grabbing that first id and stopping there. How can I do this correctly to where it grabs all of the ids and runs the code when the user chooses a saved card or new card on each invoice?
I created a JSFiddle to show my exact situation, can someone modify it to where it will work? I would really appreciate it!
https://jsfiddle.net/s0fbrcw6/1/
payments.blade.php
#if($payments)
#foreach($payments as $payment)
<tr>
<td>${{number_format(($payment->price /100), 2, '.', ' ')}}</td>
<td>{{$payment->product_name}}</td>
<td>{{$payment->created_at->toFormattedDateString()}}</td>
<td>{{$payment->created_at->addMonth()->toFormattedDateString()}}</td>
<td>{{$payment->reoccurring}}</td>
<td>{{$payment->status}}</td>
#if($payment->status == "Paid")
#else
<td>
<div class="add-payment-container">
<button class="toggle-add-payment mdl-button mdl-js-button mdl-js-ripple-effect pull-right btn-info">
#if($payment->reoccurring == "Yes")
Subscribe
#else
Pay Here
#endif
</button>
<div class="add-payment">
</br>
<form action="{{'/users/payment'}}" method="post"
id="checkout-form">
<input type="text" name="price" class="hidden"
value="{{$payment->price}}">
<input type="text" name="productName" class="hidden"
value="{{$payment->product_name}}">
<input type="text" name="paymentID" class="hidden"
value="{{$payment->id}}">
<input type="text" name="reoccurring" class="hidden"
value="{{$payment->reoccurring}}">
<div class="row">
<div class="col-sm-4">
<div id="paymentMethodDiv"
class="form-group label-floating">
{!! Form::label('paymentMethod', 'Payment Method') !!}
</br>
{!! Form::select('paymentMethod', ['Saved Card'=>'Saved Card','New Card'=>'New Card'], null, ['class' => 'browser-default mdl-selectfield', 'placeholder' => 'Choose Option', 'id' => 'paymentMethod'])!!}
</div>
</div>
<div class="col-sm-4">
<div id="savedCardsDiv" class="form-group label-floating" style="display: none;">
{!! Form::label('card', 'Previous Cards') !!}
</br>
{!! Form::select('card', $cardLast4, null, ['class' => 'browser-default mdl-selectfield', 'placeholder' => 'Choose Option', 'id' => 'savedCards'])!!}
</div>
</div>
<div class="col-md-4">
<div id="cardHolderNameDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Card Holder
Name</label>
<input type="text" id="card-name"
class="form-control">
</div>
</div>
<div class="col-md-4">
<div id="cardNumberDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Card Number</label>
<input type="text" id="card-number"
class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div id="expirationMonthDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Expiration
Month</label>
<input type="text" id="card-expiry-month"
class="form-control">
</div>
</div>
<div class="col-md-5">
<div id="expirationYearDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Expiration Year</label>
<input type="text" id="card-expiry-year"
class="form-control">
</div>
</div>
<div class="col-md-2">
<div id="cvcDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">CVC</label>
<input type="text" id="card-cvc"
class="form-control">
</div>
</div>
</div>
{{csrf_field()}}
<button type="submit" class="btn btn-primary pull-right">Make
Payment
</button>
<div class="clearfix"></div>
</form>
</div>
</div>
</td>
#endif
</tr>
<script>
var paymentMethodSelect = document.getElementById('paymentMethod');
paymentMethodSelect.onchange = function () {
if (paymentMethodSelect.value == 'Saved Card') {
document.getElementById("savedCardsDiv").style.display = "block";
document.getElementById("cardHolderNameDiv").style.display = "none";
document.getElementById("cardNumberDiv").style.display = "none";
document.getElementById("expirationMonthDiv").style.display = "none";
document.getElementById("expirationYearDiv").style.display = "none";
document.getElementById("cvcDiv").style.display = "none";
} else if (paymentMethodSelect.value == 'New Card') {
document.getElementById("savedCardsDiv").style.display = "none";
document.getElementById("cardHolderNameDiv").style.display = "block";
document.getElementById("cardNumberDiv").style.display = "block";
document.getElementById("expirationMonthDiv").style.display = "block";
document.getElementById("expirationYearDiv").style.display = "block";
document.getElementById("cvcDiv").style.display = "block";
} else {
document.getElementById("savedCardsDiv").style.display = "none";
document.getElementById("cardHolderNameDiv").style.display = "none";
document.getElementById("cardNumberDiv").style.display = "none";
document.getElementById("expirationMonthDiv").style.display = "none";
document.getElementById("expirationYearDiv").style.display = "none";
document.getElementById("cvcDiv").style.display = "none";
}
};
</script>
Advice: use jQuery. For situations like this, it significantly simplifies the js function part of it.
jsFiddle Solution: https://jsfiddle.net/brednmuc/4/
Brief Description:
Move away from using HTML IDs for everything and just make attributes that make the most sense for your web application. This methodology allows you to practically define an unlimited number of attributes that you can key certain behaviors off of. This also prevents conflicts with libraries that you may use / integrate with your project.
Code:
jQuery:
$(document).ready(function() {
$("select[name='paymentMethod']").change(function() {
var dropdownValue = $(this).val();
var transactionId = $(this).parent().attr('transactionId');
switch (dropdownValue) {
case 'Saved Card':
$("td[transactionId='" + transactionId + "'] div.savedCardsDiv").show();
break;
case 'New Card':
$("td[transactionId='" + transactionId + "'] div.savedCardsDiv").hide();
break;
default:
$("td[transactionId='" + transactionId + "'] div.savedCardsDiv").hide();
break;
};
});
});
HTML:
<table>
<tr>
<td transactionId="1">
<select name="paymentMethod" form="carform" class="paymentMethod">
<option value="">Select your option</option>
<option value="Saved Card">Saved Card</option>
<option value="New Card">New Card</option>
</select>
<div class="savedCardsDiv" style="display: none;">
<select name="savedCards" form="carform" class="savedCards">
<option value="">Select your option</option>
<option value="Saved Card">****4242</option>
<option value="New Card">****5423</option>
</select>
</div>
</td>
</tr>
<tr>
<td transactionId="2">
<select name="paymentMethod" form="carform" class="paymentMethod">
<option value="">Select your option</option>
<option value="Saved Card">Saved Card</option>
<option value="New Card">New Card</option>
</select>
<div class="savedCardsDiv" style="display: none;">
<select name="savedCards" form="carform" class="savedCards">
<option value="">Select your option</option>
<option value="Saved Card">****4242</option>
<option value="New Card">****5423</option>
</select>
</div>
</td>
</tr>
</table>
I have 2 radio buttons which when I click on one of them I get dropdown menu where must choose amount.
So far I was able to make it check/unchek them but the problem is that when I uncheck the radio button dropdown doesn't hide again.
I'm not very good in javascript so please help on this one. Here is the part of code
<div class="radio">
<label><input type="radio" autocomplete="off" id="paypal" name="paypal"></label> PayPal
</div>
<div class="radio">
<label><input type="radio" autocomplete="off" name="bank" id="bank"></label> Bank
</div>
<div class="form-group">
<span id="paypalamount" style="display:none">
<label class="col-sm-3 control-label" for="price"></label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">$</span>
<select id="paypalamount" required="required" class="form-control">
<option selected value="50">50</option>
</select>
</div>
</div>
</span>
<span id="bankamount" style="display:none">
<label class="col-sm-3 control-label" for="price">Please Choose Amount to Deposit</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">$</span>
<select id="bankamount" required="required" class="form-control">
<option selected value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
</div>
</span>
Here is JS
$(document).ready(function(){
$("#paypal").change(function(){
var showOrHide =$(this).is(':checked');
$("#paypalamount").toggle(showOrHide);
$('[name="description"]').toggleClass('#paypalamount',showOrHide )
});
$("#bank").change(function(){
var showOrHide =$(this).is(':checked');
$("#bankamount").toggle(showOrHide);
$('[name="description"]').toggleClass('#bankamount',showOrHide )
});
$("input[type='radio']").click(function()
{
var previousValue = $(this).attr('previousValue');
var name = $(this).attr('name');
if (previousValue == 'checked')
{
$(this).removeAttr('checked');
$(this).attr('previousValue', false);
}
else
{
$("input[name="+name+"]:radio").attr('previousValue', false);
$(this).attr('previousValue', 'checked');
}
});
});
And this is working demo of the code above JSFIDDLE
$(document).ready(function() {
$(":radio[name=bankpaypal]").change(function() {
if ($(this).is(':checked')) {
var name = $(this).attr('id')
$('span').hide()
$('span#' + name + 'amount').show()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label>
<input type="radio" autocomplete="off" id="paypal" name="bankpaypal">
</label>PayPal
</div>
<div class="radio">
<label>
<input type="radio" autocomplete="off" name="bankpaypal" id="bank">
</label>Bank
</div>
<div class="form-group">
<span id="paypalamount" style="display:none">
<label class="col-sm-3 control-label" for="price"></label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">$</span>
<select id="paypalamount1" required="required" class="form-control">
<option selected value="50">50</option>
</select>
</div>
</div>
</span>
<span id="bankamount" style="display:none">
<label class="col-sm-3 control-label" for="price">Please Choose Amount to Deposit</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">$</span>
<select id="bankamount1" required="required" class="form-control">
<option selected value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
Name of radio button should be same to select only 1
ID should be unique
Get the selected radio button and show its counter select using its ID since they are similar
Use following code to check whether a radio button is checked or not
if($("input:radio[name=paypal]:checked").val())
alert("checked");
else
alert("Not checked");
Do your process of hiding and showing inside the if else conditions.
You only need to check for the value of a RadioButton as not checked. If unchecked set the style attribute display:none for the respective dropdown again in Javascript.
Just like you do it for the checked-Status of the RadioButton and just change the condition and the actions like you want the RadioButtons to behave.
<label>Project Type </label>
<div>
<select name="category" id="category" class="form-control ">
<option value="">Select Project Type</option>
<option value="Independent_House">Independent House</option>
<option value="Duplex_House">Duplex House</option>
<option value="Pent_House">Pent House</option>
</select>
</div>
<div class="cato" id="category_Independent_House" style="display:none">
<input type="button" id="addindependant" value="Add Property" />
<div id="cato_Independent_House">
<div class="form-group">
<label>Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<div class="cato" id="category_Duplex_House" style="display:none">
<input type="button" id="addduplex" value="Add Property" />
<div id="cato_Duplex_House">
<div class="form-group">
<label >Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<div class="cato" id="category_Pent_House" style="display:none">
<input type="button" id="addpenthouse value="Add Property" />
<div id="cato_Pent_House">
<div class="form-group">
<label >Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<script type="text/javascript">
js(function() {
js('#addindependant').click(function(e){
js('#cato_Independent_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
js('#addduplex').click(function(e){
js('#cato_Duplex_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
js('#addpenthouse').click(function(e){
js('#category_Pent_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
});
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('#category_'+selection).show('slow');
});
});
</script>
This is my code. When I select the category based upon the category selected the divs cato_Independent_House cato_Duplex_House and category_Pent_House get appended to their respective categories.
Consider first independant house is selected from drop down so its respective cato_Independent_House gets appended to the div with id id="category_Independent_House" on click of the button.after that when duplex house is selected from drop down its respective 'cato_Duplex_House' gets appended to div with id="cato_Duplex_House" on click of the button.
But when I go back and select Independant house it must not show previous selected div until the button is clicked. But here the div is already been displayed even the button is not clicked when I go back.The previous menu should show its div only when the button is clicked.i.e, the previous divs must get empty or removed when other option is selected.How to do this?
js
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('.cato').each(function() {
console.log(js('.cato'));
if(js(this).attr('data-visible') != "true") {
js(this).hide();
}
});
js('#category_'+selection).show('slow');
});
js('.addProperty').click(function(){
js(this).parents('.cato').attr('data-visible','true');
});
});
html
<input type="button" id="addduplex" value="Add Property" class="addProperty" />
add class addProperty to all your add property input
Working JsFiddle Link. I guess this is what you wanted
You should use the jquery hide method to hide the others divs depending on wich one you have selected:
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('#category_'+selection).show('slow');
if(selection=="Independent_House"){
js('#cato_Duplex_House').hide();
js('#cato_Pent_House').hide();
}else if(...){
{otherCases}
});});
And if you want to clear also the inputs selection of each div you could do something like this:
js("#input_controller_id_to_clear")[0].selectedIndex = -1;