HTML form and javascript---show different form in same table

Question

I have 4 form in a HTML table,use 4 button to call the form out.

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 different form in (td id="col"),but it have a error , it will show two form in same time.I want if i click a button,1 form will open , anther form will close.For example,if form 1 open,form 2,3,4 will close

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');
    });
});

The jsfiddle

How can i fix the problem?

It works when I fix that: http://jsfiddle.net/barmar/oe8035os/1/ — Barmar, Apr 19 '15 at 07:20
BTW: http://stackoverflow.com/questions/359732/why-is-it-considered-a-bad-practice-to-omit-curly-braces?lq=1 — Barmar, Apr 19 '15 at 07:21
Why do you use both inline `onclick` attributes and Javascript `.click()` functions? — Barmar, Apr 19 '15 at 07:23
Have you thought about setting the other forms to hidden in the same call as well? — A.Sharma, Apr 19 '15 at 07:26
@Barmar For example , if form 1 open , form 2,3,4 will close — paul0080, Apr 19 '15 at 07:28
If you want to close 2, 3, and 4, why do you only do `$("#form2").collapse("hide")`? — Barmar, Apr 19 '15 at 07:30
@Barmar add $("#form3").collapse("hide") $("#form4").collapse("hide") ? How can i check if 2,3,4 is open? — paul0080, Apr 19 '15 at 07:32
Why do you need to check? Just close them all. If it's already closed, nothing will happen. — Barmar, Apr 19 '15 at 07:33
@Barmar Just add $("#form3").collapse("hide") $("#form4").collapse("hide") in $('#cpass').click(function ()? — paul0080, Apr 19 '15 at 07:36
@paul0080 it would be easier to just do $("#form3,#form4,#form1).collapse("hide"); — A.Sharma, Apr 19 '15 at 07:42
@ A.Sharma $("#form3,#form4,#form1).collapse("hide"); is not working. — paul0080, Apr 19 '15 at 07:48
I was just demonstrating the use of commas instead of doing multiple hide calls. See my answer — A.Sharma, Apr 19 '15 at 08:21

rkamath · Answer 1 · 2015-04-19T07:50:35.980

updated you jQuery code with slideUp and slideDown. it opens only one form at a time. also add a common meaningful class name for all the forms so that 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 for keeping the html clean

fiddle

This is a cleaner way to do it. – A.Sharma Apr 19 '15 at 07:50 — A.Sharma, Apr 19 '15 at 07:50

A.Sharma · Answer 2 · 2015-04-19T08:28:52.000

0

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

You can make the code cleaner by adding an animation like rkamath suggested. His offers a slide effect. Here is a fade effect for your convenience as well:

$(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 you go:

$('#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.

edited Apr 19 '15 at 08:28

answered Apr 19 '15 at 07:48

A.Sharma

2,771
1
11
24

When i use hide() in to my website ,the form can not show out ,just show out a null – paul0080 Apr 19 '15 at 08:22
It works fine on the fiddle. If it doesn't work for you then just use the second option i posted. The second option should work for you based on the code you gave in your initial question. – A.Sharma Apr 19 '15 at 08:24
If i using second option just can work once time only. – paul0080 Apr 19 '15 at 08:26
Try the second option again with the updated code. By second time do you mean that it doesn't work after you submit the form the first time? – A.Sharma Apr 19 '15 at 08:29
If i click another form , it will show out all form in table – paul0080 Apr 19 '15 at 08:31
Is what is happening on your site the same thing that is happening in fiddle? Fiddle is working fine. – A.Sharma Apr 19 '15 at 08:33
For example ,i click form 1 is ok but click form 2 is not working – paul0080 Apr 19 '15 at 08:33
What I'm saying is that clicking the forms in fiddle works every time. When you click in fiddle is what is happening there happening on your site as well? Do you have the same jquery plugins from the fiddle referenced on your site? – A.Sharma Apr 19 '15 at 08:36
but third time will ok again – paul0080 Apr 19 '15 at 08:41

score -1 · Answer 3 · answered Apr 19 '15 at 07:24

-1

Line 1, and 24 to 26 are not needed (the are making your errors)

});

Updated Fiddle

answered Apr 19 '15 at 07:24

user3392846

65
1
7

There were no problems with those lines in his fiddle. The error was because of ` – Barmar Apr 19 '15 at 07:33
Yeah, I realize that. I hit 23 instead of 24. – user3392846 Apr 19 '15 at 07:36

HTML form and javascript---show different form in same table

3 Answers3