Geek Answers Handbook

HTML form and javascript --- show another form in one table

I have 4 forms in an HTML table, use the 4 button to invoke the form.

HTML:

<div id="myAccordion"> <table id="edit" class="table table-striped table-bordered table-hover table-condensed table-nonfluid1 thumbnail"> <tbody> <tr> <td width=50%> <button type="button" class="btn btn-info btn-lg" data-parent="#myAccordion" id="cpass" onclick="document.getElementById('col').style.display = 'inline'">form1 </button> </td> <td width=50%> <button type="button" class="btn btn-primary btn-lg" data-parent="#myAccordion" id="cinfo" onclick="document.getElementById('col').style.display = 'inline'">form2 </button> </td> </tr> <tr> <td width=50%> <button type="button" class="btn btn-info btn-lg" data-parent="#myAccordion" id="cmail" onclick="document.getElementById('col').style.display = 'inline'">form3 </button> </td> <td width=50%> <button type="button" class="btn btn-primary btn-lg" data-parent="#myAccordion" id="cplace" onclick="document.getElementById('col').style.display = 'inline'">form4 </button> </td> <tr> <td colspan="2" style="display:none;" id="col"> <div id="form1" class="collapse"> <form method="POST" action="updatepassc.php" novalidate="novalidate" id="1"> <div class="form-group"> <label for="oldpassword" class="control-label ">1:</label> <input type="password" class="form-control" id="oldpassword" name="oldpassword"> <span class="help-block"></span> </div> <div class="form-group"> <label for="newpassword" class="control-label ">2:</label> <input type="password" class="form-control" id="newpassword" name="newpassword"> <span class="help-block"></span> </div> <div class="form-group"> <label for="newpassword1" class="control-label ">3:</label> <input type="password" class="form-control" id="newpassword1" name="newpassword1"> <span class="help-block"></span> </div> <button type="submit" class="btn btn-success btn-block">yes</button> </form> </div> <div id="form2" class="collapse"> . <form method="POST" action="updateinfo.php" novalidate="novalidate"> <div class="form-group"> <label for="newinfo" class="control-label ">2</label> <textarea class="form-control" rows="3" id="newinfo" name="newinfo">></textarea> <span class="help-block"></span> </div> <button type="submit" class="btn btn-success btn-block">yes</button> </form> </div> <div id="form3" class="collapse"> . <form method="POST" action="updateinfo.php" novalidate="novalidate"> <div class="form-group"> <label for="newinfo" class="control-label ">3</label> <textarea class="form-control" rows="3" id="newinfo" name="newinfo">></textarea> <span class="help-block"></span> </div> <button type="submit" class="btn btn-success btn-block">3</button> </form> </div> <div id="form4" class="collapse"> . <form method="POST" action="updateinfo.php" novalidate="novalidate"> <div class="form-group"> <label for="newinfo" class="control-label ">4</label> <textarea class="form-control" rows="3" id="newinfo" name="newinfo"></textarea> <span class="help-block"></span> </div> <button type="submit" class="btn btn-success btn-block">yes</button> </form> </div> </td> </tr> </tbody> </table> </div>

And I want to show another form in (td id = "col"), but it has an error, it will show two forms at the same time. I want, if I press the button, 1 form will open, the anther shape will close. For example, if form 1 is open, form 2,3,4 closes

This is the javascript code:

 <script type="text/javascript"> $(document).ready(function () { $('#cpass').click(function () { $('#form1').collapse('show'); if ($('#form2').is(':visible')) $('#form2').collapse('hide'); }); $('#cinfo').click(function () { $('#form2').collapse('show'); if ($('#form1').is(':visible')) $('#form1').collapse('hide'); }); $('#cmail').click(function () { $('#form3').collapse('show'); if ($('#form4').is(':visible')) $('#form4').collapse('hide'); }); $('#cplace').click(function () { $('#form4').collapse('show'); if ($('#form3').is(':visible')) $('#form3').collapse('hide'); }); });

jsfiddle

How can I fix the problem?

+5
source share
3 answers

updated jQuery code with a slide module and a slide. he opens only one form at a time. also add a common meaningful class name for all forms so you can call hide / sildeUp without explicitly using multiple id / class

 $(document).ready(function () { $('#cpass').click(function () { $('#form1').slideDown(); $('#form2,#form3,#form4').slideUp(); }); $('#cinfo').click(function () { $('#form2').slideDown(); $('#form1,#form3,#form4').slideUp(); }); $('#cmail').click(function () { $('#form3').slideDown(); $('#form1,#form2,#form4').slideUp(); }); $('#cplace').click(function () { $('#form4').slideDown(); $('#form1,#form2,#form3').slideUp(); }); });

edit: remove inline onclick and css to save html clean

fiddle

0
source

Although there are ways to simplify your JS code, I will keep the general format and change it a bit for the effect. Note that you can use a comma to select multiple div objects.

You can make the code clean by adding animations like rkamath. It offers a slide effect. Here is the fading effect for your convenience:

 $(document).ready(function () { $('#cpass').click(function () { $('#form2,#form3,#form4').hide(); $('#form1').fadeIn(); }); $('#cinfo').click(function () { $('#form1,#form3,#form4').hide(); $('#form2').fadeIn(); }); $('#cmail').click(function () { $('#form4,#form2,#form1').hide(); $('#form3').fadeIn(); }); $('#cplace').click(function () { $('#form3,#form2,#form1').hide(); $('#form4').fadeIn(); }); });

Here is the fiddle for this.

If you really want to keep the general structure of your code here:

 $('#cpass').click(function () { $('#form1').collapse('show'); if ($('#form2,#form3,#form4').is(':visible')) $('#form2,#form3,#form4').collapse('hide'); }); $('#cinfo').click(function () { $('#form2').collapse('show'); if ($('#form1,#form3,#form4').is(':visible')) $('#form1,#form3,#form4').collapse('hide'); }); $('#cmail').click(function () { $('#form3').collapse('show'); if ($('#form4,#form2,#form1').is(':visible')) $('#form4,#form2,#form1').collapse('hide'); }); $('#cplace').click(function () { $('#form4').collapse('show'); if ($('#form3,#form2,#form1').is(':visible')) $('#form3,#form2,#form1').collapse('hide'); });

Here is the fiddle .

0
source

Line 1 and 24 to 26 are not needed (you make your mistakes)

  });

Updated script

-1
source

More articles:


All Articles