CODEWITHSUNDEEP
javascripthtmlinputradio-buttonshow-hide
Julien
Julien

Reputation: 1980

Open/close input radio

I explained my problem, I have an overlay that I used to delete the categories. I add an action to let you choose where to go when the job categories will be deleted.

For this, I use checkbox and I add a javascript function "open" a form when the checkbox is click,
here is an exemple box close:

First box

here is an exemple box open:

second box

My html code:

  <form method="get">
    <input type="radio" name="cat_action" value="delete" /> Delete all tracks<br />
    <input type="radio" name="cat_action" value="move" onclick="showMe('div_<?php echo $value->ID ?>', this)" /> Move tracks<br />

    <div id="div_<?php echo $value->ID ?>" style="display:none">
    <label for="track">Move tracks to: </label>
    <select id="cate" name="cate">
    <?php foreach (arrayToObject($startup->getCat()) as $value) { ?>
      <option value="<?php echo $value->ID ?>"><?php echo $value->post_title ?></option>
    <?php } ?>  
    </select> <br />        
    </div><br />    

    <button type="submit"> OK </button>
    <button type="button" class="close"> Cancel </button>
  </form>

My javascript code:

<script type="text/javascript">
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
</script>

My problem:
When the checkbox opens the list, it does not close when I click on first checkbox.
I just want to create a function that closes the second checkbox.

You can try it here: http://jsbin.com/usituv/3/edit

Upvotes: 1

Views: 1813

Answers (1)

Aleks G
Aleks G

Reputation: 57306

The problem is due to the fact that you don't do anything on the "Delete" option selection - only on "move" selection. Below is how I updated your script to work properly (provided I understand what you're after). Specifically note the changes:

  • Adding id attribute to the move radio button
  • Adding onclick handler to the delete radio button
  • Changing javascript function to accept only one parameter
  • Using getElementById function to retrieve the reference to the move radio button inside the javascript function.

Also note that it would be better to separate all your javascript into a separate file, including assigning the onclick handlers. However I'm simply fixing your problem at hand here.

<form method="get">
    <input type="radio" name="cat_action" value="delete"
           onclick="showMe('div_1')"/> Delete all tracks<br />
    <input type="radio" name="cat_action" value="move"
           onclick="showMe('div_1')" id="move"/> Move tracks<br />

    <div id="div_1" style="display:none">
        <label for="paypal">Move tracks to: </label>
        <select id="cate" name="cate">
            <option value="dubstep">Dubstep</option>
            <option value="breakbeat">Breakbeat</option>
            <option value="dnb">D'n'B</option>
        </select> 
    </div>

    <br />

    <button type="submit"> OK </button>
    <button type="button" class="close"> Cancel </button>
</form>

<script type="text/javascript">
    function showMe (it) {
        var box = document.getElementById("move");
        var vis = (box.checked) ? "block" : "none";
        document.getElementById(it).style.display = vis;
    }
</script>

Upvotes: 1

Related Questions