Title: Javascript's getElementByID using widgets doesn't work
Last modified: August 20, 2016

---

# Javascript's getElementByID using widgets doesn't work

 *  [greenpeacock](https://wordpress.org/support/users/greenpeacock/)
 * (@greenpeacock)
 * [14 years ago](https://wordpress.org/support/topic/javascripts-getelementbyid-using-widgets-doesnt-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.

The topic ‘Javascript's getElementByID using widgets doesn't work’ is closed to 
new replies.

## Tags

 * [getElementById](https://wordpress.org/support/topic-tag/getelementbyid/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [widgets](https://wordpress.org/support/topic-tag/widgets/)

 * 0 replies
 * 1 participant
 * Last reply from: [greenpeacock](https://wordpress.org/support/users/greenpeacock/)
 * Last activity: [14 years ago](https://wordpress.org/support/topic/javascripts-getelementbyid-using-widgets-doesnt-work/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics