Javascript's getElementByID using widgets doesn't work

I have created a sample plugin which has a widget. The widget has a title attribute, a dropdown listbox which has a list of fruits (as well as a “none” option within the list), a button called Load Content, and a textarea. When you select a fruit and click on the Load Content button, the corresponding fruit’s content should be loaded into the textarea. However, for simplicity, first I am just attempting to add the value passed by the dropdown list.

For example, when you select Coconuts from the dropdown list and click on Load Content, you should see the word “Coconuts” in the textarea. Instead, nothing happens when i click on the “Load Content: button. BTW, the “Load Content” button is an input button type. See code further on down.

I thought this would be a simple Javascript implementation. However, it is not working for widgets. On my options page however, I use the same code and it works fine on my options page. The only difference is the way you save data. On the options page, I use options to save data. On the widget, I use an instance variable with appropriate fields.

It’s the Javascript’s getElementById I am having an issue with. Here is my code:

class My_Plugin extends WP_Widget
{

/*****************************************************************************
*
* Function Name: My_Plugin
* Description: This is a PHP 4 Compatible constructor. Calls the PHP 5
* constructor.
* Input Parameters: None
* Output Parameters: None
* Return: Nothing
* Assumptions: None
* Functions: __construct() – PHP 5 constructor
*
*****************************************************************************/

function My_Plugin()
{
$this->__construct();

} //end My_Plugin

/*****************************************************************************
*
* Function Name: __construct()
* Description: This is a PHP 5 constructor. This function initializes the
* My_Plugin widget and adds the initialized widget on the
* main Widget Dashboard.
* Input Parameters: None
* Output Parameters: None
* Return: Nothing
* Assumptions: None
* Functions: None
*
*****************************************************************************/

function __construct()
{
$description = “Pick your favorite fruit from the dropdown list, and watch the My Plugin widget load your favorite fruit’s content within the textarea.”;

$myp_widget_ops = array(‘classname’=>’My_Plugin’, ‘description’=>__($description, ‘myp-plugin’));

$this->WP_Widget(‘My_Plugin’, ‘My Plugin’, $myp_widget_ops);

} //end __construct()

/*****************************************************************************
*
* Function Name: form()
* Description: This function displays the widget form in the sidebar of the
* Widget Dashboard.
* Input Parameters: $instance – the instance of My_Plugin
* Output Parameters: None
* Return: Nothing
* Assumptions: None
* Functions: None
*
*****************************************************************************/

function form($instance)
{
$title = esc_attr(strip_tags($instance[‘myp-title’]));
$mypfavoritefruit = $instance[‘myp-favorite-fruit’];
$content = $instance[‘myp-content’];

switch($mypfavoritefruit)
{
case “Papayas”: $papayas=”selected”; break;
case “Cantaloupes”: $cantaloupes=”selected”; break;
case “Honeydew Melons”: $honeydewmelons=”selected”; break;
case “Watermelons”: $watermelons=”selected”; break;
case “Mangos”: $mangos=”selected”; break;
case “Pineapples”: $pineapples=”selected”; break;
case “Coconuts”: $coconuts=”selected”; break;
case “None”:
default: $none = “selected”; break;
}

?>
<p>Title: <input type=”text” class=”widefat” name=”<?php echo $this->get_field_name(‘myp-title’); ?>” id=”myp-title” value=”<?php echo $title; ?>” /></p>

<p><select name=”<?php echo $this->get_field_name(‘myp-favorite-fruit’); ?>” id=”myp-favorite-fruit” onclick=”javascript:fruit=this.value;”>

<option <?php echo $papayas; ?> value=”Papayas”>Papayas</option>
<option <?php echo $cantaloupes; ?> value=”Cantaloupes”>Cantaloupes</option>
<option <?php echo $honeydewmelons; ?> value=”Honeydew Melons”>Honeydew Melons</option>
<option <?php echo $watermelons; ?> value=”Watermelons”>Watermelons</option>
<option <?php echo $mangos; ?> value=”Mangos”>Mangos</option>
<option <?php echo $pineapples; ?> value=”Pineapples”>Pineapples</option>
<option <?php echo $coconuts; ?> value=”Coconuts”>Coconuts</option>
<option <?php echo $none; ?> value=”None”>None</option>

</select>

<input type=”button” value=”Load Content” onclick=”javascript:myp_load_fruit(fruit);”/></p>

<p>Content: <textarea rows=”15″ cols=”40″ class=”widefat” name=”<?php echo $this->get_field_name(‘myp-content’); ?>” id=”mypcontent”><?php echo $content; ?></textarea></p>

<script type=”text/javascript”>

function myp_load_fruit(favoritefruit)
{
// document.write(“You selected ” + favoritefruit + “
“);
document.getElementById(‘mypcontent’).value = favoritefruit;

}

</script>

<?php

} //end form()

/*****************************************************************************
*
* Function Name: update()
* Description: This function updates the widget data. $old_instance =
* $new_instance.
* Input Parameters: $old_instance is assigned $new_instance
* Output Parameters: None
* Return: Nothing
* Assumptions: None
* Functions: None
*
*****************************************************************************/

function update($new_instance, $old_instance)
{

$instance[‘myp-title’] = esc_attr(strip_tags($new_instance[‘myp-title’]));
$instance[‘myp-content’] = $new_instance[‘myp-content’];
$instance[‘myp-favorite-fruit’] = $new_instance[‘myp-favorite-fruit’];

return $instance;

} //end update()

/*****************************************************************************
*
* Function Name: widget()
* Description: This function displays the My_Plugin widget on the sidebar
* on the frontend.
* Input Parameters: $args –
* $instance –
* Output Parameters: None
* Return: Nothing
* Assumptions: None
* Functions: None
*
*****************************************************************************/

function widget($args, $instance)
{
extract($args);
$mypcontent = $instance[‘myp-content’];

//use the before widget html string
echo $before_widget;

//output the title with before & after title html strings
echo $before_title.$instance[‘myp-title’].$after_title;

//display content in textarea
echo $instance[‘myp-content’];

//use the after widget html string
echo $after_widget;

} //end widget

} //end class My_Plugin

I hope someone can help as I have been pulling my hair out the whole week over this thorny issue. Please help. Thank you. I would appreciate it very much.