如何在 hook_form_alter 方法中单击它时添加提交按钮并显示隐藏的 <div>答案

【问题标题】：How to add submit button and show the hidden <div> when you click on it in hook_form_alter method如何在 hook_form_alter 方法中单击它时添加提交按钮并显示隐藏的 <div>
【发布时间】：2015-09-08 07:54:43
【问题描述】：

我正在使用 css 隐藏 <div>，我希望它在我单击按钮时显示。

这是我的代码，

function jobs_form_search_api_saved_searches_save_form_alter(&$form, &$form_state, $form_id) {
  $form['actions']['set'] = array(

        '#type' => 'submit',
        '#value' => t('set'),
        '#submit' => array('jobs_search_alert_mail_submit'),
        '#weight' => 3,
         );

             }

我可以添加设置按钮，谁能帮我点击按钮时如何显示隐藏的<div>？

【问题讨论】：

是drupal还是什么？如果是这样，您应该添加适当的标签。

标签： javascript jquery drupal hook alter

【解决方案1】：

好吧，由于您的问题没有额外的 HTML 或 JS，这里有一个 basic 示例，您可以如何实现这一点。

CSS

#hiddenDiv{
    margin:10px;
    padding:10px;
    width:200px;
    height:200px;
    background: red;
    display: none;
}

HTML

<div id="hiddenDiv"></div>
<button id="showDiv">Show it!</button>

$('#showDiv').click(function(){
    $('#hiddenDiv').show(1000);
});

Fiddle

【讨论】：

【解决方案2】：

首先，您要定义一个_form_alter 钩子，因此请确保您只更改您想要的形式，方法是检查$form_id 的值，或者将您的函数命名为HOOK_form_FORM_ID_alter。

提交表单通常会发送一个同步的 HTTP 请求，该请求会产生重新加载。如果目标是覆盖它并改为使用 AJAX 行为，您应该查看Form API's #ajax property。

如果您的目标只是挂钩按钮单击事件，在用户单击按钮和页面重新加载之间显示一个框（并且不妨碍正常的提交过程），那么您只需要插入一个新的Javascript 文件，并执行类似的操作

$('form#FORM_ID').submit(function() {
  $('.YOUR_HIDDEN_DIV').show();
}

【讨论】：