Question

我有一个表格，当加载一个特定的div被隐藏。我希望我一提交我的表单，我希望该div是可以在我显示我的结果的可变。我正在使用JS的onsubmit（）..但是无法理解为什么它不起作用。这是我的javascript。

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

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

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

这是我的表格

<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

请尝试粘贴完整涵盖此问题的完整代码。你的上一个问题也没有足够的代码。

行document.getElementById(hidden_div);中的 hidden_div 是什么？如果它是您的div标记的ID，则将其用单引号或双引号括起来。此外，您需要在方法的最后添加return false;语句，这将阻止在提交后重新加载页面。

好吧，您必须触发ajax调用才能提交表单，因为您显示的代码将无效，因为提交表单将始终重新加载页面。

此外，我在HTML代码段中看到了一种模式，即您在<g:form>标记中的控制器属性之前添加了一个逗号。现在可能不会破坏，但可能会导致任何意外行为。

Answer 2

你没有显示id =“hidden_div”的div在哪里，所以我假设它在你的表单下方。如果div包含一些静态数据，比如让我们说成功消息，你应该能够隐藏并使用以下方式显示它：

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

但是，如果您的div此时不包含任何内容，并且您希望从服务器接收一些数据并将其插入该div而不刷新页面，那么您应该使用AJAX。这是因为onSubmit事件处理程序实际上将执行此方法，但无论如何都不会显示空div。请查看AJAX和jQuery以获取更多信息。

如何在提交表单后使用javascript显示div

2 个答案: