I am trying to hide one fieldset using CSS. There are other fieldsets using same CSS class, and I don't want to hide them.
This is how the specific filedset looks like;
<fieldset class="span6">
<legend>Search by User Name</legend>
<label>
User Name:
<input id="kusersearch" data-provide="typeahead" name="searchuser" autocomplete="off" value="" type="text">
</label>
<label>
Exact Name:
<input name="exactname" value="1" type="checkbox">
</label>
</fieldset>
You could do that using nth-child selector as it consist of same class for all fieldsets below,
.span6:nth-child(3){
border:none;
background:#ccc;
}
<fieldset class="span6">
<legend>Search by User Name</legend>
<label>
User Name:
<input id="kusersearch" data-provide="typeahead" name="searchuser" autocomplete="off" value="" type="text">
</label>
<label>
Exact Name:
<input name="exactname" value="1" type="checkbox">
</label>
</fieldset>
<fieldset class="span6">
<legend>Search by User Name</legend>
<label>
User Name:
<input id="kusersearch" data-provide="typeahead" name="searchuser" autocomplete="off" value="" type="text">
</label>
<label>
Exact Name:
<input name="exactname" value="1" type="checkbox">
</label>
</fieldset>
<fieldset class="span6">
<legend>Search by User Name</legend>
<label>
User Name:
<input id="kusersearch" data-provide="typeahead" name="searchuser" autocomplete="off" value="" type="text">
</label>
<label>
Exact Name:
<input name="exactname" value="1" type="checkbox">
</label>
</fieldset>
<fieldset class="span6">
<legend>Search by User Name</legend>
<label>
User Name:
<input id="kusersearch" data-provide="typeahead" name="searchuser" autocomplete="off" value="" type="text">
</label>
<label>
Exact Name:
<input name="exactname" value="1" type="checkbox">
</label>
</fieldset>
Give a id to that fieldset and hide it.
AN unique ID will differentiate it from other elements having the same class.
#unique {
display:none;
}
<fieldset id="unique" class="span6">
<legend>Search by User Name</legend>
<label>
User Name:
<input id="kusersearch" data-provide="typeahead"
name="searchuser" autocomplete="off" value="" type="text">
</label>
<label>
Exact Name:
<input name="exactname" value="1" type="checkbox">
</label>
</fieldset>
Check the snippet its hidden. Hope this helps!
Try This ! Just use hidden attribute with your desired input
<fieldset class="span6">
<legend>Search by User Name</legend>
<label>
User Name:
<input id="kusersearch" data-provide="typeahead" name="searchuser" autocomplete="off" value="" type="text" hidden>
</label>
<label>
Exact Name:
<input name="exactname" value="1" type="checkbox">
</label>
</fieldset>
Related
I like to search the word through unique multiple categories.
I prepared this code.
<form role="search" class="cat-search" action="<?php bloginfo('url'); ?>" method="get">
<input type="checkbox" value="0" name="cat" id="cat0" /><label for="cat0">all categories</label>
<input type="checkbox" value="1" name="cat" id="cat1" /><label for="cat1">category 1</label>
<input type="checkbox" value="2" name="cat" id="cat2" /><label for="cat2">category 2</label>
<input type="checkbox" value="3" name="cat" id="cat3" /><label for="cat2">category 3</label>
<input type="checkbox" value="4" name="cat" id="cat4" /><label for="cat2">category 4</label>
<input type="checkbox" value="5" name="cat" id="cat5" /><label for="cat2">category 5</label>
<input name="s" size="25" type="text" placeholder="search after select categories" />
<input type="submit" class="cat-search" value="search" />
</form>
When I try to search "word" with categories 1 and 2, url is becoming like this.
/?cat=1&cat=2&s=word
Is there any way to change it to this url?
/?cat=1,2&s=words
jQuery Comes handy with these,
remove name attributes on all those checkboxes and add hidden input for cat, then populate its value based on checkboxes
<form role="search" class="cat-search" action="<?php bloginfo('url'); ?>" method="get">
<input type="checkbox" value="0" id="cat0" class="cats"/><label for="cat0">all categories</label>
<input type="checkbox" value="1" id="cat1" class="cats"/><label for="cat1">category 1</label>
<input type="checkbox" value="2" id="cat2" class="cats"/><label for="cat2">category 2</label>
<input type="checkbox" value="3" id="cat3" class="cats"/><label for="cat3">category 3</label>
<input type="checkbox" value="4" id="cat4" class="cats"/><label for="cat4">category 4</label>
<input type="checkbox" value="5" id="cat5" class="cats"/><label for="cat5">category 5</label>
<input type="hidden" id="cat" name="cat" />
<input name="s" size="25" type="text" placeholder="search after select categories" />
<input type="submit" class="cat-search" value="search" />
</form>
Then your jQuery to assign value to hidden inputs when checkboxes are click
$('body').on('click', '.cats', function() {
var cats = $('.cats:checked').map( function() {
return this.value;
}).get().join(",");
$('#cat').val( cats );
});
Just a note, the comma (,) in the url will be encoded and would look something like
yoursite.com/?cat=0%2C1%2C2%2C3%2C4&s=bah
although this shouldn't matter if you're processing the value on php
I have the following form:
<form>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
One.
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
Two.
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
<label class="form-check-label" for="defaultCheck3">
Three.
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck4">
<label class="form-check-label" for="defaultCheck4">
Four.
</label>
</div>
</form>
I understand that I can use the following to style checkboxes that are checked:
.form-check-input:checked + label {
color: blue
}
I have a form with a varying number of multiple checkboxes. Is there a way to apply the style only if all checkboxes in a form are checked?
I would like to do this in CSS only.
If all of your checkboxes are required you can leverage the :valid pseudo-class on the form to select it or any of its descendants.
Else as #Pete said there is currently no way to do it.
Anchor tag acts as a form submit button?
<form method="get" action="<?php bloginfo('url'); ?>/">
<div class="field-search">
<input type="text" class="form-control input-lg" placeholder="Search for..." value="<?php the_search_query(); ?>">
<i class="fa fa-search font-16"></i>
</div>
<form action="test.aspx" type="POST">
<label>
<span>Username</span>
<input type="text" name="UserName" id="UserName" class="input-text required" />
</label>
<label>
<span>Password</span>
<input type="password" name="Password" id="Password" class="input-text required" />
</label>
<label>
<input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
<span class="checkboxlabel">Remember Me</span>
</label>
<div class="spacer">
Login
</div>
</form>
jquery
$(document).ready(function(){
$(document).on("click",".login-button",function(){
var form = $(this).closest("form");
//console.log(form);
form.submit();
});
});
possible duplicate of
(Anchor tag as submit button?)
(This is a copied answer)
Try this approach see if it works.
Add a click event to your anchor tag as below and do a event.stopPropagation()
$('a').on('click', function(e){
e.stopPropagation();
})`
See if this works
This is my HTML from. and i'm trying to set a Virtual Page View when submitting the form but i just can't make it work.
Pls advice
<form id="frmContact" action="post.php" method="post">
<div class="form-right-pnl">
<input type="text" class="required name" size="40" placeholder="×©× ×ž×œ×:" name="full_name">
<input type="text" class="required phone" size="40" placeholder="טלפון:" name="phone">
<input type="text" class="required email" size="40" placeholder='דו×"ל:' name="email">
<span>מ×שר קבלת ×—×•×ž×¨×™× ×¤×¨×¡×•×ž×™×™×</span>
<input type="checkbox" class="radio_btn" name="selling_a_property" checked value="Yes"/>
</div>
<div class="form-left-pnl" id='basic-modal'>
<input class="ddl_list" type="submit" value="" onClick=”_gaq.push([‘_trackEvent’, ‘Forms’, ‘Submit’]);” />
</div>
<div class="clear"></div>
</form>
Change this line
<input class="ddl_list" type="submit" value="" onClick=”_gaq.push([‘_trackEvent’, ‘Forms’, ‘Submit’]);” />
for
<input class="ddl_list" type="submit" value="" onClick=”_gaq.push(['_trackPageview', '/virtual-page-view-on-click-submit-button']);” />
I have a simple HTML form that uses the Twitter Bootstrap framework (v3.1.1). On the smartphone/iPhone these checkboxes are quite small and hard to select with your finger. I would like to make them larger/more spaced out so they are easier to hit but haven't found a way so far - is this even possible.
Here's my form html:
<div class="container">
<div>
<p>Tick all that apply:</p>
<form role="form" action="continue.php" method="post">
<input type="hidden" name="selectionID" value="4567">
<div class="checkbox">
<label>
<input type="checkbox" name="selection[]" value="Fever/Temperature">Apples<br>
<input type="checkbox" name="selection[]" value="Swelling or redness at injection site">Oranges<br>
<input type="checkbox" name="selection[]" value="Pain at injection site">Bananas<br>
<input type="checkbox" name="selection[]" value="Tired/Fatigued">Pears<br>
<input type="checkbox" name="selection[]" value="Irritable">Mangoes<br>
<input type="checkbox" name="selection[]" value="Sleep pattern change">Watermelon<br>
<input type="checkbox" name="selection[]" value="Other">Other<br>
</label>
</div>
<button type="submit" class="btn btn-primary">Next</button>
</form>
</div>
</div>
I've also setup a jsfiddle here
This isn't easy to do cross-broswer .. check out the study made here: http://www.456bereastreet.com/lab/form_controls/checkboxes/
Also, make sure you're using correct HTML code. You should wrap each of your checkboxes with label, like this:
<div class="checkbox">
<label>
<input type="checkbox" name="selection[]" value="Fever/Temperature" />Apples<br/>
</label>
<label>
<input type="checkbox" name="selection[]" value="Swelling or redness at injection site" />Oranges<br/>
</label>
<label>
<input type="checkbox" name="selection[]" value="Pain at injection site" />Bananas<br/>
</label>
<!-- etc. -->
</div>