admin管理员组文章数量:1332382
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:
* Description: Allows the user to select/enter an Event
* Version: 0.12345
* Author: Dan Statham
* Author URI:
*/
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');
?>
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');
?>
- 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 Commented Jun 22, 2020 at 19:04
1 Answer
Reset to default 0This 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>
本文标签： widgetsHow do I find out which ltselect gtltoption ltoptiongt was clicked on
版权声明：本文标题：widgets - How do I find out which <select ><option <option> was clicked on? 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742293913a2448338.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论