I am new in php, html5 and css. Hope you can help me with my problem.
I style it using css. Here are my codes:
<form method="post" name="testform" action="">
<a href="#modal"> <!-- when the input textbox was clicked, modal will pop up -->
<input disabled type="text" name="test" placeholder="test" value="">
</a>
<div class="modalwrapper" id="modal"> <!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="4">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<input class="btn1" type="submit" value="Submit"/>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
</form>
Here is my css code for it.
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
My problem is that when i clicked submit, it doesn't close the modal.
I try redirecting it on the parent window but nothing happens, it doesn't close.
I also have another question concerning how to count how many checkbox were checked using PHP. If 1 checkbox was checked, it will display the value of it and if more than 2 were checked it will echo a value "MORE"
Hope anyone can help me please.
If my information are not enough, please let me know so i can update it.
I want to learn more. Thanks in advance.
Make sure you actually follow the proper html format of Bootstrap modals. Pay attention to data and role attributes. Note how buttons that close modal have those attributes.
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
https://getbootstrap.com/javascript/#modals
To open and close your modal you have to use JS. I recommend you to use the jQuery library (Check out this article to learn how to use jQuery in your JS). With that, you can simply close the modal with .fadeOut():
$("#idofyourbutton").click(function(){ $("#idofyourmodal").fadeOut(); });
To count all your checked checkboxes, you can use i.e. this:
var l = $("input[type='checkbox']:checked").length;
After that, you can use if else to set the content of your input-field.
Related
I am trying to use if and else to change the content of a div in my Wordpress site. What I want is:
I have a set of 8 buttons and want each of them to place a specific data (shortcode) in a div in my page. So,lets say, when the user clicks button 1, he sees data 1 in a content area of my site, and when he clicks button 2, data 1 disappears and data 2 is shown.
As I am very new to Java and PHP, I am not sure the best approach to solve my problem. I have tried using JQuery with hide and show, but I figured it would be hell to update the data later on. Then I thought about using If/Else or Variables. As I am very noob in both solutions, I am trying the If/Else solution first as it's concept sounds easier.
I have tried the code below, but it is not working. The data in the div is not changing and I just can't figure out why.
/* Style */
#content {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
#btn-a {
background-color:blue;
color:yellow;
}
#btn-b {
background-color:red;
color:yellow;
}
/* HTML */
<button id="btn-a" onclick="myFunction()">Button A</button>
<button id="btn-b" onclick="myFunction()">Button B</button>
<div id="content"></div>
/* Script */
function myFunction() {
if(document.getElementById('btn-a').clicked == true {
document.getElementById("content").innerHTML = "Yay A! [shortcode-A]";}
else-if(document.getElementById('btn-b').clicked == true {
document.getElementById("content").innerHTML = "Yay B! [shortcode-B]";}
}
As I've said, I am very new to coding. So I appreciate any help in my code or suggestion about a new approach I should try.
Pardon my French and Thx.
Thank you, prettyinpink. Following your suggestions and some W3Schools examples I've got a new code that works better towards what I need. But I am still having a problem.
When I click on the third group of buttons (Product Validity), they show the content as they are supposed to, but the buttons also disappear right away. I would like they to stay visible until a new button is pressed.
How do I make it happen?
To perform the problem, please click on the following buttons: Product 2 > Type 1 > 12 Months.
// Make first group of buttons show/hide content about product plus second group of buttons
function openTab(evt, openTab, subTab) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace("active", "");
}
if(subTab) {
var parent = evt.currentTarget.closest('.tabcontent');
parent.style.display = "block";
parent.className += " active";
}
document.getElementById(openTab).style.display = "block";
evt.currentTarget.className += " active";
}
// Make third group of buttons show only when second group is clicked
const btns = document.querySelectorAll('input');
const innerContent = document.querySelectorAll('.expdate');
btns.forEach(btn=>{
btn.addEventListener('click', ()=>{
innerContent.forEach(content=>content.style.display = 'none');
document.querySelector('.expdate[data-content='+btn.dataset.btn+']').style.display = "block";
});
});
// Get the element with id="" and click on it to go as default open
document.getElementById("ecpf").click();
/* Style tab */
.tab {
overflow: hidden;
border: none;
background-color: #ffff;
}
/* Style tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: none;
}
.tabcontent img{
padding: 5px;
margin: 5px 10px 5px 5px;
width: 250px;
float: left;
}
/* Tab fadding effect */
.tabcontent {
animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
/* Go from zero to full opacity */
#keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
/* Style columns inside tabcontent */
.column {
float: left;
}
.left {
width: 68%;
}
.right {
width: 22%;
}
/* Style price box */
.pricebox {
display: block;
width: 250px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.02), 0 8px 8px 0 rgba(0, 0, 0, 0.08);
text-align: center;
}
.pricebox img{
display: block;
width: 65%;
padding: 0px 20px 0px 20px;
margin: 20px;
}
/* Style a button */
a.button {
background-color: #43689B;
width:60%;
text-align: center;
float: center;
display: inline-block;
cursor: pointer;
padding: 8px 0 8px 0;
margin: 3px 3px 20px 3px;
border-radius: 4px;
transition: 0.3s;
font-size: 14px;
color: #ffff;
}
a.button:hover {
background-color: #22386F;
}
/*Style radio buttons */
input[type=radio] {
display: none;
}
input[type=radio] + label {
background-color: #43689B;
width:24%;
text-align: center;
float: left;
cursor: pointer;
padding: 8px 0 8px 0;
margin: 3px 3px 3px;
border-radius: 4px;
transition: 0.3s;
font-size: 14px;
color: #ffff;
}
input[type=radio] + label:hover {
background-color: #22386F;
}
input[type=radio]:checked + label {
background-color: #3A7CD7;
}
<!-- Start Products -->
<div class="tab">
<input type="radio" class="btn-check tablinks" name="produtos" id="ecnpj" autocomplete="off" onclick="openTab(event, 'ecnpjcontent')">
<label class="btn btn-secondary" for="ecnpj">Product1</label>
<input type="radio" class="btn-check tablinks" name="produtos" id="ecpf" autocomplete="off" checked onclick="openTab(event, 'ecpfcontent')">
<label class="btn btn-secondary" for="ecpf">Product2</label>
<input type="radio" class="btn-check tablinks" name="produtos" id="enfe" autocomplete="off" onclick="openTab(event, 'enfecontent')">
<label class="btn btn-secondary" for="enfe">Product3</label>
</div>
<!-- Start Product Content -->
<div id="ecpfcontent" class="tabcontent">
<div class="row">
<img src="http://localhost:10005/wp-content/uploads/2023/02/product.png">
<h3>Product Name2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
<div class="column left">
<!-- Start Product Type 1 -->
<h3>Choose Product Type</h3>
<div class="tab">
<input type="radio" class="btn-check" data-btn="expdateecpfa1arq12m" name="tipos" id="a1arquivo" autocomplete="off" checked onclick="openTab(event, 'priceecpfa1arq12m', true)">
<label class="btn btn-secondary" for="a1arquivo">Type1</label>
<input type="radio" class="btn-check" data-btn="expdateecpfa3sm12m" name="tipos" id="a3semmidia" autocomplete="off" onclick="openTab(event, 'expdateecnpjasm12m', true)">
<label class="btn btn-secondary" for="a3semmidia">Type2</label>
<input type="radio" class="btn-check" name="tipos" id="a3cartao" autocomplete="off" onclick="openTab(event, 'type3', true)">
<label class="btn btn-secondary" for="a3cartao">Type3</label>
</div>
<!-- Start Validity Product 2 Type 1 -->
<div class="tab expdate" data-content="expdateecpfa1arq12m">
<hr style="width:75%; text-align:center; margin-top:20px; margin-bottom:20px;">
<h3>Choose Product Validity</h3>
<input type="radio" class="btn-check" name="validade" id="12meses" autocomplete="off" checked onclick="openTab(event, 'priceecpfa1arq12m', true)">
<label class="btn btn-secondary" for="12meses">12 Months</label>
<input type="radio" class="btn-check" name="validade" id="24meses" autocomplete="off" onclick="openTab(event, 'doel12', true)">
<label class="btn btn-secondary" for="24meses">24 Months</label>
</div>
<!-- Start Validity Product 2 Type 2 -->
<div class="tab expdate" data-content="expdateecpfa3sm12m">
<hr style="width:75%; text-align:center; margin-top:20px; margin-bottom:20px;">
<h3>Choose Product Validity</h3>
<input type="radio" class="btn-check" name="validade" id="12meses" autocomplete="off" checked onclick="openTab(event, 'priceecpfa1arq12m', true)">
<label class="btn btn-secondary" for="12meses">12 Months</label>
<input type="radio" class="btn-check" name="validade" id="18meses" autocomplete="off" onclick="openTab(event, 'doel12', true)">
<label class="btn btn-secondary" for="24meses">18 Months</label>
<input type="radio" class="btn-check" name="validade" id="24meses" autocomplete="off" onclick="openTab(event, 'doel12', true)">
<label class="btn btn-secondary" for="24meses">24 Months</label>
</div>
</div>
<!-- Start Price Box -->
<!-- Price Product2-type1-validity1 -->
<div class="column right pricebox">
<div id="priceecpfa1arq12m" class="tabcontent">
<img src="http://localhost:10005/wp-content/uploads/2023/02/ecpf-pagina-de-produto.png">
<p>Product Name 1 | Product Type 1 | 12 Meses</p>
<hr style="width:60%; text-align:center; margin-top:15px; margin-bottom:15px;">
<h4><s>$ 229,00</s></h4>
<h1>$ 160,30</h1>
BUY NOW
</div>
</div>
<!-- Price Product2-type1-validity3 -->
<div class="column right pricebox">
<div id="doel12" class="tabcontent">
<img src="http://localhost:10005/wp-content/uploads/2023/02/ecpf-pagina-de-produto.png">
<p>Product Name 1 | Product Type 1 | 24 Meses</p>
<hr style="width:60%; text-align:center; margin-top:15px; margin-bottom:15px;">
<h4><s>$ 155,00</s></h4>
<h1>$ 108,00</h1>
BUY NOW
</div>
</div>
<!-- Price Product2-type2-validity1 -->
<div class="column right pricebox">
<div id="priceecpfaa3sm12m" class="tabcontent">
<img src="http://localhost:10005/wp-content/uploads/2023/02/ecpf-pagina-de-produto.png">
<p>Product Name 1 | Product Type 2 | 12 Meses</p>
<hr style="width:60%; text-align:center; margin-top:15px; margin-bottom:15px;">
<h4><s>$ 229,00</s></h4>
<h1>$ 160,30</h1>
BUY NOW
</div>
</div>
<!-- Price Product2-type1-validity2 -->
<div class="column right pricebox">
<div id="doel12" class="tabcontent">
<img src="http://localhost:10005/wp-content/uploads/2023/02/ecpf-pagina-de-produto.png">
<p>Product Name | Product Type | 24 Meses</p>
<hr style="width:60%; text-align:center; margin-top:15px; margin-bottom:15px;">
<h4><s>$ 155,00</s></h4>
<h1>$ 108,00</h1>
BUY NOW
</div>
</div>
</div>
</div>
<!-- Start Product Type 1 -->
<div id="ecnpjcontent" class="tabcontent">
<p> Replica </p>
</div>
For school homework, I'm creating a single page with another student. Our teacher gave us an HTML-File to clone some of the components for our own project, so that we don't have to write it from scratch. We want to create our own .js file with some listeners for the components we take from her file.
The below code produces a label called "keywords" with a question mark icon to its right and a text field further right. A click on the question mark icon opens a popup window with some options and the text field allows comma-separated strings as "keywords". Our problem is that on our HTML-Page, all these elements show up with no problem, but the popup window won't show up when we click on the question mark icon and the text field is also not activated when we click on it.
We looked at our teacher's HTML file and played on it a bit. We found out, that when we remove her js file as a script the same thing happens on her HTML file too. So we looked into her js file and checked the 55.000 lines long js file for some reference to these elements and found nothing. So we don't know, why ours doesn't work. The console shows no errors in the output when we open our HTML file. How can we make these elements respond to clicks? where should we look for errors, mistakes?
<div class="form-group">
<label class="control-label col-md-4 col-lg-3" for="offer_tag_list">
<div class="inline-help form-label" data-help="<b>You would like to use keywords:</b> In that case use one or more words for each keyword and use a comma to seperate.
br>
<b>You want to remove a keyword?</b> Then click on the <i class="fa fa-remove"></i> symbol at the end of that keyword.
<div class="panel panel-default" id="feedback-form">
<div class="panel-heading">
<h4 class="panel-title">
<i class="fa fa-question-circle"></i> Was that information useful? </h4>
</div>
<div class="panel-body">
<form class="feedback" role="form" id="new_feedback" action="/feedbacks" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓" />
<div class="form-group"><textarea placeholder="You can write comments here." class="form-control" name="feedback[comment]" id="feedback_comment">
</textarea></div>
<input type="hidden" value="/offers/new" name="feedback[context]" id="feedback_context" />
<input type="hidden" value="offers.tag_list" name="feedback[help_key]" id="feedback_help_key" />
<div class="actions"> <input type="submit" name="feedback[helpful]" value="Ja" class="btn btn-default" data-disable-with="Ja" /> <input type="submit" name="feedback[helpful]" value="Nein" class="btn btn-default" data-disable-with="Nein" /></div></form> <div class="hidden response">
Thank you for your Feedback!
</div>
</div>
</div>
" data-heading="How to use keywords?" data-help-key="offers.tag_list">
<i class="fa fa-question-circle-o"></i>
</div>Keywords
</label>
<div class="col-md-8 col-lg-9">
<div class="bootstrap-tagsinput">
<span class="twitter-typeahead" style="position: relative; display: inline-block;">
<input type="text" class="tt-hint" readonly="" spellcheck="false" tabindex="-1" dir="ltr" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">
<input type="text" placeholder="" class="tt-input" spellcheck="false" dir="auto" aria-activedescendant="" aria-owns="undefined_listbox" role="combobox" aria-readonly="true" aria-autocomplete="list" style="">
<span role="status" aria-live="polite" style="position: absolute; padding: 0px; border: 0px; height: 1px; width: 1px; margin-bottom: -1px; margin-right: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap;"></span>
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 28px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
<div role="listbox" class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
<div role="presentation" class="tt-dataset tt-dataset-tags"></div>
</div>
</span>
</div>
<input value="" data-use-tagsinput="true" class="form-control" type="text" name="offer[tag_list]" id="offer_tag_list" style="display: none;">
</div>
</div>
I need help on JavaScript condition.
Here is my working code:
$(document).on("click", "input[name='txt1']", function() {
$('#modal1').show();
});
$(document).on("click", "input[name='txt2']", function() {
$('#modal2').show();
});
$(document).on("click", ".btn1", function() {
$('#modal1').hide();
});
$(document).on("click", ".btn2", function() {
$('#modal2').hide();
});
$(".radio").change(function() {
$(".radio").prop('checked', false);
$(this).prop('checked', true);
});
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="testform" action="">
<a href="#modal1">
<!-- when the input textbox was clicked, modal will pop up -->
Label 1
<input readonly type="text" name="txt1" placeholder="inputTest">
</a>
<br>
<br>
<a href="#modal2">
<!-- when the input textbox was clicked, modal will pop up -->
Label 2
<input readonly type="text" name="txt2" placeholder="inputTest">
</a>
<!-- modal starts here -->
<div class="modalwrapper" id="modal1">
<!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="4">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<button class="btn1" type="button" value="Submit">Submit</button>
</div>
</div>
<!-- close modalcol1 -->
</div>
<!-- close modalcontainer -->
<div class="overlay"></div>
</div>
<!-- close modalwrapper -->
<div class="modalwrapper" id="modal2">
<!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Mango</label>
<input class="radio" type="checkbox" name="fruit1" value="1">
<div class="clear"></div>
<label>Banna</label>
<input class="radio" type="checkbox" name="fruit2" value="2">
<div class="clear"></div>
<label>Grapes</label>
<input class="radio" type="checkbox" name="fruit3" value="3">
<div class="clear"></div>
<div class="savebutton">
<button class="btn2" type="button" value="Submit">Submit</button>
</div>
</div>
<!-- close modalcol1 -->
</div>
<!-- close modalcontainer -->
<div class="overlay"></div>
</div>
<!-- close modalwrapper -->
</form>
On my Label 1 checkbox, you can have multiple checked. What I want here is that if checkbox checked is greater than 1, it will echo the value Multiple inside my textbox.
Please explain to me how your code works so that I can used in the future.
You can use .length to get the number of items found by a selector, so you can write:
if ($("#modal1 :checkbox:checked").length > 1) {
$("input[name=txt1]").val("multiple");
}
$(document).on("click", "input[name='txt1']", function() {
$('#modal1').show();
});
$(document).on("click", "input[name='txt2']", function() {
$('#modal2').show();
});
$(document).on("click", ".btn1", function() {
if ($('#modal1 :checkbox:checked').length > 1) {
$('input[name=txt1]').val('multiple');
} else {
$('input[name=txt1]').val($('#modal1 :checkbox:checked').val());
}
$('#modal1').hide();
});
$(document).on("click", ".btn2", function() {
$('#modal2').hide();
});
$(".radio").change(function() {
$(".radio").prop('checked', false);
$(this).prop('checked', true);
});
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0, 0, 0, .8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 {
display: table-cell;
}
.clear {
clear: both;
}
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="testform" action="">
<a href="#modal1">
<!-- when the input textbox was clicked, modal will pop up -->
Label 1
<input readonly type="text" name="txt1" placeholder="inputTest">
</a>
<br>
<br>
<a href="#modal2">
<!-- when the input textbox was clicked, modal will pop up -->
Label 2
<input readonly type="text" name="txt2" placeholder="inputTest">
</a>
<!-- modal starts here -->
<div class="modalwrapper" id="modal1">
<!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="4">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<button class="btn1" type="button" value="Submit">Submit</button>
</div>
</div>
<!-- close modalcol1 -->
</div>
<!-- close modalcontainer -->
<div class="overlay"></div>
</div>
<!-- close modalwrapper -->
<div class="modalwrapper" id="modal2">
<!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Mango</label>
<input class="radio" type="checkbox" name="fruit1" value="1">
<div class="clear"></div>
<label>Banna</label>
<input class="radio" type="checkbox" name="fruit2" value="2">
<div class="clear"></div>
<label>Grapes</label>
<input class="radio" type="checkbox" name="fruit3" value="3">
<div class="clear"></div>
<div class="savebutton">
<button class="btn2" type="button" value="Submit">Submit</button>
</div>
</div>
<!-- close modalcol1 -->
</div>
<!-- close modalcontainer -->
<div class="overlay"></div>
</div>
<!-- close modalwrapper -->
</form>
I'm having a hard time of thinking how am I going to save the values taken from the checkbox (came from "modalForm").
I have 2 forms here. My "mainform" and "modalForm".
This codes are similar to my program, I just replace the values.
My program works like this. I have a search bar before this, searching unique id and after searching it, their details will be loaded here.
If you click the textbox, a modal will pop up containing checkboxes. If one checkbox is checked, its label beside it will be the one to be shown on the textbox. When two or more checkbox were checked, a word "multiple" will be shown in the UI.
Value(s) will be inserted/updated to the database.
In my case here, instead of label, value is the one showing on the textbox.
Can you help me how can I store the array that i used into database and how can I fetch their values once it was loaded again.
My working fiddle: https://jsfiddle.net/8bf3vjuk/
I'm having a hard time here because here are two forms.
testing.php
<form method="post" name="mainform" action="">
<label>Sports</label>
<a href="#modal" id="done"> <!-- when the input textbox was clicked, modal will pop up -->
<input disabled type="text" id="test" name="test" placeholder="test" value="">
<input class="hb_button3" type="submit" id="modalbutton" value="save"> <!-- once submit value taken on the checkbox will be save to the system database -->
</a>
</form>
<form method="post" name="modalForm" id="modalForm" action="testing.php">
<div class="modalwrapper" id="modal"> <!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Basketball </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Baseball </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Soccer </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Volleyball </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="4">
<div class="clear"></div>
<label>DOTA :)</label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<input class="btn1" id="submit" type="submit" value="Submit"/>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
</form>
here is my styles.css
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
my javascript code
$(document).ready(function(){
$("#done").click(function(e) {
// alert('ok');
$("#modal").fadeIn();
// e.preventDefault();
});
$("#submit").click(function(e) {
var checked = [];
i=0;
temp=""
$("input[name='test_modal[]']:checked").each(function ()
{ temp=$(this).val();
i++;
checked.push($(this).val());
});
if (i==1)
$("#test").val(temp);
else if (i>1)
$("#test").val('multiple');
else if (i==0)
$("#test").val('nothing');
$("#modal").fadeOut();
// alert($("#do").val())
e.preventDefault();
});
});
Hope you can help me guys. If you guys can suggest to replace my javascript by using any php statement like if condition, I will try to test it.
Many thanks.
I reused some of the code from a site and made a shopping cart accordion module. I have the whole code as a pen on codepen.
Here is the link for the pen: http://codepen.io/applecool/pen/YXaJLa
<div class="summary">
<button class="expand btn btn-lg">Collapse All for Summary</button>
</div>
HTML for button above : I added a button at the bottom called as "Collapse All for Summary". The purpose of this button: When a user clicks on the button, it should open all the accordion tabs and when clicked on it again, should close the accordion tabs. [i.e., a typical toggle functionality].
I wrote a small javascript function to make the accordion tabs toggle but it is very buggy. It does the job perfectly but the problem is, once I click on the button, the general click on the tab doesn't work. i.e., when you open up the codepen and click on the accordion tab, it smoothly opens up and closes. But after adding the toggle button functionality, you fire up the page, click on the "Collapse All for Summary" button, the accordion tabs work fine. Now, when you try to click on any of the closed or opened accordion tabs, the tab neither opens nor closes. I think the problem is definitely with the changing of classes which I am doing in the javascript with the CSS.
Script:
$('.expand').click(function(){
if($('.accordionItem.is-collapsed').css('max-height')== '0px'){
$('.accordionItem.is-collapsed').css({
'max-height': '900px'
});
}else if($('.accordionItem.is-collapsed').css('max-height')== '900px'){
$('.accordionItem.is-collapsed').css({
'max-height': '0px'
});
}
});
CSS specific to the above script and the button div:
.accordionItem.is-collapsed{
max-height: 0px;
}
Any help on this would be hugely appreciated. If there is any work around, I can gladly follow that too. Please let me know what idiotic mistake I am doing here. :)
Thank you.
Cheers,
.SH
I edited your code a bit to include the expand/collapse all functionality. I think it's sloppy and you should clean it up before implementing, but it gets the job done.
The additions utilize arrays to loop over either one item or all items based on whether you click an individual item or the expand/collapse all button. The good thing about this is that it's the same as the original code, but can handle toggling the classes on multiple items.
I put some comments in the JavaScript that explains more.
//uses classList, setAttribute, and querySelectorAll
//if you want this to work in IE8/9 youll need to polyfill these
(function() {
var d = document,
accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
setAria,
setAccordionAria,
switchAccordion,
touchSupported = ('ontouchstart' in window),
pointerSupported = ('pointerdown' in window);
skipClickDelay = function(e) {
e.preventDefault();
e.target.click();
}
setAriaAttr = function(el, ariaType, newProperty) {
el.setAttribute(ariaType, newProperty);
};
setAccordionAria = function(el1, el2, expanded) {
switch (expanded) {
case "true":
setAriaAttr(el1, 'aria-expanded', 'true');
setAriaAttr(el2, 'aria-hidden', 'false');
break;
case "false":
setAriaAttr(el1, 'aria-expanded', 'false');
setAriaAttr(el2, 'aria-hidden', 'true');
break;
default:
break;
}
};
//function
switchAccordion = function(e) {
e.preventDefault();
var questions = [],
answers = [];
//if expand-all button is clicked, then push all questions and answers into respective arrays
if($(e.target).hasClass('expand')) {
$('.accordion-title').each( function(index) {
questions.push(this);
answers.push(this.parentNode.nextElementSibling);
});
}
//else if an individual item is clicked, then push its question and answer into respective arrays
else {
questions.push(e.target);
answers.push(e.target.parentNode.nextElementSibling);
}
//original code wrapped in "for" loop to handle single item or all items
for (var i = 0, len = questions.length; i < len; i++) {
var thisQuestion = questions[i];
var thisAnswer = answers[i];
if (thisAnswer.classList.contains('is-collapsed')) {
setAccordionAria(thisQuestion, thisAnswer, 'true');
} else {
setAccordionAria(thisQuestion, thisAnswer, 'false');
}
thisQuestion.classList.toggle('is-collapsed');
thisQuestion.classList.toggle('is-expanded');
thisAnswer.classList.toggle('is-collapsed');
thisAnswer.classList.toggle('is-expanded');
thisAnswer.classList.toggle('animateIn');
}
};
for (var i = 0, len = accordionToggles.length; i < len; i++) {
if (touchSupported) {
accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);
}
if (pointerSupported) {
accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);
}
accordionToggles[i].addEventListener('click', switchAccordion, false);
}
//add listener for the expand-all button
$('.expand').on('click', switchAccordion);
})();
#import url(http://fonts.googleapis.com/css?family=Libre+Baskerville);
* {
box-sizing: border-box;
border-radius: 5px;
}
body {
font-family: 'Libre Baskerville';
}
.heading-primary {
font-size: 2em;
padding: 2em;
text-align: center;
}
.accordion dl,
.accordion-list {
border: 1px solid #ddd;
}
.accordion dl:after,
.accordion-list:after {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #099DF6;
}
.accordion dd,
.accordion__panel {
background-color: #eee;
font-size: 1em;
line-height: 1.5em;
}
.accordion p {
padding: 1em 2em 1em 2em;
}
.accordion {
position: relative;
background-color: #eee;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 2em 0 2em 0;
}
.accordionTitle,
.accordion__Heading {
background-color: #099DF6;
/*text-align: center; */
text-indent: 3px;
font-weight: 700;
padding: 2em;
display: block;
text-decoration: none;
color: #fff;
-webkit-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
border-bottom: 1px solid #30bb64;
}
.accordionTitle:before,
.accordion__Heading:before {
content: "+";
font-size: 1.5em;
line-height: 0.9em;
float: left;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover,
.accordion__Heading:hover {
background-color: #38CC70;
}
.accordionTitleActive,
.accordionTitle.is-expanded {
background-color: #38CC70;
}
.accordionTitleActive:before,
.accordionTitle.is-expanded:before {
-webkit-transform: rotate(-225deg);
-ms-transform: rotate(-225deg);
transform: rotate(-225deg);
}
.accordionItem {
height: auto;
overflow: auto;
max-height: 900px;
-webkit-transition: max-height 1s;
transition: max-height 1s;
}
#media screen and (min-width: 48em) {
.accordionItem {
max-height: 900px;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
}
.accordionItem.is-collapsed {
max-height: 0;
}
.no-js .accordionItem.is-collapsed {
max-height: 900px;
}
.animateIn {
-webkit-animation: accordionIn 0.65s normal ease-in-out both 1;
animation: accordionIn 0.65s normal ease-in-out both 1;
}
.animateOut {
-webkit-animation: accordionOut 0.75s alternate ease-in-out both 1;
animation: accordionOut 0.75s alternate ease-in-out both 1;
}
#-webkit-keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
}
}
#keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
}
}
/*label styles */
.label-style {
float: left;
margin-right: 15px;
padding-top: 5px;
padding-left: 100px;
}
/* form headings */
.headings {
text-align: center;
font-weight: bold;
}
/* button styles */
.button-container {
text-align: center;
margin-bottom: 5px;
}
/* position of the hint */
.hint {
display: inline-block;
position: relative;
margin-left: 0.5em;
margin-top: 0.3em;
}
/* background style for 'i' */
.hint-icon {
background: #099DF6;
border-radius: 10px;
cursor: pointer;
display: inline-block;
font-style: normal;
font-family: 'Libre Baskerville';
height: 20px;
line-height: 1.3em;
text-align: center;
width: 20px;
}
/* hint icon hover style */
.hint-icon:hover {
background: #1f8ac9;
}
/* Displays the hint. important! Do not remove. */
.hint:hover .hint-description,
.hint:focus .hint-description {
display: inline-block;
}
/* position of the hint */
.hint-description {
display: none;
background: #3b3b3b;
border: 1px solid #099DF6;
border-radius: 3px;
font-size: 0.8em;
color: #ffffff;
font-weight: bold;
/*padding: 1em; */
position: absolute;
left: 30px;
top: -15px;
width: 180px;
height: auto;
}
/* styling for the arrow */
.hint-description:before,
.hint-description:after {
content: "";
position: absolute;
left: -11px;
top: 15px;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #099DF6;
}
/* overlay styling */
.hint-description:after {
left: -10px;
border-right-color: #3b3b3b;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Used some part of the code from Chris Wright (http://codepen.io/chriswrightdesign/)'s Pen -->
<div class="container">
<h1 class="heading-primary">Accordion Checkout Form Version 0.1 </h1>
<div class="accordion">
<dl>
<!-- description list -->
<dt>
<!-- accordion tab 1 - Delivery and Pickup Options -->
Delivery and Pickup Options
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true">
<p>One can insert a div here and add the product image and the description of the product. Quantity, Cost.</p>
</dd>
<!--end accordion tab 1 -->
<dt>
<!-- accordion tab 2 - Shipping Info -->
Shipping Information
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true">
<div class="container-fluid" style="padding-top: 20px;">
<p class="headings">Shipping Address</p>
<form class="main-container">
<div class="row">
<div class="col-xs-4">
<label for="fullname" class="label-style">Full Name</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="fullname" class="form-control" placeholder="Enter your full name" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your full name</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="companyname" class="label-style">Company Name</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="companyname" class="form-control" placeholder="Enter Company Name (optional)" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your Company name</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="phonenumber" class="label-style">Phone Number</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="phonenumber" class="form-control" placeholder="Enter Phone Number" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">In (555)5555-555 Format</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="address-line1" class="label-style">Address Line 1</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line1" class="form-control" placeholder="Enter Address" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Address Line 1</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="address-line2" class="label-style">Line 2</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line2" class="form-control" placeholder="Apt, Suite, Bldg (optional)" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Address Line 2</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="city" class="label-style">City</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="city" class="form-control" placeholder="Enter City" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your City</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="state" class="label-style">State</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="state" class="form-control" placeholder="Enter State" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Ex: Indiana as IN</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="country" class="label-style">Country</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="country" class="form-control" placeholder="Enter Country" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your country</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="zipcode" class="label-style">Zip Code</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="zipcode" class="form-control" placeholder="Enter Zip Code" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter ZipCode.</p>
</div>
</div>
<div class="button-container">
<button class="btn btn-success" type="submit">Submit</button>
<button class="btn btn-warning" type="reset">Reset</button>
</div>
</form>
</div>
</dd>
<!-- end accordion tab 2 -->
<dt>
<!-- accordion tab 3 - Payment Info -->
Payment Information
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion3" aria-hidden="true">
<div class="container-fluid" style="padding-top: 20px;">
<p class="headings">Billing Information</p>
<form class="main-container">
<div class="row">
<div class="col-xs-4">
<label for="fullname" class="label-style">Full Name</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="fullname" class="form-control" placeholder="Enter your full name" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your full name</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="companyname" class="label-style">Company Name</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="companyname" class="form-control" placeholder="Enter Company Name (optional)" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your Company name</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="phonenumber" class="label-style">Phone Number</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="phonenumber" class="form-control" placeholder="Enter Phone Number" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">In (555)5555-555 Format</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="address-line1" class="label-style">Address Line 1</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line1" class="form-control" placeholder="Enter Address" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Address Line 1</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="address-line2" class="label-style">Line 2</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line2" class="form-control" placeholder="Apt, Suite, Bldg (optional)" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Address Line 2</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="city" class="label-style">City</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="city" class="form-control" placeholder="Enter City" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your City</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="state" class="label-style">State</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="state" class="form-control" placeholder="Enter State" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Ex: Indiana as IN</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="country" class="label-style">Country</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="country" class="form-control" placeholder="Enter Country" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your country</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="zipcode" class="label-style">Zip Code</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line2" class="form-control" placeholder="Enter Zip Code" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter ZipCode.</p>
</div>
</div>
<div class="button-container">
<button class="btn btn-success" type="submit">Submit</button>
<button class="btn btn-warning" type="reset">Reset</button>
</div>
</form>
</div>
</dd>
<!-- end accordion tab 3 -->
</dl>
<!-- end description list -->
</div>
<!-- end accordion -->
</div>
<!-- end container -->
<div class="summary">
<button class="expand btn btn-lg">Expand/Collapse All for Summary</button>
</div>
You should change the elements css class using javascript (.toggleClass is my favorite way to do so), and put the relevant max-height value on your css like so:
** JS **
$('.expand').click(function(){
$('.accordionItem').toggleClass('is-collapsed');
});
** CSS **
.accordionItem {max-height: 900px;}
.accordionItem.is-collapsed {max-height: 0px;}