By aWileyMcGee on

Thank you for your attention to this.

I have looked through Pro Drupal Development, Google searched and read most of the Drupal 6 JavaScript and jQuery eBook.

I am trying to adapt this tutorial from Google Maps API into a module for Drupal.

http://code.google.com/intl/en-EN/apis/maps/articles/phpsqlsearch.html

My issue is, I cannot for the life of me, cannot figure out how to pass variables from the form and call a javascript function. I can do it through Firebug in the console, but not in the form.

The main problem with the following code is getting the Drupal.setting object to accept the values I am passing. I can get the Drupal.settings object to accept the values in the test_page function. I did not add it here. It is just html rendering and drupal_get_form.

In the submit function I cannot see my changes to Drupal.setting take affect.

I am also confused about how to actually call my function, once the variables are being stored in Drupal.settings.

I want to call document.searchLocations() and am unclear of the syntax for doing that correctly.

My code is as follows:

The actual form:

function test_form() { 
  $form = array();
  $form['locator_address'] = array(
    '#type' => 'textfield',
    '#title' => t('Testy'),    
    '#default_value' => 'Enter your address here.', 
    '#required' => TRUE
  );
  $form['miles'] = array(
    '#type' => 'select', 
    '#title' => t('Distance in Miles'), 
    '#default_value' => variable_get('miles', 5),       
    '#options' => array('5' => t('5'), '25' => t('25'), '50' => t('50'), '75' => t('75'), '100' => t('100'), '200' => t('200'))
  );
  
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Test Variables!',   
    '#submit' => 'test_form_submit'             
  );
  return $form;
}

This is the submit function:

function test_form_submit($form, &$form_state) {
  $test_settings = array(
  'address' => $form_state['values']['locator_address'],
  'miles' => $form_state['values']['miles']
  );
  // test is the name of the module, it will be finder if I can get this to work.
  drupal_add_js(array('test' => $test_settings), "setting");
}

In the javascript I would then pull the variables this way.

var address = Drupal.settings.test.address;
var miles = Drupal.settings.test.miles;

Again, thank you for any help or guidance.

Kyle (zen_lunatic3)

⋅ Categories: Drupal 6.x

Comments

jaypan’s picture

jaypan
Location Victoria, BC
commented

_submit() functions are run on the server, and send no output to the browser. Javascript is run in the browser. This is why your drupal_add_js() isn't working.

If you want to show the map on the same page as the form, then save the relevant values to $form_state['storage'] in your submit function. When vlaues exist in $form_state['storage'], the values are passed back to the form and the form is rebuilt. You can then add values to the Drupal JS object in your form function.

Contact me to contract me for D7 -> D10/11 migrations.

aWileyMcGee’s picture

aWileyMcGee commented

Thanks Jay.

I am still confused. I have not responded sooner, because I have been trying to implement your suggestion, still no dice.

This is what I have done.


/**
 * Test form.
 */
function test_form() { 
  $form = array();
  $form['address'] = array(
    '#type' => 'textfield',
    '#title' => t('Locations.'),    
    '#default_value' =>  'Enter your address here',
    '#required' => TRUE
  );
  $form['miles'] = array(
    '#type' => 'select', 
    '#title' => t('Distance in Miles'), 
    '#default_value' => '100',      
    '#options' => array('5' => t('5'), '25' => t('25'), '50' => t('50'), '75' => t('75'), '100' => t('100'), '200' => t('200'))
  ); 

  // This is where I am using $form_state['storage']

  $form_state['storage']['address'] = $form_state['values']['address'];
  
  $form_state['storage']['miles'] = $form_state['values']['miles'];
  
  // Setting up the array for sending to javascript
 
  $test_form_settings = array(
  'address' => $form_state['storage']['address'],
  'miles' => $form_state['storage']['miles']
  );
  
  // Adding the Drupal.settings here.
  drupal_add_js(array('test' => $test_form_settings), "setting");   

  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Search Locations'                   
  ); 
  return $form;
}


/**
 * Test form submit.
*/
function test_form_submit($form, $form_state) { 
    // Store the call to javascript function
    $output = print '
    <script type="text/javascript"> 
      window.onload=searchLocations;      
    </script>'; 
  return $output;
}

With this approach I can now see, in Firebug, Drupal.settings.test.address and Drupal.settings.test.miles. They are both NULL.
I am using the window.onload. I tried to use jQuery document ready and it was not working.

Thanks again,
Kyle

** Edited to change code

jaypan’s picture

jaypan
Location Victoria, BC
commented

First a hint: You almost NEVER print anything to the screen in Drupal. You always return a value. So that alone shows that your submit function is wrong.
Second another hint: You never print javascript like that - you add javascript using drupal_add_js.

But, neither or those are specifically your problem. Your problem is that you are still trying to output your javascript to the browser in your submit function. Submit functions do not return or print values, they are only used for doing stuff server-side, generally database manipulation.

But, why don't you tell me what you are trying to do in the first place - because what you have in your current function doesn't make any sense. It appears that you are trying to redirect the user with javascript based on the data they enter into the form, but you would use drupal_goto() to redirect someone, not javascript.

Contact me to contract me for D7 -> D10/11 migrations.

aWileyMcGee’s picture

aWileyMcGee commented

I agree it doesn't make sense and I know I am missing something very simple. I just cannot figure it out.

I am basically trying to convert the following html into Drupal FAPI. 


  <body onload="load()" onunload="GUnload()">
    Address: <input type="text" id="addressInput"/>
     

    Radius: <select id="radiusSelect">

      <option value="25" selected>25</option>
      <option value="100">100</option>

      <option value="200">200</option>

    </select>

    <input type="button" onclick="searchLocations()" value="Search Locations"/>

I have tried the following as part of the submit element in the form array.

   '#attributes' => array(  'onClick' => "searchLocations();")

Which did not work.

It is from this tutorial:

http://code.google.com/intl/en-EN/apis/maps/articles/phpsqlsearch.html

The ultimate goal is to convert the tutorial into a form in a block that gives the end user a map with nearby locations.

Like the functionality on this site, on the bottom left "Find a Chipotle":

http://www.chipotle.com/

I just need to figure out to pass variables from a form into a javascript function.

Is that enough information?

Thanks for your help,
Kyle

jaypan’s picture

jaypan
Location Victoria, BC
commented

Yes. Here is an abbreviated form of how to do what you want (though you will have to re-work it to your code).

function my_form($form_state)
{
  $form['somevalue'] = array
  (
    '#type' => 'textfield',
    '#title' => t('Enter a value'),,
  );
  if(isset($form_state['storage']))
  {
    // this is only entered after the form has been submitted once
    $test_form_settings = array
    (
      'somevalue' => $form_state['storage']['somevalue'],

    );
 
　　// Adding the Drupal.settings here.
   drupal_add_js(array('test' => $test_form_settings), "setting");
   drupal_add_js('Drupal.behaviors.myModule = function() { load(); }', 'inline');
  }
}

function my_form($form, &$form_state)
{
  // if $form_state['storage'] is set, the form is reloaded, rather than built fresh
  $form_state['storage']['somevalue'] = $form_state['values']['somevalue'];
}

Something like this. I didn't test it for bugs, but it's pretty close to what you want.

Contact me to contract me for D7 -> D10/11 migrations.

aWileyMcGee’s picture

aWileyMcGee commented

The only differences I made are the following:

I moved this statement up to the function that renders the page.

  drupal_add_js('Drupal.behaviors.myModule = function() { load(); }', 'inline');

I renamed the second function to:

  function my_form_submit($form, &$form_state)

Thank you so much,

Kyle

Johnny Gav’s picture

Johnny Gav commented

i will use the custom module i have created in

...
/**
* Implementation of theme_eureka().
*/
function ykyuen_preprocess_eureka($variables) {
$variables['extra'] = variable_get('eureka_greeting', 'Hello World!');
$variables['my_form'] = drupal_get_form('ykyuen_greeting_form');
if (isset($_SESSION['greeting'])) {
// Call the javascript if $_SESSION['greeting'] is set
$greeting = $_SESSION['greeting'];
drupal_add_js("Drupal.behaviors.ykyuen = function() { alert('$greeting'); }", 'inline');
unset($_SESSION['greeting']);
}
}

/**
* Custom form
*/
function ykyuen_greeting_form($form_state) {
$form['greeting'] = array(
'#type' => 'textfield',
'#title' => t('Enter the greeting message'),
);
$form['submit'] = array(
'#type' => 'submit',
'#value' => 'Submit'
);

if(isset($form_state['storage'])) {
$_SESSION['greeting'] = $form_state['storage']['alert_msg'];
}
return $form;
}

/**
* Custom form submission callback
*/
function ykyuen_greeting_form_submit($form, &$form_state) {
// Set the $form_state['storage'] whenever the form is submitted
$form_state['storage']['alert_msg'] = 'Hello World';
}

logo design application developer

tinem’s picture

tinem commented

Maybe my solution would be of interest for you http://groups.drupal.org/node/94184 - still waiting to hear from the gurus if there could be problems making it this way.

If you have any comments please make them in this thread http://groups.drupal.org/node/94184.

zahidansari’s picture

zahidansari commented

I want to add the below js to a _submit function. Can anyone tell me how to do it.

<script language = 'javascript'>
								var sStr = '$cookie_html';
								var aaa = 'session_values';
								var domain = '$bvurl';
								document.cookie = aaa+'='+sStr+'; path=/';

								if (sStr!='null')
								   {
									   window.location = 'custom_page/homepage.html';
								   }
</script>

where $cookie_html is coming from php code.

I have given something like 

drupal_add_js(array('s_val'=>array('session_val'=>$cookievalue)),'sites/all/themes/pluralism/login.js');

and inside login.js I have added the js code but its not working. Please help me out

dineshjajoo’s picture

dineshjajoo commented

I am getting an error 'gbrowseriscompatible is not defined' in js file .

Do you have any idea , how to resolve the error

jaypan’s picture

jaypan
Location Victoria, BC
commented

The way to resolve it is to make sure it is defined before you try to call it.

But without seeing your code, no one can tell you how you would do that.

Contact me to contract me for D7 -> D10/11 migrations.

dineshjajoo’s picture

dineshjajoo commented

I have added src of it in init hook, but after loading of a page , I checked my source code and could not able to find out this script source in my head tag. 

drupal_add_html_head('<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>');
jaypan’s picture

jaypan
Location Victoria, BC
commented

There are one of two reasons for that:

1) That function doesn't exist in Drupal 6 (which this thread is about), or:
2) If you are using D7, the function exists, but you need to pass it a render array, not a string.

Contact me to contract me for D7 -> D10/11 migrations.