CODEWITHSUNDEEP
jqueryradio-buttonstylingjquery-events
Anand
Anand

Reputation: 43

Two separate handlers for same event

I'm styling my radio buttons with 'label' tags by using 'before' selector. I'm using 'click' event for labels to make that clickable across all the browser(chrome doesn't support before/after elements to click). There is an existing script which will show/hide some elements on clicking radio button.

What I'm trying to do

I'm writing a script on 'click' event of lables. Existing show/hide functionality is not working properly because I'm trying to initiate click of radio while clicking label.

What I need

I need to write a script which shouldn't affect existing script(show/hide) and it should work in all the browsers.

What I can't do

  1. I can't finish it simply by giving id and for attributes. :(
  2. I can't customize existing script.

What I think I can do

  1. I can modify HTML/CSS to design my radio by any other way. But there are lot of places to do changes. :(
  2. Using "change" event instead of "click" for show/hide divs.

Code sample

/*what I'm trying...*/
$(document).ready(function(){
  $('input[type="radio"]+label').on('click',function(){
    $(this).prev().click();
  });
});

/*existing script*/
$('input[name="fieldname"]').click(function(){
  if($('#fieldid').is(':checked')){
    $('#divid').show();
    $('#divid1').hide();
  } else if($('#fieldid1').is(':checked')){
    $('#divid1').show();
    $('#divid').hide();
  }
});
/*existing script*/
.divs, input[type="radio"]{display:none;}

input[type="radio"]+label::before{
  content:" ";
  display:inline-block;
  position:relative;
  left:0;
  top:0;
  background:red;
  height:10px;
  width:10px;
  border-radius:50%;
}
input[type="radio"]:checked+label::before{
  background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form>
  <input type="radio" name="fieldname" id="fieldid" class="fieldclass" />
  <label>show textfield</label>
  <input type="radio" name="fieldname" id="fieldid1" class="fieldclass" />
  <label>show button</label>
  <div id="divid" class="divs"><input type="text" size="30"></div>
  <div id="divid1" class="divs"><input type="submit" value="button"></div>
</form>

Upvotes: 4

Views: 62

Answers (2)

Souvik
Souvik

Reputation: 1017

I have a solution, but check if you can place this after the existing click event code. Basically, I am trying to unbind the existing click event and rewrite it in another document.ready segment. Check if that is possible:

    $(document).ready(function(){
      // Unbind the existing click event
      $('input[name="fieldname"]').unbind( "click" );

      // if any label immediately after radio is clicked, call radio's click event
      $('input[type="radio"]').next('label').on('click',function(){
            $(this).prev('input[type="radio"]').click();
      });

      // radio is clicked
      // if the label next to radio says show textfield / show button
      // find the sibling div which has input of type this/that, and show/hide
      $('input[type="radio"]').on('click',function(){   
        /*if ($(this).next('label').html().trim().toLowerCase()=='show textfield') {
            $(this).siblings("div.divs").has('input[type="text"]').show();
            $(this).siblings("div.divs").has('input[type="submit"]').hide();        
        } else if ($(this).next('label').html().trim().toLowerCase()=='show button')    {
            $(this).siblings("div.divs").has('input[type="text"]').hide();
            $(this).siblings("div.divs").has('input[type="submit"]').show();
        }*/
        if ($(this).next('label').html().trim().toLowerCase()=='show textfield') {
            $(this).siblings("div.divs:eq(0)").show();
            $(this).siblings("div.divs:eq(1)").hide();      
        } else if ($(this).next('label').html().trim().toLowerCase()=='show button')    {
            $(this).siblings("div.divs:eq(0)").hide();
            $(this).siblings("div.divs:eq(1)").show();      
        }   

      }); /* end click */
    }); /* end doc.ready */

I have checked this in Firefox and Chrome, and the code is working on both.

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

Since you're not allowed to edit the existing JS, you also don't have to add any additional JS to it.

Simply wrap your titles into <span>
and than both <span> and <input> into your <label> element:

/* ABSOLUTELY NO NEED TO ADD ANYTHING */

/*existing script*/
$('input[name="fieldname"]').click(function(){
  if($('#fieldid').is(':checked')){
    $('#divid').show();
    $('#divid1').hide();
  } else if($('#fieldid1').is(':checked')){
    $('#divid1').show();
    $('#divid').hide();
  }
});
/*existing script*/
.divs, input[type="radio"]{display:none;}

/* SIMPLY CHANGE `label` to `span` and you're done! */
input[type="radio"]+span::before{
  content:" ";
  display:inline-block;
  position:relative;
  left:0;
  top:0;
  background:red;
  height:10px;
  width:10px;
  border-radius:50%;
}
input[type="radio"]:checked+span::before{
  background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Wrap INPUT and the new SPAN into LABEL -->

<form>
  <label>
    <input type="radio" name="fieldname" id="fieldid" class="fieldclass" />
    <span>show textfield</span>
  </label>
  <label>
    <input type="radio" name="fieldname" id="fieldid1" class="fieldclass" />
    <span>show button</span>
  </label>
  <div id="divid" class="divs"><input type="text" size="30"></div>
  <div id="divid1" class="divs"><input type="submit" value="button"></div>
</form>

Upvotes: 0

Related Questions