I am trying to integrate a basic, "copy to clipboard" function with Rainbow syntax highlighting library. Each code snippet on the page receives highlighting and can be copied to the clipboard by clicking a "Copy" button. Copy buttons are a common functionality, and I don't want to use another plugin for something this simple. I have tried using the Clipboard API script below which works fine on it's own, but when Rainbow is running, the copy function no longer works (and no errors are thrown in the console). Can anyone help me integrate the script below with Rainbow's highlighting library?
Rainbow Repository:
https://github.com/ccampbell/rainbow
Example of Raw HTML:
<pre class="lang-html" tabindex="0"><code data-language="html">
<div class="container">
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
</div>
</code></pre>
Example of Raw HTML output with Rainbow:
<pre class="lang-html rainbow-show" tabindex="0" data-trimmed="true"><code data-language="html" class="rainbow rainbow-show">
<span class="support tag"><span class="support tag"><</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">container</span><span class="string quote">"</span><span class="support tag close">></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">row</span><span class="string quote">"</span><span class="support tag close">></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">col</span><span class="string quote">"</span><span class="support tag close">></span>Column 1<span class="support tag"><span class="support tag"><</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">col</span><span class="string quote">"</span><span class="support tag close">></span>Column 2<span class="support tag"><span class="support tag"><</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">col</span><span class="string quote">"</span><span class="support tag close">></span>Column 3<span class="support tag"><span class="support tag"><</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">></span>
</code><button class="btn btn-secondary2">Copy</button><div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></pre>
Copy to Clipboard Script:
const copyButtonLabel = "Copy";
// use a class selector if available
let blocks = document.querySelectorAll("pre.lang-html");
blocks.forEach((block) => {
// only add button if browser supports Clipboard API
if (navigator.clipboard) {
let button = document.createElement("button");
$(button).addClass( "btn btn-secondary2" );
button.innerText = copyButtonLabel;
block.appendChild(button);
button.addEventListener("click", async () => {
await copyCode(block, button);
});
}
});
async function copyCode(block, button) {
let code = block.querySelector("code");
let text = code.innerText;
await navigator.clipboard.writeText(text);
// visual feedback that task is completed
button.innerText = "Copied";
setTimeout(() => {
button.innerText = copyButtonLabel;
}, 700);
}
Related
I have a taken a dropdown
#Html.DropDownListFor(model => Model.AccountManagerId, Model.AccountManagerList, new { #class = "form-control multiselect", #onchange = "GetPartnerNameList()", #multiple = "multiple" })
#Html.HiddenFor(model => Model.AccountManagerId)
here is a result
when I select it 2 or all list in dropdown then I got a result in
hidded value like "1,2"
but during edit it was not in selected if I hidded value is "1,2"
here is a html code below which I got in Bowser
<div class="col-md-7">
<span class="multiselect-native-select">
<select class="form-control multiselect" id="AccountManagerId" multiple="multiple" name="AccountManagerId" onchange="GetPartnerNameList()">
<option value="1">julie.piper#pe.gy</option>
<option value="2">rebecca.millward#pe.gy</option>
<option value="3">penny.crudgington#pe.gy</option>
</select>
<div class="open">
<button type="button" class="multiselect dropdown-toggle form-control" style="text-align:left;width:50%;" data-toggle="dropdown" title="All">
<span class="multiselect-selected-text">All</span>
<b class="caret" style="float:right;margin-top:5px;"></b>
</button>
<ul class="multiselect-container dropdown-menu" style="width:50%;">
<li class="multiselect-item multiselect-filter" value="0">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input class="form-control multiselect-search" type="text" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default multiselect-clear-filter" type="button">
<i class="glyphicon glyphicon-remove-circle"></i>
</button>
</span>
</div>
</li>
<li class="multiselect-item multiselect-all">
<a tabindex="0" class="multiselect-all">
<label class="checkbox">
<input type="checkbox" name="true" value="multiselect-all"> Select all </label>
</a>
</li>
<li>
<a tabindex="0">
<label class="checkbox" title="julie.piper#pe.gy">
<input type="checkbox" value="1"> julie.piper#pe.gy </label>
</a>
</li>
<li>
<a tabindex="0">
<label class="checkbox" title="rebecca.millward#pe.gy">
<input type="checkbox" value="2"> rebecca.millward#pe.gy </label>
</a>
</li>
<li>
<a tabindex="0">
<label class="checkbox" title="penny.crudgington#pe.gy">
<input type="checkbox" value="3"> penny.crudgington#pe.gy </label>
</a>
</li>
</ul>
</div>
</span>
<input id="AccountManagerId" name="AccountManagerId" type="hidden" value="1,2">
<br>
</div>
how can I select dropdown list if AccountManagerId hidden value="1,2" or value="1,2,3"
I have stacked at this problem and I would appreciate any help - it might be something obvious, but for the time being I am unable to see what's wrong.
Some context:
I am adding dynamically a "group" of fields in a form that describe a person.
These fields can be empty for a whole new entry, or the user can select from a list of existing persons (described as guests), which I present in a div.
The user can click on each of these guests divs and add a new row of group inputs with the input values already set.
This is where I have the problem. I am able to add the new row of group inputs and the inputs have their value set, but the value isn't displayed inside the input fields.
JSFiddle Link: https://jsfiddle.net/joomquery/odgp2wre
Thanks in advance
(function($) {
$(document).ready(function() {
let passengersRows = $('.booking-passenger-entry');
let passengersRowsI = passengersRows.length;
$('.add-guest-as-passenger').on('click', function() {
let passengerData = {};
console.clear();
console.log(this);
passengerData.guestid = $(this).attr('data-guestid');
passengerData.passengerid = 0;
passengerData.lastname = $(this).attr('data-lastname');
passengerData.firstname = $(this).attr('data-firstname');
passengerData.passportid = $(this).attr('data-passportid');
passengerData.age = $(this).attr('data-age');
passengerData.gender = $(this).attr('data-gender');
addPassenger(passengerData);
});
function addPassenger(passenger) {
passengersRowsI++;
let i = passengersRowsI;
let container = $('#passengers-container');
let genderSelectOptionA = `<option value="0">Unspecified</option>`;
let genderSelectOptionB = `<option value="1">Male</option>`;
let genderSelectOptionC = `<option value="2">Female</option>`;
if (passenger.gender == 'Male') {
genderSelectOptionB = `<option value="1" selected>Male</option>`;
} else if (passenger.gender == 'Female') {
genderSelectOptionC = `<option value="2" selected>Female</option>`;
}
console.clear();
console.log(passenger);
let passengerTemplate = `
<div class="row-fluid booking-passenger-entry inputform" id="passengers-container-${i}" data-guestid="${passenger.guestid}" data-passengerid="">
<input type="text" required id="input-name-last-${i}" name="passengers[${i}][name-last]" class="span3 b-guest-i input name-last" placeholder="Last name" val="John" >
<input type="text" required id="input-name-first-${i}" name="passengers[${i}][name-first]" class="span3 b-guest-i input name-first" placeholder="First name" val="${passenger.firstname}" >
<input type="text" required id="input-passport-${i}" name="passengers[${i}][passport]" class="span2 b-guest-i input passport" placeholder="Passport ID" val="${passenger.passportid}" >
<input type="text" required id="input-age-${i}" name="passengers[${i}][age]" class="span1 b-guest-i input age" placeholder="Age" val="${passenger.age}" >
<select id="input-gender-${i}" required name="passengers[${i}][gender]" class="span2 b-guest-i input gender">
${genderSelectOptionA}
${genderSelectOptionB}
${genderSelectOptionC}
</select>
<div class="btn-group span1 pull-right">
<div id="passenger-delete-${i}" class="btn btn-danger"><i class="fa fa-minus-circle" aria-hidden="true"></i></div>
</div>
<input type="hidden" id="input-passengerid-${i}" name="passengers[${i}][passengerid]" class="hidden b-guest-i input" val="" >
<input type="hidden" id="input-guestid-${i}" name="passengers[${i}][guestid]" class="hidden b-guest-i input" val="${passenger.guestid}" >
</div>`;
$(container).append(passengerTemplate);
}
});
})(jQuery);
.booking-passenger-entry {
padding: 0.3125rem 0;
}
.booking-guest {
margin: 1px 0;
padding: 0.3125rem !important;
line-height: 1rem;
cursor: pointer;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="booking-passengers" class="row-fluid req-passengers" style="">
<div class="controls">
<div class="passengerlist">
<h3>Dynamic guestlist:</h3>
<div class="row-fluid booking-guest booking-guest-headings">
<span class="span3 b-guest-i b-guest-h name-last">Last name</span>
<span class="span3 b-guest-i b-guest-h name-first">First name</span>
<span class="span2 b-guest-i b-guest-h passport">Passport ID</span>
<span class="span1 b-guest-i b-guest-h age">Age</span>
<span class="span2 b-guest-i b-guest-h gender">Gender</span>
</div>
<div id="passengers-container" class="passengers-container" style="border:1px solid #aaa; min-height: 30px; background: #fafafa;">
</div>
<div class="guestlist">
<h3>You may add passengers from your booking's guestlist</h3>
<div class="row-fluid booking-guest booking-guest-headings">
<span class="span3 b-guest-i b-guest-h name-last">Last name</span>
<span class="span3 b-guest-i b-guest-h name-first">First name</span>
<span class="span3 b-guest-i b-guest-h passport">Passport ID</span>
<span class="span1 b-guest-i b-guest-h age">Age</span>
<span class="span2 b-guest-i b-guest-h gender">Gender</span>
</div>
<div class="row-fluid booking-guest add-guest-as-passenger" id="booking-guest-8" data-guestid="8" data-passengerid="0" data-firstname="SomeoneF1" data-lastname="SomeoneL1" data-passportid="XX2255551" data-age="43" data-gender="Male">
<span class="span3 b-guest-i name-last">SomeoneL1</span>
<span class="span3 b-guest-i name-first">SomeoneF1</span>
<span class="span3 b-guest-i passport">XX2255551</span>
<span class="span1 b-guest-i age">43</span>
<span class="span2 b-guest-i gender">Male</span>
</div>
<div class="row-fluid booking-guest add-guest-as-passenger" id="booking-guest-12" data-guestid="12" data-passengerid="0" data-firstname="SomeoneF2" data-lastname="SomeoneL2" data-passportid="XX0011221" data-age="41" data-gender="Unspecified">
<span class="span3 b-guest-i name-last">SomeoneL2</span>
<span class="span3 b-guest-i name-first">SomeoneF2</span>
<span class="span3 b-guest-i passport">XX0011221</span>
<span class="span1 b-guest-i age">41</span>
<span class="span2 b-guest-i gender">Unspecified</span>
</div>
</div>
</div>
</div>
</div>
You are almost there, just only one change you need to make.
Change, the atrribute name from val to value in your passengerTemplate input elements.
(function($) {
$(document).ready(function() {
let passengersRows = $('.booking-passenger-entry');
let passengersRowsI = passengersRows.length;
$('.add-guest-as-passenger').on('click', function() {
let passengerData = {};
console.clear();
console.log(this);
passengerData.guestid = $(this).attr('data-guestid');
passengerData.passengerid = 0;
passengerData.lastname = $(this).attr('data-lastname');
passengerData.firstname = $(this).attr('data-firstname');
passengerData.passportid = $(this).attr('data-passportid');
passengerData.age = $(this).attr('data-age');
passengerData.gender = $(this).attr('data-gender');
addPassenger(passengerData);
});
function addPassenger(passenger) {
passengersRowsI++;
let i = passengersRowsI;
let container = $('#passengers-container');
let genderSelectOptionA = `<option value="0">Unspecified</option>`;
let genderSelectOptionB = `<option value="1">Male</option>`;
let genderSelectOptionC = `<option value="2">Female</option>`;
if (passenger.gender == 'Male') {
genderSelectOptionB = `<option value="1" selected>Male</option>`;
} else if (passenger.gender == 'Female') {
genderSelectOptionC = `<option value="2" selected>Female</option>`;
}
console.clear();
let passengerTemplate = `
<div class="row-fluid booking-passenger-entry inputform" id="passengers-container-${i}" data-guestid="${passenger.guestid}" data-passengerid="">
<input type="text" required id="input-name-last-${i}" name="passengers[${i}][name-last]" class="span3 b-guest-i input name-last" placeholder="Last name" value="John" >
<input type="text" required id="input-name-first-${i}" name="passengers[${i}][name-first]" class="span3 b-guest-i input name-first" placeholder="First name" value="${passenger.firstname}" >
<input type="text" required id="input-passport-${i}" name="passengers[${i}][passport]" class="span2 b-guest-i input passport" placeholder="Passport ID" value="${passenger.passportid}" >
<input type="text" required id="input-age-${i}" name="passengers[${i}][age]" class="span1 b-guest-i input age" placeholder="Age" value="${passenger.age}" >
<select id="input-gender-${i}" required name="passengers[${i}][gender]" class="span2 b-guest-i input gender">
${genderSelectOptionA}
${genderSelectOptionB}
${genderSelectOptionC}
</select>
<div class="btn-group span1 pull-right">
<div id="passenger-delete" class="btn btn-danger"><i class="fa fa-minus-circle" aria-hidden="true"></i></div>
</div>
<input type="hidden" id="input-passengerid-${i}" name="passengers[${i}][passengerid]" class="hidden b-guest-i input" value="" >
<input type="hidden" id="input-guestid-${i}" name="passengers[${i}][guestid]" class="hidden b-guest-i input" value="${passenger.guestid}" >
</div>`;
$(container).append(passengerTemplate);
}
});
})(jQuery);
.booking-passenger-entry {
padding: 0.3125rem 0;
}
.booking-guest {
margin: 1px 0;
padding: 0.3125rem !important;
line-height: 1rem;
cursor: pointer;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="booking-passengers" class="row-fluid req-passengers" style="">
<div class="controls">
<div class="passengerlist">
<h3>Dynamic guestlist:</h3>
<div class="row-fluid booking-guest booking-guest-headings">
<span class="span3 b-guest-i b-guest-h name-last">Last name</span>
<span class="span3 b-guest-i b-guest-h name-first">First name</span>
<span class="span2 b-guest-i b-guest-h passport">Passport ID</span>
<span class="span1 b-guest-i b-guest-h age">Age</span>
<span class="span2 b-guest-i b-guest-h gender">Gender</span>
</div>
<div id="passengers-container" class="passengers-container" style="border:1px solid #aaa; min-height: 30px; background: #fafafa;">
</div>
<div class="guestlist">
<h3>You may add passengers from your booking's guestlist</h3>
<div class="row-fluid booking-guest booking-guest-headings">
<span class="span3 b-guest-i b-guest-h name-last">Last name</span>
<span class="span3 b-guest-i b-guest-h name-first">First name</span>
<span class="span3 b-guest-i b-guest-h passport">Passport ID</span>
<span class="span1 b-guest-i b-guest-h age">Age</span>
<span class="span2 b-guest-i b-guest-h gender">Gender</span>
</div>
<div class="row-fluid booking-guest add-guest-as-passenger" id="booking-guest-8" data-guestid="8" data-passengerid="0" data-firstname="SomeoneF1" data-lastname="SomeoneL1" data-passportid="XX2255551" data-age="43" data-gender="Male">
<span class="span3 b-guest-i name-last">SomeoneL1</span>
<span class="span3 b-guest-i name-first">SomeoneF1</span>
<span class="span3 b-guest-i passport">XX2255551</span>
<span class="span1 b-guest-i age">43</span>
<span class="span2 b-guest-i gender">Male</span>
</div>
<div class="row-fluid booking-guest add-guest-as-passenger" id="booking-guest-12" data-guestid="12" data-passengerid="0" data-firstname="SomeoneF2" data-lastname="SomeoneL2" data-passportid="XX0011221" data-age="41" data-gender="Unspecified">
<span class="span3 b-guest-i name-last">SomeoneL2</span>
<span class="span3 b-guest-i name-first">SomeoneF2</span>
<span class="span3 b-guest-i passport">XX0011221</span>
<span class="span1 b-guest-i age">41</span>
<span class="span2 b-guest-i gender">Unspecified</span>
</div>
</div>
</div>
</div>
</div>
Update: As the id's are same in your code and it is invalid, conside changing the id with assigning index like,
id="input-name-last-${i}"
id="input-name-first-${i}"
I find in this example, it is easier to simply put the markup you want in for an input group, hide it and then clone that for each instance. I will leave it to you on how you actually use the data, I also removed all the id's so no duplicate id is inserted. If you need the id's you can adjust the clone markup to have them.
The benefit of this is you do not have to maintain HTML in code.
(function($) {
let passengersRows = $('.booking-passenger-entry');
let passengersRowsI = passengersRows.length;
$('.add-guest-as-passenger').on('click', function() {
let passengerData = {};
passengerData.guestid = $(this).data('guestid');
passengerData.passengerid = 0;
passengerData.lastname = $(this).data('lastname');
passengerData.firstname = $(this).data('firstname');
passengerData.passportid = $(this).data('passportid');
passengerData.age = $(this).data('age');
passengerData.gender = $(this).data('gender');
addPassenger(passengerData);
});
function addPassenger(passenger) {
let container = $('#passengers-container');
let inputGroups = container.find('.booking-passenger-entry');
let clone = container.find('.hidden-input-group').first().clone(true);
let i = inputGroups.length;
// might want this>
// passenger.passengerid = i;
let gender = clone.find('.input.gender');
if (passenger.gender == 'Male') {
gender.val(1);
} else if (passenger.gender == 'Female') {
gender.val(2);;
}
clone.find('.name-first').val(passenger.firstname);
clone.find('.name-last').val(passenger.lastname);
clone.data('guestid', passenger.guestid);
clone.data('passengerid', passenger.passengerid);
clone.find('.input.passport').val(passenger.passportid);
clone.find('.input.age').val(passenger.age);
clone.removeClass("hidden-input-group");
container.append(clone);
}
})(jQuery);
.booking-passenger-entry {
padding: 0.3125rem 0;
}
.booking-guest {
margin: 1px 0;
padding: 0.3125rem !important;
line-height: 1rem;
cursor: pointer;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
}
.hidden-input-group {
display: none;
}
#passengers-container {
border: 1px solid #aaa;
min-height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="booking-passengers" class="row-fluid req-passengers" style="">
<div class="controls">
<div class="passengerlist">
<h3>Dynamic guestlist:</h3>
<div class="row-fluid booking-guest booking-guest-headings">
<span class="span3 b-guest-i b-guest-h name-last">Last name</span>
<span class="span3 b-guest-i b-guest-h name-first">First name</span>
<span class="span2 b-guest-i b-guest-h passport">Passport ID</span>
<span class="span1 b-guest-i b-guest-h age">Age</span>
<span class="span2 b-guest-i b-guest-h gender">Gender</span>
</div>
<div id="passengers-container" class="passengers-container">
<div class="row-fluid booking-passenger-entry inputform hidden-input-group" data-guestid="" data-passengerid="">
<input type="text" required data-name="" class="span3 b-guest-i input name-last " placeholder="Last name" />
<input type="text" required class="span3 b-guest-i input name-first" placeholder="First name" />
<input type="text" required class="span2 b-guest-i input passport" placeholder="Passport ID" />
<input type="text" required class="span1 b-guest-i input age" placeholder="Age" />
<select required class="span2 b-guest-i input gender">
<option value="0">Unspecified</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<div class="btn-group span1 pull-right">
<div class="passenger-delete btn btn-danger"><i class="fa fa-minus-circle" aria-hidden="true"></i></div>
</div>
<input type="hidden" class="hidden b-guest-i input" />
<input type="hidden" class="hidden b-guest-i input" />
</div>
</div>
<div class="guestlist">
<h3>You may add passengers from your booking's guestlist</h3>
<div class="row-fluid booking-guest booking-guest-headings">
<span class="span3 b-guest-i b-guest-h name-last">Last name</span>
<span class="span3 b-guest-i b-guest-h name-first">First name</span>
<span class="span3 b-guest-i b-guest-h passport">Passport ID</span>
<span class="span1 b-guest-i b-guest-h age">Age</span>
<span class="span2 b-guest-i b-guest-h gender">Gender</span>
</div>
<div class="row-fluid booking-guest add-guest-as-passenger" id="booking-guest-8" data-guestid="8" data-passengerid="0" data-firstname="SomeoneF1" data-lastname="SomeoneL1" data-passportid="XX2255551" data-age="43" data-gender="Male">
<span class="span3 b-guest-i name-last">SomeoneL1</span>
<span class="span3 b-guest-i name-first">SomeoneF1</span>
<span class="span3 b-guest-i passport">XX2255551</span>
<span class="span1 b-guest-i age">43</span>
<span class="span2 b-guest-i gender">Male</span>
</div>
<div class="row-fluid booking-guest add-guest-as-passenger" id="booking-guest-12" data-guestid="12" data-passengerid="0" data-firstname="SomeoneF2" data-lastname="SomeoneL2" data-passportid="XX0011221" data-age="41" data-gender="Unspecified">
<span class="span3 b-guest-i name-last">SomeoneL2</span>
<span class="span3 b-guest-i name-first">SomeoneF2</span>
<span class="span3 b-guest-i passport">XX0011221</span>
<span class="span1 b-guest-i age">41</span>
<span class="span2 b-guest-i gender">Unspecified</span>
</div>
</div>
</div>
</div>
</div>
I have a reservation calculator, when an options is checked I want to ensure that the drop off location and the pick up location are one in the same.
Here is my HTML
<div class="col-12">
<div class="col-md-12 form-group">
<label for="car-rental-pickup-location" class="mb-2">Pickup Location<small class="text-danger">*</small></label><br>
<div class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons">
<a href="#tab-pickup" class=" btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
<input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-la" class="required" value="la" required onfocus="laCheck();">Los Angeles
</a>
<a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
<input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-sf" class="required" value="sf" onfocus="sfCheck();">San Francisco
</a>
<a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
<input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-oc" class="required" value="oc" onfocus="laCheck();">Orange County
</a>
</div>
</div>
<div class="col-md-12 form-group">
<label for="car-rental-dropoff-location" class="mb-3">Drop-Off Location<small class="text-danger">*</small></label><br>
<div class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons">
<a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
<input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-la" value="la" required onfocus="getpricing();">Los Angeles
</a>
<a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
<input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-sf" value="sf" onfocus="getpricing();">San Francisco
</a>
<a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
<input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-oc" value="oc" onfocus="getpricing();">Orange County
</a>
</div>
</div>
<input type="checkbox" name="same" value="Same"> Click for same city drop off/pick up<br>
Using JavaScript, I want to force the car-rental-dropoff-location to equal the car-rental-pickup-location if the check box is checked, how would I do that?
For basic Javascript, you would need a function like so
function setDropOff(data){
if(data.checked){
var radios = document.getElementsByName('car-rental-pickup-location');
for (var i = 0, length = radios.length; i < length; i++){
if (radios[i].checked){
// do whatever you want with the checked radio
document.getElementsByName('car-rental-dropoff-location')[i].checked = true;
// only one radio can be logically checked, don't check the rest
break;
}
}
}
}
then you would edit you checkbox input to have an onclick method with the following code.
<input type="checkbox" onclick="setDropOff(this)"name="same" value="Same"> Click for same city drop off/pick up<br>
This will allow the radio buttons to match when the checkbox is clicked as stated in your question.
This will not update the radio buttons when a change is made after the click though. To do that, you would need to send the checkbox into the function from the functions you are calling in the radio box onfocus methods.
. To do that, you would need to call the method again as long as the checkbox is checked with inside the methods you have for on focus on the radio buttons.
putting it all together:
function setDropOff(data){
if(data.checked){
var radios = document.getElementsByName('car-rental-pickup-location');
for (var i = 0, length = radios.length; i < length; i++){
if (radios[i].checked){
// do whatever you want with the checked radio
document.getElementsByName('car-rental-dropoff-location')[i].checked = true;
// only one radio can be logically checked, don't check the rest
break;
}
}
}
}
function laCheck(){
}
function sfCheck(){
}
<div class="col-12">
<div class="col-md-12 form-group">
<label for="car-rental-pickup-location" class="mb-2">Pickup Location<small class="text-danger">*</small></label><br>
<div class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons">
<a href="#tab-pickup" class=" btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
<input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-la" class="required" value="la" required onfocus="laCheck();">Los Angeles
</a>
<a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
<input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-sf" class="required" value="sf" onfocus="sfCheck();">San Francisco
</a>
<a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
<input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-oc" class="required" value="oc" onfocus="laCheck();">Orange County
</a>
</div>
</div>
<div class="col-md-12 form-group">
<label for="car-rental-dropoff-location" class="mb-3">Drop-Off Location<small class="text-danger">*</small></label><br>
<div class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons">
<a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
<input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-la" value="la" required onfocus="getpricing();">Los Angeles
</a>
<a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
<input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-sf" value="sf" onfocus="getpricing();">San Francisco
</a>
<a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
<input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-oc" value="oc" onfocus="getpricing();">Orange County
</a>
</div>
</div>
<input type="checkbox" onclick="setDropOff(this)"name="same" value="Same"> Click for same city drop off/pick up<br>
Use this jQuery Code
$(document).ready(function () {
let pickupLocation = 'input[type=radio][name=car-rental-pickup-location]';
let dropoffLocation = 'input[type=radio][name=car-rental-dropoff-location]';
let sameCity = 'input[type=checkbox][name=same]';
function setDropOff(){
if($(sameCity).is(':checked')) {
let selectedPickupValue = $(pickupLocation + ':checked').val();
if(selectedPickupValue){
$(dropoffLocation + '[value="'+selectedPickupValue +'"]').prop('checked', true);
}
$(dropoffLocation).prop('disabled', true);
} else {
$(dropoffLocation).prop('disabled', false);
}
};
$(pickupLocation).on('change',setDropOff);
$(sameCity).on('click',setDropOff);
});
First : add a FORM, with id : <form id="my-Form" action=".... ?">
const MyForm = document.getElementById('my-Form')
, cBx_Pickup = 'car-rental-pickup-location'
, cBx_Dropoff = 'car-rental-dropoff-location'
MyForm.onchange = e => {
switch (e.target.name) {
case 'same':
if (MyForm.same.checked) {
MyForm[cBx_Dropoff].value = MyForm[cBx_Pickup].value
}
break;
case cBx_Pickup:
if (MyForm.same.checked) {
MyForm[cBx_Dropoff].value = MyForm[cBx_Pickup].value
}
break;
case cBx_Dropoff:
if (MyForm.same.checked) {
MyForm[cBx_Pickup].value = MyForm[cBx_Dropoff].value
}
break;
}
}
<form id="my-Form">
<div class="col-12">
<div class="col-md-12 form-group">
<label for="car-rental-pickup-location" class="mb-2">Pickup Location<small
class="text-danger">*</small></label><br>
<div class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons">
<a href="#tab-pickup" class=" btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
<input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-la" class="required"
value="la" required onfocus="laCheck();">Los Angeles
</a>
<a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
<input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-sf" class="required"
value="sf" onfocus="sfCheck();">San Francisco
</a>
<a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
<input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-oc" class="required"
value="oc" onfocus="laCheck();">Orange County
</a>
</div>
</div>
<div class="col-md-12 form-group">
<label for="car-rental-dropoff-location" class="mb-3">Drop-Off Location<small
class="text-danger">*</small></label><br>
<div class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons">
<a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
<input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-la" value="la"
required onfocus="getpricing();">Los Angeles
</a>
<a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
<input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-sf" value="sf"
onfocus="getpricing();">San Francisco
</a>
<a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
<input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-oc" value="oc"
onfocus="getpricing();">Orange County
</a>
</div>
</div>
</div>
<input type="checkbox" name="same" value="Same"> Click for same city drop off/pick up<br>
</form>
why do you want to complicate things?
I have a form like below,
<form>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">First Name</span>
<input type="text">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Last Name</span>
<input type="text">
</label>
<label class="item item-button-right">
Photo
<button style="right: 95px;" class="button button-small button-clear" ng-click="get_gallery();">
Gallery
</button>
<button class="button button-small button-clear" ng-click="get_camera();">
Camera
</button>
</label>
</div>
</form>
The Problem is that whatever the button I hit, it always triggers get_gallery() method and never calls get_camera(). Can you someone help me what is the problem? I have also tried in other way which will look like,
<label class="item item-input item-stacked-label">
Receipt
<div>
<button class="button button-small button-clear" ng-click="get_gallery();">
Gallery
</button>
<button class="button button-small button-clear" ng-click="get_camera();">
Camera
</button>
</div>
</label>
Am I doing something wrong? What is the proper way to do it?
Change label tag to div, that will help.
This problem occurs because the use two button in a label you can use two lable or replace div instead lable like this
<form>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">First Name</span>
<input type="text">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Last Name</span>
<input type="text">
</label>
<div style="display:inline-block" class="item item-button-right">
Photo
<button style="right: 95px;" class="button button-small button-clear" ng-click="get_gallery();">
Gallery
</button>
<button class="button button-small button-clear" ng-click="get_camera();">
Camera
</button>
</div>
</div>
</form>
If you really need a button inside a label in Ionic, you can change ng-click to ng-mousedown on your button.
<label class="item item-button-right">
Photo
<button class="..." ng-mousedown="get_gallery();">
Gallery
</button>
<button class="..." ng-mousedown="get_camera();">
Camera
</button>
</label>
Below is my html I want to generate it automatically based on number of rows return by a jqgrid. and I want to calculate the values of other input box on change of the other. Please see the jsfiddle link for what I have tried
<div class="col-2">
<div class="filters padd10">
<div class="formItem" style="border-right:1px solid #4b4b4b; width:29%;">
<label>New Allocated Amount</label> <span class="formlist"><input type="text" value=""></span>
<span class="formlist"><input type="text" value=""></span>
<span class="formlist"><input type="text" value=""></span>
<span class="formlist"><input type="text" value=""></span>
<br> <span class="fright mr30">$0</span>
</div>
<div class="formItem" style="width:43%; border-right:1px solid #4b4b4b;">
<label>New Allocated Amount</label> <span class="formlist"><input type="text" value="" class="mr10" ><span class="txtAmount">(or) </span>
<input type="text" value="" style="width:30px">%</span> <span class="formlist"><input type="text" value="" class="mr10" ><span class="txtAmount">(or) </span>
<input type="text" value="" style="width:30px">%</span> <span class="formlist"><input type="text" value="" class="mr10" ><span class="txtAmount">(or) </span>
<input type="text" value="" style="width:30px">%</span> <span class="formlist"><input type="text" value="" class="mr10" ><span class="txtAmount">(or) </span>
<input type="text" value="" style="width:30px">%</span> <span class="fright" style="margin-right:100px;">$0</span>
</div>
<div class="formItem" style="width:12%; margin-right:0px">
<label>
<input type="checkbox" value="">Freeze</label> <span class="formlist mtop5"><input type="checkbox" value=""></span>
<span class="formlist mtop5"><input type="checkbox" value=""></span>
<span class="formlist mtop5"><input type="checkbox" value=""></span>
<span class=""><input type="checkbox" value=""></span>
</div>
</div>
</div>
Please see
http://jsfiddle.net/blackeyes123/Dd9Kf/