how to use javascript to show a div after submitting a form

Question

I have a form which is when loaded a particular div is hidden .I want that as soon as i submit my form i want that div to be vissible on which i am displaying my result . I am using the onsubmit() of JS ..but cant understand why its not working . here is my javascript.

<g:javascript type="text/javascript">
function showHide() { 

var div = document.getElementById(hidden_div);
if (div.style.display == 'none') {

  div.style.display = '';
}
</g:javascript>

and here is my form

<g:form action='check' ,controller='Booking' onsubmit="return showHide()">
                                <table align="center">


                                    <tr>
                                        <td>
                                            <div
                                                class="fieldcontain ${hasErrors(bean: bookingInstance, field: 'bookingNo', 'error')} required">
                                                <label for="bookingNo"> <g:message
                                                        code="booking.bookingNo.label" default="Booking No" /> <span
                                                    class="required-indicator">*</span>
                                                </label>
                                                <g:textField name="bookingNo" required=""
                                                    value="${params.bookingNo}" placeholder="Enter BOOKING NO" />
                                            </div> <br>
                                        </td>

                                        <td width="50%">
                                            <div
                                                class="fieldcontain ${hasErrors(bean: bookingInstance, field: 'firstBuyerPhone', 'error')} required">
                                                <label for="firstBuyerPhone"> <g:message
                                                        code="booking.firstBuyerPhone.label"
                                                        default="First Buyer Phone" /> <span
                                                    class="required-indicator">*</span>
                                                </label>
                                                <g:textField name="firstBuyerPhone" required=""
                                                    value="${params.firstBuyerPhone}"
                                                    placeholder="Enter Phone Number" />
                                            </div> <br>
                                        </td>
                                    </tr>
                                </table>
                                <fieldset>
                                    <g:submitButton name="check" class="btn btn-success" id="button1" 
                                        value="${message(code: 'default.button.check.label', default: 'Check Booking Status')}" />

                                </fieldset>
                            </g:form>

Answer 1

Please try pasting your full code which covers the issue completely. Your last question also had the insufficient code.

What is hidden_div in the line document.getElementById(hidden_div); . If it is the id of your div tag then wrap it in single or double quotes. Also you need to add return false; statement at the last of the method which will prevent page being reloaded after submission.

Well, you have to fire ajax call to submit a form, because the code you are showing will not work since, submitting a form will always reload the page.

Also I'm seeing a pattern in your HTML snippet, that you are adding a comma before controller attribute in <g:form> tag. Which may not break now but may be a cause of any unexpected behavior later.

Answer 2

You have not shown where the div with id="hidden_div" is so I am assuming it is right below your form. If the div contains some static data, like let's say a success message, you should be able to hide and show it using:

var div = document.getElementById('hidden_div');
if (div.style.display == 'none') {
  div.style.display = '';
}
return false;

However, if your div contains nothing at this point in time, and you would like to receive some data back from the server and insert it inside that div without refreshing the page, then you should be using AJAX. This is because the onSubmit event handler actually will execute this method, but an empty div will not be visible anyway. Please look into AJAX and jQuery for further information.