0

Sorry, I speak English very badly.

I have one form that, when called from various buttons, should hide some fields.

Here are the buttons:

<a  data-target="#call">Button 1</a> 
<a  data-target="#call">Button 2</a>

Here is the form:

<div id="call">
<form>
<div class="pole1">Field 1</div>
<div class="pole2">Field 2</div>
</form>
</div>

A form can have only one ID, in my case it is a "call".

How to make that when you click on the "Button 1" only displayed "Field 1"? How to make that when you click on the "Button 2" only displayed "Field 2"?

Денис Шурубов
  • 1
  • 3

2 Answers2

0

Please try this

<a  data-target="#call" onclick="show('id1');">Button 1</a> 
<a  data-target="#call" onclick="show('id2');">Button 2</a>

Here is the form:

<div id="call">
<form>
<div class="pole1" id="id1"  style="display:none">Field 1</div>
<div class="pole2" id="id2"  style="display:none">Field 2</div>
</form>
</div>

javascript code : 

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

   <script type="text/javascript">
    function show(elementId) 
    { 
     document.getElementById("id1").style.display="none";
     document.getElementById("id2").style.display="none";
     document.getElementById(elementId).style.display="block";
    }
   </script>
Dipali Sakle Systematix
  • 857
  • 6
  • 18
0

Try with this. 

<!DOCTYPE html>
<html>
<body>


 <a href="#"   onclick='myFunction1()'>Button 1</a> 
<a href="#"   onclick="myFunction2()">Button 2</a>

<div id="call">
<form>
<div class="pole1" id="Field1Id">Field 1</div>
<div class="pole2"  id="Field2Id">Field 2</div>
</form>
</div>

<p id="demo"></p>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>
function myFunction1() {

  $("#Field1Id").show();
  $("#Field2Id").hide();

}

function myFunction2() {

   $("#Field1Id").hide();
  $("#Field2Id").show();

}
</script>

</body>
</html>
Rajendran S
  • 39
  • 1
  • 12