Question

So I have the html down pact (i think) as it does display by two buttons and can easily click through them:

<form>
  <input type="radio" name=searchOption value="one" > One Search
  <input type="radio" name=searchOption value="two" > Two Search<br>
  <onClick="changeScope(one)>
</form>

I am using macros so I have the div id's set within the Confluence page itself (oneSearch, twoSearch). I also have twoSearch style = display:none

My page display oneSearch but not two which is what I want. I think my JavaScript is what is not causing the search bars to switch.

Here is my JavaScript:

<script type="text/javascript">
function changeScope() {
    document.getElementById('oneSearch').style.display = "none";
}
</script>

Answer 1

If i understand you correctly, you want to bind a search bar to the radio button and display it.

document.getElementById("cat").addEventListener('click', function(){
  document.getElementById("oneSearch").style.display = "block"
  document.getElementById("twoSearch").style.display = "none"  

});

document.getElementById("dog").addEventListener('click', function(){
  document.getElementById("oneSearch").style.display = "none"
  document.getElementById("twoSearch").style.display = "block"  

});

#oneSearch, #twoSearch{
   display: none;
  }

<input id="cat" type="radio" name="animal" value="cat">
<label>Cat</label><br>
<input id="dog" type="radio" name="animal" value="dog">
<label>Dog</label><br>
<input type="text" id="oneSearch" placeholder="cat search"><br>
<input type="text" id="twoSearch" placeholder="dog search">

Answer 2

I've never used Confluence. But in standard JavaScript, something like this should work.

<form>
  <input type="radio" name=searchOption value="one" onclick="changeScope('oneSearch','twoSearch');"> One Search
  <input type="radio" name=searchOption value="two" onclick="changeScope('twoSearch','oneSearch');" > Two Search<br>
</form>

<script type="text/javascript">
function changeScope(elemToShow,elemToHide) {
    document.getElementById(elemToShow).style.display = "block";
    document.getElementById(elemToHide).style.display = "none";
}
</script>

Switching search bar based on radio button using javascript

2 个答案: