i have to list check
<input type="checkbox" value="18" name="yes" id="yes1">
<input type="checkbox" value="13" name="yes" id="yes2">
<input type="checkbox" value="12" name="yes" id="yes3">
and other list checkbox
<input type="checkbox" value="14" name="no" id="no2">
<input type="checkbox" value="18" name="no" id="no2">
<input type="checkbox" value="12" name="yo" id="no2">
but i don't know to work when i check to checkbox id yes1 , id no1 not checked
Assuming you change your checkboxes with name="no" as you have repeated IDs, and that the one with name="yo" is a mistake, like this:
<input type="checkbox" value="18" name="yes" id="yes1">
<input type="checkbox" value="13" name="yes" id="yes2">
<input type="checkbox" value="12" name="yes" id="yes3">
<input type="checkbox" value="14" name="no" id="no1">
<input type="checkbox" value="18" name="no" id="no2">
<input type="checkbox" value="12" name="yo" id="no3">
You can do it like this with jQuery:
$("input[name=yes]").click(function() {
var current = this.id.replace("yes","");
if($(this).is(':checked')) {
$("#no" + current).prop('checked', false);
}
});
$("input[name=no]").click(function() {
var current = this.id.replace("no","");
if($(this).is(':checked')) {
$("#yes" + current).prop('checked', false);
}
});
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 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>
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']);” />
How do I edit the search form below to search only in a specific category on woocommerce?
<form role="search" method="get" id="searchform" action="http://url-is-here.com">
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" placeholder="Search for products" />
<input type="submit" id="searchsubmit" value="Search" />
<input type="hidden" name="post_type" value="product" />
</div>
</form>
Did you try:
<form role="search" method="get" id="searchform" action="http://url-is-here.com">
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" placeholder="Search for products" />
<input type="submit" id="searchsubmit" value="Search" />
<input type="hidden" name="post_type" value="product" />
<input type="hidden" name="cat" id="cat" value="5" />
</div>
</form>
This should limit the results to category with an id of 5.
I have some form with radio and checkboxes.
It should to be like this:
The CSS:
.span-al-top
{
position:relative;
top:-7px;
}
.span-al-bottom
{
position:relative;
top:2px;
}
HTML:
<label>Radio</label>
<br />
<input type="radio" name="radio" value="uno" class="radio-margin"><span class="span-al-bottom">uno</span>
<input type="radio" name="radio" value="due" class="radio-margin"><span class="span-al-bottom">due</span>
<input type="radio" name="radio" value="tres" class="radio-margin"><span class="span-al-bottom">tres</span>
<br />
<label>Checkbox</label>
<br />
<input type="checkbox" name="vehicle" value="Bike" class="checkbox-margin"><span class="span-al-top">one</span>
<input type="checkbox" name="vehicle" value="Bike" class="checkbox-margin"><span class="span-al-top">two</span>
<input type="checkbox" name="vehicle" value="Bike" class="checkbox-margin"><span class="span-al-top">three</span><br />
<input type="checkbox" name="vehicle" value="Bike" class="checkbox-margin"><span class="span-al-top">four</span>
<input type="checkbox" name="vehicle" value="Bike" class="checkbox-margin"><span class="span-al-top">five</span>
<input type="checkbox" name="vehicle" value="Bike" class="checkbox-margin"><span class="span-al-top">six</span>
It works, but it doesn't work with Internet Explorer 6. In Explorer 6 I have this:
Any idea how I fix it?
Ok, I solved.. I just needed to add the code:
vertical-align: middle;
to both span styles.