By chrisdpucci on

Hey guys,

I'm working in the 6.x API and am having a bit of trouble getting something fairly simple to work. As the title says, I'm trying to get a select element to submit the form onchange.

I've added the proper JS code and it seems to "work", but it isn't actually submitting the form through the drupal submit hook. This is what I have in the way of code:

$form['jump_value'] = array(
  '#type' => 'select',
  '#default_value' => $currentAsset,
  '#options' => $assetValues,
  '#attributes' => array('onchange' => 'this.form.submit();'),
);

I thought maybe I needed to specifically submit to the submit function, but I'm not exactly sure how to do that. Any help is appreciated.

Thanks,

Chris

⋅ Categories: Drupal 6.x

Comments

yuriy.babenko’s picture

yuriy.babenko commented

You're adding the javascript submit call to the 'form' child of the submit button - which doesn't exist.

Try: document.form-name.submit();
---
Yuriy Babenko
www.yubastudios.com
My Drupal tutorials: http://yubastudios.com/blog/tag/tutorials

---
Yuriy Babenko | Technical Consultant & Senior Developer
http://yuriybabenko.com

chrisdpucci’s picture

chrisdpucci commented

Thanks,

Your suggestion didn't actually work, but it did give me an idea of what to try that did end up working.

Just in case anyone comes across this in the future here is what I did:

'onchange' => 'form.submit('{form_name}')'

Pretty simple really, just needed to have my brain bumped in the right direction. :)

yuriy.babenko’s picture

yuriy.babenko commented

Glad you sorted it out. Kind of strange that document.form-name.submit(); didn't work though, as it's native JavaScript... did you have name="form-name" in the form tag?

---
Yuriy Babenko
www.yubastudios.com
My Drupal tutorials: http://yubastudios.com/blog/tag/tutorials

---
Yuriy Babenko | Technical Consultant & Senior Developer
http://yuriybabenko.com

chaldar’s picture

chaldar commented

This is nice and it works for me. But if I remove the submit button (it's redundant now with onchange) that I had in the form, the form submission doesn't call my submit function for the form. The page gets reloaded. The new selection persists as expected. What am I missing? This is with D5.9.

yuriy.babenko’s picture

yuriy.babenko commented

Try adding a hidden form item with the name 'op' and value 'Submit'.
---
Yuriy Babenko
www.yubastudios.com
My Drupal tutorials: http://yubastudios.com/blog/tag/tutorials

---
Yuriy Babenko | Technical Consultant & Senior Developer
http://yuriybabenko.com

chaldar’s picture

chaldar commented

I'm afraid it still doesn't work unless I have a '#type' => 'submit' form element. Here's the skeleton of my code:

function mymodule_select() {
  $setting = variable_get('mymodule_setting', 1);
  $options = array('' => t('-Please select-'));
  if ($setting == 1) {
    $options[2] = t('Setting 2');
  } else {
    $options[1] = t('Setting 1');
  }
  $form['setting'] =
    array('#type' => 'select', '#title' => od_t('Setting'),
          '#options' => $options, '#default_value' => '',
          '#attributes' => array('onchange' => "form.submit('mymodule_select')"));
  $form['go'] = array('#type' => 'submit', '#value' => t('Go'));
  // $form['op'] = array('#type' => 'value', '#value' => t('Go'));
  // $form['op'] = array('#type' => 'hidden', '#value' => t('Go'));
  return $form;
}

function mymodule_select_submit($form_id, $form_values) {
  variable_set('mymodule_setting', $form_values['setting']);
}

This works as expected and the onchange selection successfully calls the submit function and on return from the submit the select options in the form change. However, if I replace the submit button line with any of the commented out lines, the onchange does not call the submit function any longer. What am I doing wrong? Thanks in advance.

gforce301’s picture

gforce301 commented

Explicitly give it the name property of op. Like so '#name' => 'op'.

gforce301’s picture

gforce301 commented

To be more precise:

$form['op'] = array (
  '#type' => 'hidden',
  '#value' => 'Submit',
  '#name' => 'op',
  '#id' => 'edit-submit',
);

The id property is probably unnecessary but it makes the hidden 'mimic' a standard submit button exactly.

chaldar’s picture

chaldar commented

Thanks, but this still didn't work. I tried with and without the #id, still no change.

Perhaps onchange submit is an important enough feature that this needs some documentation within Drupal docs?

yuriy.babenko’s picture

yuriy.babenko commented

If what gforce posted doesn't work for you, there's a last resort: hide the submit button with CSS. You can either define this CSS manually in one of your CSS files, or:

$form['go'] = array('#type' => 'submit', '#value' => t('Go'), '#attributes' => array('style', 'display: none;'));

---
Yuriy Babenko
www.yubastudios.com
My Drupal tutorials: http://yubastudios.com/blog/tag/tutorials

---
Yuriy Babenko | Technical Consultant & Senior Developer
http://yuriybabenko.com

chaldar’s picture

chaldar commented

This did the trick finally. I didn't meddle with any external CSS, just added the display:none style attribute to the button itself. Thanks a lot.

benoit.borrel’s picture

benoit.borrel commented

Yuri Babenko made a typo.

One should read: 

<?php>
$form['go'] = array('#type' => 'submit', '#value' => t('Go'), '#attributes' => array('style' => 'display: none;'));
?>

Note the '=>' between the array key 'style' and value 'display: none;'.

Cheers,

patiljivan’s picture

patiljivan commented

Thanks for giving inputs

$form['submit'] = array(
'#type' => 'submit',
'#value' => t('Go'),
'#attributes' => array('style' => 'display:none;')
);

gforce301’s picture

gforce301 commented

Gave you the same answer chaldar on the other thread where you posted this same issue and I gave you the answer over 2 hours before you re-submitted the question here.

yuriy.babenko’s picture

yuriy.babenko commented

It's 2008 - you can't expect people to read answers to their questions ;)

---
Yuriy Babenko
www.yubastudios.com
My Drupal tutorials: http://yubastudios.com/blog/tag/tutorials

---
Yuriy Babenko | Technical Consultant & Senior Developer
http://yuriybabenko.com

gforce301’s picture

gforce301 commented

Ha ha

chaldar’s picture

chaldar commented

Thanks to both of you for the answer.

My apologies for multiple postings of the question. I should have checked the first thread before posting again.

Biodroid’s picture

Biodroid commented

Your solution helped me out with my issue, thanks for doing the leg work here :)

lucsan’s picture

lucsan commented

After some considerable messing about with this one I found the most efficient to be

'#attributes' => array('onchange' => 'document.id-of-the-form.submit();'),

This method does not require a submit button, it will call the first submit button on the form.
If there is no submit button on the form hook_form_submit() will not be called, but hook_form_validate() will.

note: from previous examples document.form.submit() - might be interpreted as the word form, form name etc. I found only the form-id worked.

aaronaverill’s picture

aaronaverill commented

Watch out for those hyphen in javascript.

'#attributes' => array('onChange' => 'document.getElementById("id-of-the-form").submit();'),

This still requires a hidden submit button.