INTRO:
Providing a little context: I am trying to create workaround solutions in a HTML/CSS/JS based webticket builder.
This means I am creating online forms with a drag and drop tool that automatically generates titles, names, ids and all that in the general HTML code. So what I can't do is change the overall set up.
Every selection field I create though gives me a small textfield which is supposed to be used as a help field for this particular selection field. So for example I have a text field "mail adress" - the help text would then show "please use the format firstname.lastname#mailprovider.com" underneath it.
This "help" textbox is plain HTML, providing me with the possibility to add extra code inbetween - hence it's everything but pretty.
the html layout is not my idea, and I can only partially change it.
What I want to do:
Create an extra list with empty links, so I can use "onclick" on each item:
<!-- automatically visible -->
<!-- Checkbox im Status checked -->
<input type="checkbox" id="check" onclick="toggleBoxVisibility()" checked> Please choose which assignment type is to be requested:
<!-- Modal / Pop Up Fenster -->
<div id="mymodal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- List items as links to make them clickable -->
<ul id="myUL">
<font size="3em">
<li><a id="li1" title="item1" href="#" onclick="returncontent(this);return false;showitem1();">Item 1</a></li>
<li><a id="li2" title="item2" href="#" onclick="returncontent(this);return false;showitem2();">Item 2</a></li>
<li><a id="li3" title="item3" href="#" onclick="returncontent(this);return false;showitem3();">Item 3</a></li>
</font>
</ul>
</div>
</div>
The selection list then has 3 triggering functions:
1. returning the selected item to another textfield (works)
2. not opening a "#" site (works)
3. show further selection fields based on the selected list item (does not work)
This is basically an attempt to create a dynamic webform, as the tool itself doesn't provide such options
So this is what I additionally have:
- a fieldset with class "item1" and two textfields:
This code is copied directly from the tool, hence the intuitive ids and layout in general.
<fieldset class="item1"><legend>Item 1 Selections</legend><div id="d_000000001845952" class="field text"><label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div><div id="d_000000001844977" class="field text "><label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" /></div></fieldset>
a CSS code hiding the fieldset "item1" when the webform is opened:
.item1 {
display: none;
}
and my js functions:
The first to return selected item to a specific textfield:
<script type = "text/JavaScript">
function returncontent(elem) {
document.getElementById("f_000000001845521").value=elem.title;
document.getElementById("mymodal").style.display = "none";
document.getElementById("check").checked = false;
}
returncontent();
</script>
And the second to show me the necessary selection fields for list item 1:
<script type = "text/JavaScript">
function showitem1() {
document.getElementsByClassName("item1")[0].style.display = "block";
}
</script>
And now the latter is, what doesn't work and I don't understand why.
I have build several checkboxes that display/hide individual fields and fieldsets via ID or class so for my understanding I didn't do anything different this time except triggering two functions at once.
Here you can find a fiddle of what I am trying to do.
I do not know why you do it, but your problem will be solved by changing the order of functions in your onclick. I changed the place of return false; after showitem1()
Check workable version here
<ul id="myUL">
<font size="3em">
<li><a id="li1" title="item1" href="#" onclick="returncontent(this);showitem1();return false;">Item 1</a></li>
<li><a id="li2" title="item2" href="#" onclick="returncontent(this);showitem2();return false;">Item 2</a></li>
<li><a id="li3" title="item3" href="#" onclick="returncontent(this);showitem3();return false;">Item 3</a></li>
</font>
</ul>
I've change a couple parts of your code here but the most notable is that you can call the first (almost global type of function) from the the second function. I did also combine the three showitem functions into one and set which fieldset to show based off the clicked elements title.
You can call each function from the onclick. You would simply need to change the order of return false;, placing it at the end (or just remove it and return: false; from the function!?!).
function toggleBoxVisibility() {
if (document.getElementById("check").checked == true) {
document.getElementById("mymodal").style.display = "block";
var els = document.getElementsByClassName("item");
Array.prototype.forEach.call(els, function(el) {
el.style.display = "none";
});
} else {
document.getElementById("mymodal").style.display = "none";
}
}
toggleBoxVisibility();
function returncontent(elem) {
document.getElementById("f_000000001845521").value = elem.title;
document.getElementById("mymodal").style.display = "none";
document.getElementById("check").checked = false;
}
function showitem(elem) {
returncontent(elem);
document.getElementsByClassName(elem.title)[0].style.display = "block";
return false;
}
.item1,
.item2,
.item3 {
display: none;
}
<input id="f_000000001845521" name="id12" value="This field is set automatically, based on chosen element from the list below." />
<div class="help">
<script type="text/JavaScript">
document.getElementById("f_000000001845521").readOnly = true;
</script>
</div>
<!-- automatically visible -->
<!-- Checkbox im Status checked -->
<input type="checkbox" id="check" onclick="toggleBoxVisibility()" checked> Please choose which assignment type is to be requested:
<!-- Modal / Pop Up Fenster -->
<div id="mymodal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- List items as links to make them clickable -->
<ul id="myUL">
<font size="3em">
<li><a id="li1" title="item1" href="#" onclick="showitem(this);">Item 1</a></li>
<li><a id="li2" title="item2" href="#" onclick="showitem(this);">Item 2</a></li>
<li><a id="li3" title="item3" href="#" onclick="showitem(this);">Item 3</a></li>
</font>
</ul>
</div>
</div>
<fieldset class="item item1">
<legend>Item 1 Selections</legend>
<div id="d_000000001845952" class="field text">
<label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div>
<div id="d_000000001844977" class="field text ">
<label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" />
</div>
</fieldset>
<fieldset class="item item2">
<legend>Item 2 Selections</legend>
<div id="d_000000001845952" class="field text">
<label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div>
<div id="d_000000001844977" class="field text ">
<label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" />
</div>
</fieldset>
<fieldset class="item item3">
<legend>Item 3 Selections</legend>
<div id="d_000000001845952" class="field text">
<label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div>
<div id="d_000000001844977" class="field text ">
<label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" />
</div>
</fieldset>
document.getElementById("f_000000001845521").readOnly = true;
function toggleBoxVisibility() {
if (document.getElementById("check").checked == true) {
document.getElementById("mymodal").style.display = "block";
} else {
document.getElementById("mymodal").style.display = "none";
}
}
toggleBoxVisibility();
function returncontent(elem) {
if(elem)
document.getElementById("f_000000001845521").value = elem.title;
document.getElementById("mymodal").style.display = "none";
document.getElementById("check").checked = false;
}
returncontent();
function showitem1() {
document.getElementsByClassName("item1")[0].style.display = "block";
}
.item1 {
display: none;
}
<input id="f_000000001845521" name="id12" value="This field is set automatically, based on chosen element from the list below." />
<div class="help">
<script type="text/JavaScript">
document.getElementById("f_000000001845521").readOnly = true;
</script>
</div>
<input type="checkbox" id="check" onclick="toggleBoxVisibility()" checked> Please choose which assignment type is to be requested:
<div id="mymodal" class="modal">
<div class="modal-content">
<ul id="myUL">
<font size="3em">
<li><a id="li1" title="item1" href="javascript:void(0)" onclick="returncontent(this);showitem1();">Item 1</a></li>
<li><a id="li2" title="item2" href="javascript:void(0)" onclick="returncontent(this);showitem2();">Item 2</a></li>
<li><a id="li3" title="item3" href="javascript:void(0)" onclick="returncontent(this);showitem3();">Item 3</a></li>
</font>
</ul>
</div>
</div>
<fieldset class="item1">
<legend>Item 1 Selections</legend>
<div id="d_000000001845952" class="field text"><label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div>
<div id="d_000000001844977" class="field text "><label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" /></div>
</fieldset>
Related
My form has one dropdown menu and 4 text input boxes. When the form is submitted, I need to console.log all the values. So far no problem with the text boxes but I can't record the number selected on the drop down menu. Can someone please help thanks in advance.
This is my html:
<div class="container-of-forms">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
2
<span class="caret"></span>
</button>
<ul id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<!-- Text Input Boxes -->
<div class="container-inner">
<input class="text-input-box" id="choice1" type="text" name="" value="" placeholder="Choice 1"> <br>
<input class="text-input-box" id="choice2" type="text" name="" value="" placeholder="Choice 2"> <br>
<input class="text-input-box invisible threeChoices" id="choice3" type="text" name="" value="" placeholder="Choice 3"> <br>
<input class="text-input-box invisible fourChoices" id="choice4" type="text" name="" value="" placeholder="Choice 4">
</div>
</div>
And this is the javascript:
document.getElementById("submit").addEventListener("click", function(e) {
e.preventDefault();
var choice1 = $("#choice1").value;
var choice2 = $("#choice2").value;
var choice3 = $("#choice3").value;
var choice4 = $("#choice4").value;
var numberOfChoices = $("#dropdownMenu").value;
console.log(numberOfChoices);}
But it is not printing the numberOfChoices...please help...thanks
The issue is that we're attempting to access the value of a button which has no value attribute set.
We might suggest setting the value, but in this case as you're using a third-party control, let's just access the text inside the button instead:
var numberOfChoices = $("#dropdownMenu").text();
Note that text() will return all text of the selected node and all descendents, which in this case includes the caret span which has no inner text, thus returning just the selected "value" from the bootstrap dropdown.
I'm developing an OfficeApp with JavaScript and jQuery and it's almost complete, except for one function that does not do what it should do.
I have this html for the choicefieldgroup:
<div class="ms-ChoiceFieldGroup" id="choicefieldgroup" role="radiogroup">
<div class="ms-ChoiceFieldGroup-title">
<label class="ms-Label" id="lblSelectType">Select type:</label>
</div>
<ul class="ms-ChoiceFieldGroup-list">
<li class="ms-RadioButton">
<input tabindex="-1" type="radio" class="ms-RadioButton-input" id="radio1-amount" value="amount">
<label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
<span class="ms-Label" id="lblAmount">Amount</span>
</label>
</li>
<li class="ms-RadioButton">
<input tabindex="-1" type="radio" class="ms-RadioButton-input" id="radio1-datetime" value="datetime">
<label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
<span class="ms-Label" id="lblDateTime">Date / time</span>
</label>
</li>
<li class="ms-RadioButton">
<input tabindex="-1" type="radio" class="ms-RadioButton-input" id="radio1-year" value="year">
<label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup" id="testjaar">
<span class="ms-Label" id="lblYear">Year</span>
</label>
</li>
</ul>
</div>
In javascript I do the following:
Office.initialize = function (reason) {
$(document).ready(function () {
**$('input[id=radio1-year]').attr('checked', true);**
var ChoiceFieldGroupElements = document.querySelectorAll(".ms-ChoiceFieldGroup");
for (var i = 0; i < ChoiceFieldGroupElements.length; i++) {
new fabric['ChoiceFieldGroup'](ChoiceFieldGroupElements[i]);
}
});
};
With the bold line the option should be checked. If I check in code, the option is checked, but it is not shown in the UI. What am I doing wrong. Or must I add something extra?
Instead of the bold line I have also used the following (all with the same result):
$('#radio1-year').prop('checked', true);
I think the label is what controls the UI.
Try $('#radio1-year').siblings('label').attr('aria-checked',true);
I have a Bootstrap drop down menu that allows a user to add a check box next to an item in the drop down list. However, the user is able to add multiple check boxes - the desired behavior is that a user should only be able to select one check box. If a user has selected one check box the other check box should be removed.
$("document").ready(function() {
$('.dropdown-menu').on('click', function(e) {
if($('.checkbox').count() > 1){
if($(this).hasClass('dropdown-menu-form')) {
e.stopPropagation();
}
}
});
});
.dropdown-menu-form {
padding: 5px 10px 0;
max-height: 100px;
overflow-y: scroll;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="dropdown">
<a class="dropdown-toggle btn" data-toggle="dropdown" href="#">
Toggle dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-form" role="menu">
<li>
<label class="checkbox">
<input type="checkbox">Checkbox 1
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox">Checkbox 2
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox">Checkbox 2
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox">Checkbox 2
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox">Checkbox 2
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox">Checkbox 3
</label>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I tried to implement something with the count of the number of klass of .checkbox however that did not work. I am just looking to have the behavior if the user clicks a check box the previous check box will be removed.
Checkboxes are created to allow multiple checks, think of it as you can have this, that, and that. You are looking for a radio button. Radio buttons are treated as a you get this or you get that.
Try This
<li>
<label class="radio-btn">
<input type="radio">
Radio 1
</label>
</li>
JS
$("document").ready(function() {
$('.dropdown-menu').on('click', function(e) {
if($('.radio-btn').count() > 1){
if($(this).hasClass('dropdown-menu-form')) {
e.stopPropagation();
}
}
});
});
I am trying to pre-select premium delivery by default. I was looking on the web and really don't understand why it would not pre-select the second radio-box. Please find link to my JSfiddle
My code is also:
jQuery(document).ready(function() {
waitForDelayedContent('#checkout-shipping-method-load .input-checkout-radio .method-title:contains(Take it to my room)', function() {
jQuery('#checkout-shipping-method-load .input-checkout-radio:not(.mtC) .method-title:contains(Take it to my room)').click();
jQuery('#checkout-shipping-method-load .input-checkout-radio:not(.mtC):has(.method-title:contains(Take it to my room)) .radio').click();
jQuery('#checkout-shipping-method-load .input-checkout-radio:has(.method-title:contains(Take it to my room))').addClass('mtC');
});
});
<div id="checkout-shipping-method-load">
<div class="sp-methods">
<h3 class="title">Delivery Option</h3>
<p>You must select a delivery option.</p>
<ul>
<li class="delivery-method">
<div class="input-checkout-radio">
<input checked="checked" class="input-radio" id="s_method_standard" name="shipping_method" type="radio" value="paragon_customrate_standard">
<label class="radio-label" for="s_method_standard"><span class="radio"></span> <span class="method-title">FREE Take it to
my door</span>
</label>
</div>
</li>
<li class="delivery-method">
<div class="input-checkout-radio">
<input class="input-radio" id="s_method_premium" name="shipping_method" type="radio" value="paragon_customrate_premium">
<label class="radio-label" for="s_method_premium"><span class="radio"></span> <span class="method-title"><span class=
"price"><span class="currency">£</span>39</span>Take it to my room</span>
</label>
</div>
</li>
</ul>
</div>
</div>
It is because the first radio box has checked="check". Move that to the second radio box to make it work. No need for JavaScript. See this updated fiddle: http://jsfiddle.net/n5h65n73/
Or, if you really need to do it with JavaScript:
$("#s_method_premium").prop("checked", true)
The issue is within your HTML. You have the checked="checked" attribute set on the first radio input. So if you remove that attribute and move it to the second one, it'll work as you want.
<div id="checkout-shipping-method-load">
<div class="sp-methods">
<h3 class="title">Delivery Option</h3>
<p>You must select a delivery option.</p>
<ul>
<li class="delivery-method">
<div class="input-checkout-radio">
<input class="input-radio" id="s_method_standard" name="shipping_method" type="radio" value="paragon_customrate_standard">
<label class="radio-label" for="s_method_standard"><span class="radio"></span> <span class="method-title">FREE Take it to
my door</span>
</label>
</div>
</li>
<li class="delivery-method">
<div class="input-checkout-radio">
<input checked class="input-radio" id="s_method_premium" name="shipping_method" type="radio" value="paragon_customrate_premium">
<label class="radio-label" for="s_method_premium"><span class="radio"></span> <span class="method-title"><span class=
"price"><span class="currency">£</span>39</span>Take it to my room</span>
</label>
</div>
To do this using jQuery, here's the code snippet:
$('#s_method_premium').attr('checked', 'true');
The basic explanation is that you are using the attr method of jQuery to modify the property (i.e., the first argument) with the desired value (i.e., the second argument). And then necessity for both lines of code is to remove the first checked before setting the second one.
Does that help?
I am working on a webpage. In one page we have 3 tabs A B and C. each tab contains some table with dynamic content and a Refresh button to reload the page(here we use window.location.reload() as we get the data as a single dump from data model).
The issue i'm facing is that even if i reload the tab C my page is going back to tab A. I need a method to store the status of which tab is active before reload.
The tab is called within an iframe with id 'mainFrame'
HTML:
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Tab A</label>
<div id="tab-content1" class="tab-content">
<div class="btn-div">
<input type="button" value="Refresh" onclick="refresh();">
</div>
<table class="x_table" >
</table>
</li>
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Tab B</label>
<div id="tab-content1" class="tab-content">
<div class="btn-div">
<input type="button" value="Refresh" onclick="refresh();">
</div>
<table class="x_table" >
</table>
</li>
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Tab C</label>
<div id="tab-content1" class="tab-content">
<div class="btn-div">
<input type="button" value="Refresh" onclick="refresh();">
</div>
<table class="x_table" >
</table>
</li>
</ul>
SCRIPT:
$(function(){
$(window ).unload(function() {
sessionStorage.setItem("tab1", $('#tab1').checked);
sessionStorage.setItem("tab2", $('#tab3').checked);
sessionStorage.setItem("tab3", $('#tab3').checked);
});
$(window).load(function() {
if (tab1){
document.getElementById("tab1").checked="true";
} else if (tab2){
document.getElementById("tab2").checked="true";
} else if (tab3){
document.getElementById("tab3").checked="true";
}
});
});
Thanks in advance
Store the active tab status in session, localStorage or as http request parameter and based on that hide/show the tab content on page load.
For example, if it is localStorage, then,use:
Before reload page:
localStorage.setItem("ActiveTabID" , "tab2");
Then on load:
$(window).load(function() {
var activeTab = localStorage.getItem("ActiveTabID");
if(activeTab=="tab1"){
$('#tab1Content').show();
$('#tab2Content').hide();
$('#tab3Content').hide();
}else if(activeTab=="tab2"){
$('#tab2Content').show();
$('#tab1Content').hide();
$('#tab3Content').hide();
}
likewise tab3, also show if it is active.