I want to be toggle button automatically off and whatever I will select that product should be off. And when click on then it should be show that product.
HTML
<div class="heading" id="seamless" style="display: none;">
<center>PayPal now accepted! Make a sale and we'll email you to claim your funds. Easy!Your email: admin#example.com</center>
</div>
Toggle Button
<div id="normal-toggle-button">
<input name="open" value="1" type="checkbox" onchange="checkshowhidereverse(this.status, '#seamless');checkshowhidereverse(this.status, '#setup');" checked="checked" />
</div>
Javascript
$(document).ready(function () {
//* toggle buttons
toggle_buttons.init();
});
Javascript function
//* toggle buttons
toggle_buttons = {
init: function () {
$('#normal-toggle-button').toggleButtons();
}
};
I am not quite sure if i understood it well?
Initially DIV is hidden, checkbox unechecked ? if yes how about this
http://jsfiddle.net/8sCw8/
<div class="heading" id="seamless" style="display: none;">
<center>PayPal now accepted! Make a sale and we'll email you to claim your funds. Easy!Your email: admin#example.com</center>
</div>
<div id="normal-toggle-button">
<input id="checkBox" name="open" value="1" type="checkbox"/>
</div>
JS:
$('#checkBox').click(function() {
if( $(this).is(':checked')) {
$("#seamless").show();
} else {
$("#seamless").hide();
}
});
Related
I want to make a search form. Here when a user clicks on input filed first show a div (id: 1) where will be some link, then when user type on the input filed first for search div (id: 1) will hide and second div (id: 2) will show that place. Here will show the search result. After that, select a search result, the third div (id: 3) will appear here. In this process, if the user clicks outside on the window div will hide.
For reference please visit this site and see the search form. https://www.immobiliare.it/
Here is my code:
<div id="1">
<button>Open Map in Modal</button>
<button>Open Map in Modal 2</button>
</div>
<div id="2">
<p>Search result</p>
<p>Search result</p>
<!-- this will fetch result via AJAX, try with static data for testing. just show the div -->
</div>
<div id="3">
<input type="checkbox"> Villa
<input type="checkbox"> Apartment
<input type="checkbox"> Cotage
</div>
<style>
#1{
display: none;
}
#2{
display: none;
}
#3{
display: none;
}
.form-group input::focus + #1{
display: block;
}
<script>
var input = document.getElementById('searchLocation');
var result = document.getElementById('2');
input.addEventListener('keypress', function() {
result.style.display = "block";
});
input.addEventListener('focusout', function() {
result.style.display = "none";
});
</script>
I tried with focus in-out method. But the problem is I can't click on the div content, because of focus out, the div hide.
Please see the referecnce link, I want to make similiar. I just need the design only.
<!-- <form> -->
<input type="search" placeholder=" Search..." id="searchbox" name="searchitem" list="searchhints">
<!-- </form> -->
<datalist id="searchhints">
<!-- <option>Open Map in Modal 1</option>
<option>Open Map in Modal 2</option> -->
</datalist>
<div id="display">
<input type="checkbox"> Villa
<input type="checkbox"> Apartment
<input type="checkbox"> Cottage
</div>
<script>
var default_datalist = {"Open Map in Modal 1" : "modal1", "Open Map in Modal 2" : "modal2"};
var searched_datalist = {"Search result 1": "search1", "Search result 2": "search2"};
$(function(){
$("#display").hide();
fill_searchhints(default_datalist);
})
function fill_searchhints(datalist) {
$("#searchhints").html("");
for (let data in datalist) {
$("#searchhints").append("<option><div id='"+datalist[data]+"'>"+data+"</div></option");
}
}
$("body").delegate("#searchbox","change input",function(event){
event.preventDefault();
if($("#searchbox").val()!=''){
keyword = $('#searchbox').val();
//send keyword to AJAX function
fill_searchhints(searched_datalist);
if(keyword == 'Search result 1'){
event.preventDefault();
$("#display").show();
}
} else {
fill_searchhints(default_datalist);
}
});
</script>
You can do something along this line. Here I have used datalist tag instead instead of div. In script, i have created default_datalist and searched_datalist to replace datalist in HTML. Rest are normal functions, loops and event-listeners.
The link you provided seems to mainly use AJAX with backend search as well, so it is kinda difficult to replicate same result in here
Edit:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" name="search" id="search">
<div id="div1" class="drop" hidden>
<button>Open Map in Modal</button>
<button>Open Map in Modal 2</button>
</div>
<div id="div2" class="drop" hidden>
<p>Search result</p>
<p>Search result</p>
</div>
<div id="div3" hidden>
<input type="checkbox"> Villa
<input type="checkbox"> Apartment
<input type="checkbox"> Cottage
</div>
<script>
$("#search").on("focusin input change", function(){
$(".drop").hide();
if($("#search").val() == ""){
$("#div1").show();
// $("#div3").hide();
} else {
$("#div2").show();
}
})
$("#search").on("focusout", function() {
$(".drop").hide();
})
$("#div2").on("mousedown", function(){
$("#div3").show();
});
</script>
Here, if you apply the commented part, #div3 will hide when input text is empty,
I have an input checkbox field and when the checkbox changes (user clicks or unclicks) the div below should toggle. In my style sheet I have the div paypalInputArea as display:none and when the checkbox in clicked, it should toggle, however I can't seem to get it to work. Can anyone see what is wrong with my code?
Here is my html:
<div class="checkbox-row" id="paypalCheckbox">
<input type="checkbox" maxlength="2147483647" value="true" name="paypalPaymentCheckbox" id="paypalPaymentCheckbox" class="checkinput styled" />
<label class="paymentMethodTitle"></label>
</div>
<div class="paypalInputArea">
<isinclude template="includes/paymentmethodsinclude" />
</div>
And here is my jQuery:
$("#paypalCheckbox.checkbox-row .areaExpander").on('change', function() {
$(".paypalInputArea").toggle();
if ($('.paypalInputArea').is(':visible')) {
app.paymentAndReview.setCOContinueBtn(true);
$("#paypalPaymentCheckbox").attr('checked','true');
$('#paypalCheckbox.checkbox-row .areaExpander').addClass('open');
} else {
$("#paypalPaymentCheckbox").removeAttr('checked');
$('#paypalCheckbox.checkbox-row .areaExpander').removeClass('open');
app.paymentAndReview.setCOContinueBtn(false);
}
});
$("#paypalCheckbox.checkbox-row input").attr('checked') && app.paymentAndReview.setCOContinueBtn(true);
$("#paypalCheckbox").on('change', function() {
$(".paypalInputArea").toggle();
if ($('.paypalInputArea').is(':visible')) {
//app.paymentAndReview.setCOContinueBtn(true);
$('#paypalCheckbox.checkbox-row .areaExpander').addClass('open');
} else {
$('#paypalCheckbox.checkbox-row .areaExpander').removeClass('open');
//app.paymentAndReview.setCOContinueBtn(false);
}
});
$("#paypalCheckbox.checkbox-row input").attr('checked') && app.paymentAndReview.setCOContinueBtn(true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-row" id="paypalCheckbox">
<input type="checkbox" maxlength="2147483647" value="true" name="paypalPaymentCheckbox" id="paypalPaymentCheckbox" class="checkinput styled" />
<label class="paymentMethodTitle"></label>
</div>
<div class="paypalInputArea" style="display:none">
blabla
</div>
just replace the line:
$("#paypalCheckbox.checkbox-row .areaExpander").on('change', function() {
with:
$("#paypalCheckbox").on('change', function() {
As you have an ID (which has to be unique) you dont have to use other classes or else to reach it!
you can also remove those lines as the attrribute checked is set as the user clicks on the checkbox
$("#paypalPaymentCheckbox").attr('checked','true');
$("#paypalPaymentCheckbox").removeAttr('checked');
Hope this helps!
It looks like you're missing the class areaExpander from your checkbox
<script type="text/javascript">
function CheckBox(checkerbox, div) {
if (checkerbox.checked) {
document.getElementById(div, Urbanoo).style.display = "block"
} else {
document.getElementById(div, Rurall).style.display = "none"
$("#Rurall").find("*").prop("disabled", true);
}
}
function CheckBox1(checkerbox1, div) {
if (checkerbox1.checked) {
document.getElementById(div, Rurall).style.display = "block"
} else {
document.getElementById(div, Urbanoo).style.display = "none"
$("#Urbanoo").find("*").prop("disabled", true);
}
}
</script>
How to hide a checkbox in function another and disabled all elements to the checkbox disabled?
<input name="Rural" type="checkbox" onclick="CheckBox1(this,'Rurall');" />
<input name="Urbano" type="checkbox" onclick="CheckBox(this,'Urbanoo');" /> Urbanoo </center>
<div id="Urbanoo" style="display:none" >
<g:render template="../DomUrbano/form"/>
</div>
The problem is that when I turn on a check box not the other box is not disabled
<div id="Rurall" style="display:none">
</br>
<g:render template="../DomRural/form"/>
</div>
I think I see what you are attempting but frankly it's less than super clear.
SO what I think you want is;
Hide other checkboxes if I check one
If I do uncheck a box, show the other one again
Show a "partner" area if I check a box
Disable other NOT partner area inputs if I check a box
I modified your markup some to make it easier and also added some additional to clearly show what is happening. I also added a data element for the partner to the input so we can make this all simpler and only have one function; now called via an event handler and NOT with inline code in markup.
Revised markup:
<span class="myinputs"><input class="mycheck" name="Rural" type="checkbox" data-partner="#Rurall" /> Rurall</span>
<span class="myinputs"><input class="mycheck" name="Urbano" type="checkbox" data-partner="#Urbanoo" /> Urbanoo</span>
<div id="Urbanoo" class="hidden others">the Urbannoo
<g:render template="../DomUrbano/form" />
<input type="textbox"/>
</div>
<div id="Rurall" class="hidden others">the Rurall
<g:render template="../DomRural/form" />
<input type="textbox"/>
</div>
Code:
$('.mycheck').on('change', function() {
var amIChecked = $(this)[0].checked;
$(this).parent().siblings('.myinputs').toggle(!amIChecked);
var pt = $(this).data('partner');// get the partner selector
$(pt).toggle(amIChecked);// show the partner in the others list
//do the enable in the partner
$('.others').filter(pt).toggle(amIChecked).find("*").prop("disabled", !amIChecked);
//do the disable in the othes list not the partner
$('.others').not(pt).find("*").prop("disabled", amIChecked);
});
Play with it all here: https://jsfiddle.net/MarkSchultheiss/cLyb103x/1/
I have a checkbox ,when the checkbox clicks it will display a div ,if unchecked the div has to hide,I have tried this code but it is not working properly,oncheck it is showing the div but it's not hiding
Code:
<div style="clear:both;" class="tab">
<input type="checkbox" id="schedulecheck" name="schedulecheck" value="red" /> Schedule Campaign
<div id="datediv" class="red boxs" style="display: none">
<!--<label>You can schedule campaigns only after 3 hours from now.</label></br>-->
<label>Select date & time to schedule</label></br>
<input type="text" id="scheduledatetime" name="scheduledatetime"/><label id="schedule_error" class="error"> </label>
<!--<input type="text" id="datepickerad"/>-->
</div>
</div>
And the JS code:
$('#schedulecheck').on('ifChecked', function(event){
// alert();
if($(this).attr("value")=="red"){
$(".red").show();
}
});
$('#schedulecheck').on('unChecked', function(event){
if($(this).attr("value")=="red"){
$(".red").hide();
}
});
$('#schedulecheck').click(function () {
$(".red").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="clear:both;" class="tab">
<input type="checkbox" id="schedulecheck" name="schedulecheck" value="red" />Schedule Campaign
<div id="datediv" class="red boxs" style="display:none" >
<!--<label>You can schedule campaigns only after 3 hours from now.</label></br>-->
<label>Select date & time to schedule</label>
</br>
<input type="text" id="scheduledatetime" name="scheduledatetime" />
<label id="schedule_error" class="error"></label>
<!--<input type="text" id="datepickerad"/>-->
</div>
You can rather use .change() function for listening change event. and use .toggle(flag) with flag being true/false based on checked value for making show/hide decision:
$('#schedulecheck').change(function(){
$(".red").toggle(this.checked);
});
Working Demo
Ty this code
$('#schedulecheck').on('click',function () {
if($(this).is(':checked'))
$(".red").show();
else
$(".red").hide();
});
Use this:
$("#schedulecheck").on("click", function () {
$(".red").toggle($(this).is(":checked"));
});
This is "the cross-browser-compatible way to determine if a checkbox is checked" as jQuery recomands it (see http://api.jquery.com/prop/#prop1 for more details).
When the user checks 'student'(check-1). The 2 checkbox values are supposed to disappear and reveal a text input div. As of right now I've got the input-reveal down. But I can't seem to get the checkboxes to disappear.
I've tried:
$(function () {
$('#check-1').change(function () {
$('.name').toggle(this.checked);
$('#check-1').hide();
$('#check-2').hide();
}).change();
});
But that doesn't work. How do I hide the checkboxes once 'student' is checked? Any idea's?
Here is a small fiddle . Thanks for your help in advance.
See the code below:
$(".my-check").change(function() {
if ( $(this).is(':checked') ) {
$(".my-box").show();
} else {
$(".my-box").hide();
}
});
More details in:
http://jsfiddle.net/marloscarmo/vMFQd/
wrap your textboxes with a div, say "thisWrapper"
<div id="thisWrapper">
<input type="checkbox" id="check-1" class="checkchoice staff" required><label for="check-1" class="choice staff">Staff</label>
<input type="checkbox" id="check-2" class="checkchoice student" required><label for="check-2" class="choice student">Student</label>
</div>
and in the change event you posted add:
$("thisWrapper").hide();
that should hide both checkboxes at once. Of course you'll have to add a "cancel" or "Reset" button to show the checkboxes again.
or you could give the checkboxes both a new class name like "mycheckboxes" and call this:
$(".mycheckboxes").click(function() {
$('#check-1').hide();
$("#check-2").hide();
});
* HERE"S THE FULL EXAMPLE I GOT WORKING IN FIDDLER **
Try this instead:
<div id="thisWrapper">
<input type="checkbox" id="check-1" class="checkchoice" required><label for="check-1" class="choice staff">Staff</label>
<input type="checkbox" id="check-2" class="checkchoice" required><label for="check-2" class="choice student">Student</label>
</div>
<div id="nameinput">
<input type="text" placeholder="So what's your name?" />
</div>
<script>
$(function() {
$(".checkchoice").change(function() {
$("#thisWrapper").hide();
$("#nameinput").show();
});
});
</script>