0

I am trying to build a widget that has a dropdown (<select), a Text input, a textarea and a submit input. When the widget function builds the components & populates the dropdown from the database custom tables. What I want to happen is, when the user clicks on the dropdown, the text input will get the event name and the id from the <option will be used to get the description, which will go into the textarea. Any new description will update the db record. Any new event name will be added to the table.

I finally figured out that all the user controls are drawn by the widget function, so that is where my code is going. As I have researched "how to" I have added more code, some of which I do not know to use. Like I added an onclick to the select but how is the result returned and how do I use it? Same questions for Javascript.

So, here is the plugin code. Can people who are better at this stuff help me get it working? Thanks...Dan'l

<?php

/**
 * Plugin Name:   Mo_Events
 * Plugin URI:    http://memoriesof.website
 * Description:   Allows the user to select/enter an Event
 * Version:       0.12345
 * Author:        Dan Statham
 * Author URI:    http://www.memoriesof.website
 */
 
function doclick($arg) {
    write_log('gdd >doclick ' . print_r($arg));

    $ev = null;
    $id = null;
    if (isset($arg)) {
        $ev = $arg['event'];
        write_log('gdd <doclick ' . print_r($ev));
        return $ev;
    }
}

class gdd_Events_Widget extends WP_Widget {

    // Set up the widget name and description.
    public function __construct() {
        $widget_options = array('classname' => 'gdd_Events_Widget', 'description' => 'Select an Event');
        parent::__construct('gdd_Events_Widget', 'MO Events', $widget_options);
    }

    // Create the widget output.
    public function widget($args, $instance) {
        if (isset($instance)) {
            //$title = apply_filters( 'widget_title', $instance[ 'title' ] );
            //$blog_title = get_bloginfo( 'name' );
            //$tagline = get_bloginfo( 'description' );
        } else {
            $title = 'Just My Size';
        }
        global $event;
        global $events;
        global $wpdb;

        write_log('gdd before_widget');

        $events = $wpdb->get_results("SELECT id, event FROM mo_events order by event", ARRAY_A);
        write_log('gdd Build form');
        ?>
        <form name='f1' method="POST" action="">
            <fieldset>
                <legend> Select an Event </legend>
                <select class="dropdown" id="eventsdd" name="eventsdropdown" title="Events Dropdown" onclick="doclick($selected)">

                <?php write_log('gdd foreach');
                foreach ($events as $event) {
                    ?>
                    <option value=" <?php echo $event['id'] ?>"><?php echo $event['event'];; ?> </option> 
                    <?php } write_log('gdd Build inputs');
                    ?>
                </select>     
                <p>
                    <label id="label4" for="DESCRIPTION">Description</label>
                    <textarea rows="5" cols="50" form="f1" name="DESCRIPTION" placeholder="Describe the event" id="DESCRIPTION"></textarea>

                <p>
                    <label id= "label2" for="ename">Event</label><br>
                    <input type="text" id="ename" name="EVENT" value = "" placeholder="Select an existing or enter a new event">
                </p>
                </p>
            </fieldset>
            
            <script>
                (function () {
                    var sel;
                    var el;



                    // get references to select list and display text box
                    var sel = document.getElementById('eventsdd');
                    var el = document.getElementById('ename');


                    function getSelectedOption(sel) {

                        var opt;
                        for (var i = 0, len = sel.options.length; i < len; i++) {
                            opt = sel.options[i];
                            if (opt.selected === true) {
                                break;
                            }
                        }
                        return opt;
                    }

                    // assign onclick handlers to the buttons
                    document.getElementById('eventsdd').onclick = function () {
                        el.value = sel.value;
                    }

                }());
        // immediate function to preserve global namespace

                <\script>   
                    </form>
                <?php
                echo $args['after_widget'];
                write_log('gdd after_widget');
            }

            // Create the admin area widget settings form.
            public function form($instance) {
                write_log('gdd begin form');

                global $event;
                global $events;
                global $wpdb;
                $title = !empty($instance['title']) ? $instance['title'] : '';
                ?>
                < /p>
                <?php
                write_log('gdd end form');
            }

            // Apply settings to the widget instance.
            public function update($new_instance, $old_instance) {
                $instance = $old_instance;
                $instance['title'] = strip_tags($new_instance['title']);
                $instance['page'] = strip_tags($new_instance['page']);
                $instance['post'] = strip_tags($new_instance['post']);
                $instance['dropdown'] = strip_tags($new_instance['dropdown']);
                return $instance;
                write_log('<gdd update');
            }

        }

// Register the widget.
        function gdd_register_event_widget() {
            register_widget('gdd_Events_Widget');
        }

        add_action('widgets_init', 'gdd_register_event_widget');
        ?>
1
  • Hello Dan! That's a lot of code, and this might be more of a HTML/Javascript question than anything to do with Wordpress. Have you tried reading about HTML forms and doing a search for javascript to do what you want? Once you have the form doing what you want it's then a bit easier to connect it to Wordpress
    – mozboz
    Jun 22, 2020 at 19:04

1 Answer 1

0

This is what I have come up with that works. In the function widget of the class:

public function widget($args, $instance) {
        if (isset($instance)) {
            //$title = apply_filters( 'widget_title', $instance[ 'title' ] );
            //$blog_title = get_bloginfo( 'name' );
            //$tagline = get_bloginfo( 'description' );
        } else {
            $title = 'Just My Size';
        }
        global $selectedevent;
        global $event;
        global $events;
        global $wpdb;
       
        global $event2;
        
        write_log('gdd before_widget');

        $events = $wpdb->get_results("SELECT id, event FROM mo_events order by event", ARRAY_A);
        write_log('gdd Build form');
        ?>
        <form name='f1' method="POST" action="process_post.php">
            <fieldset>
                <legend> Select an Event </legend>
                <select class="dropdown" id="eventsdd" name="eventsdropdown" title="Events Dropdown"  onclick="doclick(this)" >
                <?php write_log('gdd foreach');?>
                <?php foreach ($events as $event) { 
                   ?> <option value=" <?php echo $event['id'] ?>"><?php echo $event['event'];  ?> </option>
                    
                  <?php } ?>                      
                </select>                

                <p>
                    
                   <input type="text" id="hideme">
                    <input type="text" id="ename" name="EVENT" value = "" placeholder="Select an existing or enter a new event">
                </p>
                <p>
                    <label id="label4" for="DESCRIPTION">Description</label>
                    <textarea rows="5" cols="50" form="f1" name="DESCRIPTION" placeholder="Describe the event" id="DESCRIPTION"></textarea>
                </p>
                
                <input type='submit' id='submit_id' name='submit_id'</input>
            </fieldset>
            
                <?php
                echo $args['after_widget'];
                write_log('gdd after_widget');
            
    }

And the javascript code:


<script>
    
 function isset(_var){
     return !!_var; // converting to boolean.
}   
    var eventId;
    var xmlhttp;
    var xmlhttp = new XMLHttpRequest;
    
    function doclick(ddl){
        $evtid=-1;      
        $evtid =ddl.options[ddl.selectedIndex].value;
              document.getElementById('hideme').value = 
              ddl.options[ddl.selectedIndex].value;
              document.getElementById('ename').value = 
              ddl.options[ddl.selectedIndex].text;
              xmlhttp = new XMLHttpRequest();
              xmlhttp.onreadystatechange = callback;
              xmlhttp.open("POST", "http://www.memoriesof.website/id.php", true);
              xmlhttp.send();       
        
        }
          
    function callback(){
    
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById('DESCRIPTION').innerHTML = xmlhttp.responseText;
        }
    }
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.