Javascript DOM/Listbox not working with Widget

Hey guys,

I have created a sample plugin that has a widget. The widget is using a dropdown listbox, a button called Load Content, and a textarea for Content. The listbox has a listing of favorite fruits. The listbox uses a button called “Load Content”. When the user selects a favorite fruit from the dropdown list and clicks on the “Load Content” button, the corresponding text for the fruit selection is loaded in the text area.

I use the the same scenario in my plugin’ Options Page. Everything works perfect. However, the same exact code will not work for the widget. Can someone please walk me step by step through an example of how to use a listbox using Javascript DOM (document.getElementById(“favoritefruitlist”).value) to access the listbox values in a widget. Javascript DOM access for textarea doesn’t work either (document.getElementById(“fruitcontent”).value).

I have used both getElementById for id and getElementsByName for name in select statement as well as for textarea. I have used $this->get_field_id as well as without it for both textarea as well as select statement.

I register the widget. The widget registration works just fine. I am having an issue with the Javascript DOM/dropdown listbox.

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 = “MYP Plugin allows you pick your favorite fruit and loads your favorite fruit’s content.”;

$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=’selected’ “; break;
case “Cantaloupes”: $cantaloupes=” selected=’selected’ “; break;
case “Honeydew Melons”: $honeydewmelons=” selected=’selected’ “; break;
case “Watermelons”: $watermelons=” selected=’selected’ “; break;
case “Mangos”: $mangos=” selected=’selected’ “; break;
case “Pineapples”: $pineapples=” selected=’selected’ “; break;
case “Coconuts”: $coconuts= ” selected=’selected’ “; break;
case “None”:
default: $none = ” selected=’selected’ “; break;
}
?>
<p>Title: <input type=”text” length=”60″ size=”40″ class=”widefat” name=”<?php echo $this->get_field_name(‘myp-title’); ?>” value=”<?php echo $title; ?>” /></p>

<p><select name=”<?php echo $this->get_field_name(‘myp-favorite-fruit’); ?>” id=”<?php $this->get_field_id(‘myp-favorite-fruit’); ?>”>

<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 Fruit” onclick=”javascript:myp_load_fruit();”/></p>

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

<script type=”text/javascript”>

function myp_load_fruit()
{
favoritefruit = document.getElementById(“myp-favorite-fruit”).value;
// document.getElementById(“myp-content”).value = favoritefruit;

document.write(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

Please help. I have been pulling my hair out on this one for the past three days. I would really appreciate it. Thank you.