How to add submit button and show the hidden <div> when you click on it in hook_form_alter method

Question

I'm hiding a <div> using css and i want it to display when i click on the button.

here is my code,

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,
         );

             }

I'm able to add set button, can anyone help me how do i show hidden <div> when i click on the button?

Answer 1

Well, as your question has no additional HTML or JS, here is a basic example how you could achieve this.

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>

JS

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

Fiddle

Answer 2

First, you are defining a _form_alter hook, so make sure that you are altering only the form you want, by either checking $form_id 's value, or by naming your function HOOK_form_FORM_ID_alter .

Submitting a form usually sends a synchronous HTTP request that will produce a reload. If the goal is to override that and instead have an AJAX behaviour, you should have a look at the Form API's #ajax property .

If your goal is just to hook on the button click event, to display a box between the moment user clicked the button, and the page reloaded (and not prevent the normal submission process), then you only need to insert a new Javascript file, and do something like

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