I'm using a single search option field for searching in different ways by clicking the radio buttons given on that page. For example search by search-client-by-id, search-client-by-name, search-client-by-emailid etc. and I want to put different jQuery validations on it on the same search field by clicking on different radio buttons.
The validations used for this purpose are like this demo:
http://www.position-relative.net/creation/formValidator/demos/demoValidators.html
<div class="search-job-txtbox" >
<input type="text" name="clientSearchText" id="clientSearchText" value="" class="search-txtbox" onkeyup="javascript:searchByCriteria(this.value,'radio');"/>
<div class="search-icon"><a href="javascript:;"><img src="<%=request.getContextPath()%>/images/search-icon.gif" width="25" alt="Search" title="Search" height="25" /></div>
</div>
<div class="job-options">
<div class="job-checkbox"><input type="radio" name="radio" id="radio" value="search-client-by-id" checked="true" onclick="javascript:searchByCriteria();"/></div>
<h5>ID</h5>
<div class="job-checkbox"><input type="radio" name="radio" id="radio" value="search-client-by-name" /></div>
<h5>Name</h5>
<div class="job-checkbox"><input type="radio" name="radio" id="radio" value="search-client-by-emailid" /></div>
<h5>Email</h5>
<div class="job-checkbox"><input type="radio" name="radio" id="radio" value="search-client-by-contact-number" /></div>
<h5>Contact</h5>
</div>
You can trigger the validation dynamically
$('input.clientID').click(function() {
$('#form').validationEngine(options);
});
Do that for each type, or implement a case/switch
Related
I am trying to change content using radio buttons. content changes when click on radio button but radio is not checked it stays empty, i know something is wrong, can someone suggest me a solution.
<div class="radio-custom radio-default radio-inline">
<input type="radio" ng-link="['OneWayFlight']" id="oneWayFlight" name="FlightType" />
<label for="oneWayFlight">One way</label>
</div>
<div class="radio-custom radio-default radio-inline">
<input type="radio" ng-link="['ReturnTripFlight']" id="roundTripFlight" name="FlightType"/>
<label for="roundTripFlight">Round Trip</label>
You can use ng-model instead of ng-link.
<div class="radio-custom radio-default radio-inline">
<input type="radio" ng-model="flightType" value="Round Trip">Round trip<br/>
<input type="radio" ng-model="flightType" value="One Way">One Way<br/>
<tt>Flight Type = {{flightType | json}}</tt><br/>
</div>
I have 5 radio buttons and depending of which one is selected I want to change the href link of an image, which sends you to another page. Example: I selected the first radio button. When I click the image, the page "gallery" opens. When I select the second radio button and press the image, it'll open the page "about me"... is there any solution for this with JavaScript?
This is my radio set:
<input checked="" type="radio" name="slider" id="slide1">
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<input type="radio" name="slider" id="slide5">
<input type="radio" name="slider" id="slide6">
and this is the button:
<div id="down_icon2">
<a href="">
<img src="images/down_icon.png">
</a>
</div>
Create a function to check which radio button is set,
the function sets the desired link.
<input checked="" type="radio" name="slider" id="slide1">
<input type="radio" name="slider" id="slide2" >
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<input type="radio" name="slider" id="slide5">
<input type="radio" name="slider" id="slide6">
MyLink
<script>
function myFunction() {
if(document.getElementById('slide1').checked) {
document.getElementById('myLink').href = "test.php";
}
}
</script>
you can do the same with the image src
Edit: it is just the case for the first radio button, you have to add the test for the other buttons.
<input type="radio" data-image="http://www.placecage.com/200/300" name="slider" id="slide1">
add a data-image to all the slides with the image you want. Then with Jquery you can do this:
$("input").click(function () {
var clickedRadio = $(this).attr("data-image");
$("img").attr("src", clickedRadio);
})
If you click any input it sets the src of the image to the data-image of the clicked item ;) Note this uses Jquery library
Also here is a working example codepen
That is the answer, it's just use native javascript.it can wrote better if you use extra lib like jQuery.
https://jsfiddle.net/mham9ons/
just use your html:
<input type="radio" name="slider" id="slide2" data-href="xxx1">
<input type="radio" name="slider" id="slide3" data-href="xxx2">
<input type="radio" name="slider" id="slide4" data-href="xxx3">
<input type="radio" name="slider" id="slide5" data-href="xxx4">
<input type="radio" name="slider" id="slide6" data-href="xxx5">
<div id="down_icon2"><img src="images/down_icon.png"></div>
add these code:
var sliders = document.getElementsByName('slider');
var linkWrapper = document.getElementById('down_icon2');
for (var i in sliders){
if(sliders[i].addEventListener){
sliders[i].addEventListener('click', function(){
linkWrapper.childNodes[0].setAttribute('href', this.getAttribute('data-href'));
});
}
}
I have the following code:
<section class="mood" role="listbox">
<a class="#" role="option">1<img src="http://s.goose.im/emoji/emoji_u1f622.png"></a>
<a class="#" role="option">2<img src="http://s.goose.im/emoji/emoji_u1f610.png"></a>
<a class="#" role="option">3<img src="http://s.goose.im/emoji/emoji_u1f603.png"></a>
<a class="#" role="option">4<img src="http://s.goose.im/emoji/emoji_u1f60a.png"></a>
</section>`
I want these images to act as radio input buttons. How do I do that? Also, I'm a beginner and I don't want to mess up the css for the <a> tag.
Can I do it without the input tag using some script? And if I do use the input tag, can I still save myself from redoing the css?
Why not use a regular HTML form with labels?
HTML:
<form class="mood" role="listbox">
<label>
<input type="radio" name="radio" value="1" /><img src="http://s.goose.im/emoji/emoji_u1f622.png"></label>
<label>
<input type="radio" name="radio" value="2" /><img src="http://s.goose.im/emoji/emoji_u1f610.png"></label>
<label>
<input type="radio" name="radio" value="3" /><img src="http://s.goose.im/emoji/emoji_u1f603.png"></label>
<label>
<input type="radio" name="radio" value="4" /><img src="http://s.goose.im/emoji/emoji_u1f60a.png"></label>
</form>
Images will act as radio box too i.e you can select a radio box when you click on image.
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/1070/
I have four radio box like this:
<input type="radio" checked="checked" value="" name="display" style="">Home</input>
<input type="radio" value="" name="display" style="">Featured</input>
<input type="radio" value="" name="display" style="">Normal</input>
<input type="radio" value="" name="display" style="">Draft</input>
Now i have Three DIV for Featured, Normal, Draft radio box with display:none like this:
<div id="Featured" style="display:none">Featured desc</div>
<div id="Normal" style="display:none">Normal desc</div>
<div id="Draft" style="display:none">Draft desc</div>
Now, i need to after click/selected each radio button show div with same id Using jQuery.
NOTE: for Home radio box i dont need to any div.
Note that inputs are self closing, and can't contain text, so you have to change it to
<input type="radio" value="" name="display" />Featured
Then add a class to DIV's so they are easier to target
<div id="Featured" class="desc" style="display:none">Featured desc</div>
Then you can do something like this
$('input[type="radio"]').on('change', function() {
$('.desc').hide();
$('#' + $.trim(this.nextSibling.nodeValue)).toggle(this.checked);
});
FIDDLE
This is my jquery code
$(document).ready(function() {
$("div.imgDisp").hide();
$('[id="' + $(":radio:checked").val()+'"]').show();
$('input[name="rdNumber"]:radio').click(function() {
$("div.imgDisp").fadeOut('slow');
$('[id="' + $(this).val()+'"]').fadeIn('slow');
});
});
this is html code
<div class="wrapper"> <strong><span>*</span> Number</strong>
<div class="formText">
<input type="radio" name="rdNumber" value="100" />100
<input type="radio" name="rdNumber" value="200" checked="checked"/>200
<input type="radio" name="rdNumber" value="300" />300</div>
</div>
<input type="radio" name="rdImage" value="preExisting" />Choose from images below
<div id="100" class="imgDisp">
<div class="heading">10x10</div>
<input type="radio" name="preExistingImage" id="100" value="10x10-1"
/>
<img src="1-1.png">
<input type="radio" name="preExistingImage" id="100" value="10x10-2" />
<img src="1-2.png">
</div>
<div id="200" class="imgDisp">
<div class="heading">10x20</div>
<input type="radio" name="preExistingImage" id="200" value="10x20-1"
/>
<img src="2-1.png">
<input type="radio" name="preExistingImage" id="200" value="10x20-2" />
<img src="2-2.png">
</div>
<div id="200" class="imgDisp">
<div class="heading">20x10</div>
<input type="radio" name="preExistingImage" id="200" value="20x10-1"
/>
<img src="3-1.png">
<input type="radio" name="preExistingImage" id="200" value="20x10-2" />
<img src="3-2.png" width="20" height="10">
</div>
The code is working fine
on choosing 100 radio button it is showing div with id = 100 and on selecting id = 200 it is showing two divs with id = 200.
here check this fiddle http://jsfiddle.net/vDBDA/2/
now there are two queries
1. I use duplicate id to show similar type of divs on selection of radio button like this code
<div id="200" class="imgDisp">
though it is working fine but I know duplicate id's is a problem. how can I fix it?
when the page loads number 200 is checked by default.. and here in this fiddle it is displaying the divs associated with radio button 200 but in actual programming and in localhost/browser it does not show.. What could be the reason?
All your help will be golden. thanks guys in advance
ID should be unique
if you want to apply some effects to some group of elements then have
all those elements in one class.
and for applying effect you need to specify using
$('.classname').fadein();
I have slightly edited your fiddly pls check
http://jsfiddle.net/vDBDA/7/
Simply add class and remove ID of DOM and then use .on() jQuery method that allow to bind events on dynamically loaded content.
You can use class instead of ID Because ID must be unique for one html page.
You can assign a class to each element that you want per grouping. You may need to then iterate over those elements using an each function.
$(selector).each( function(){
//hide or show...etc
});
Simply add this class in your css file
.hide_div{
display: none;
}
While hiding any div, apply this property to the div and if you want to show the div then user show_div as class. Use addClass for applying the CSS to that DIV.
.show_div{
display: block;
}
i try your code...and here is what i did...
<div class="wrapper"> <strong><span>*</span> Number</strong>
<div class="formText">
<input type="radio" name="rdNumber" value="100" />100
<input type="radio" name="rdNumber" value="200" checked="checked" />200
<input type="radio" name="rdNumber" value="300" />300</div>
</div>
<input type="radio" name="rdImage" value="preExisting" />Choose from images below
<div class="100 imgDisp" >
<div class="heading">10x10</div>
<input type="radio" name="preExistingImage" class="100" value="10x10-1"
/>
<img src="1-1.png">
<input type="radio" name="preExistingImage" class="100" value="10x10-2" />
<img src="1-2.png">
</div>
<div class="200 imgDisp">
<div class="heading">10x20</div>
<input type="radio" name="preExistingImage" class="200" value="10x20-1"
/>
<img src="2-1.png">
<input type="radio" name="preExistingImage" class="200" value="10x20-2" />
<img src="2-2.png">
</div>
<div class="200 imgDisp" >
<div class="heading">20x10</div>
<input type="radio" name="preExistingImage" class="200" value="20x10-1"
/>
<img src="3-1.png">
<input type="radio" name="preExistingImage" class="200" value="20x10-2" />
<img src="3-2.png" width="20" height="10">
</div>
$(document).ready(function () {
$(".imgDisp").hide();
$('.'+$(":radio:checked").val()).show();
$('input[name="rdNumber"]:radio').click(function () {
$("div.imgDisp").fadeOut('slow');
$('.'+$(this).val()).fadeIn('slow');
});
});