Radio Buttons in Widget

  • Resolved DesignLoud

    (@designloud)


    11 years, 10 months ago

    Hello, I am trying to incorporate some radio buttons in a widget I am doing and have run into a hiccup. When I save the selection does not save and on the front end the selection is not shown.. I am following the WP FooBar example but cant figure out how to get the radios working correctly, I’m sure its because I am not properly getting the values but like I said, I dont really know how to go about getting them. Below is a sample of what I am working with, can anyone chime in or faced the same problem in the past?

    public function widget( $args, $instance ) {
		extract( $args );
		$title = apply_filters( 'widget_title', $instance['title'] );

		$rating = $instance['rating'];

		echo $before_widget;
		if ( ! empty( $title ) )
			echo $before_title . $title . $after_title;

		echo '<p><strong>Rating:</strong>&nbsp;&nbsp;' . $rating . '</p>';

		echo $after_widget;
	}

	public function update( $new_instance, $old_instance ) {
		$instance = array();

		$instance['rating'] = strip_tags( $new_instance['rating'] );		

		return $instance;
	}

	public function form( $instance ) {

		if ( isset( $instance[ 'rating' ] ) ) {
			$rating = $instance[ 'rating' ];
		}
		else {
			$rating = __( '', 'text_domain' );                          //do radio
		}

		?>
        <p>
		<label for="<?php echo $this->get_field_id( 'rating' ); ?>"><?php _e( 'Rating:' ); ?></label> 

        <input type="radio" id="<?php echo $this->get_field_id( 'rating' ); ?>" name="<?php echo $this->get_field_name( 'rating' ); ?>" value="<?php echo esc_attr( $rating ); ?>">1<br>
        <input type="radio" id="<?php echo $this->get_field_id( 'rating' ); ?>" name="<?php echo $this->get_field_name( 'rating' ); ?>" value="<?php echo esc_attr( $rating ); ?>">2<br>
        <input type="radio" id="<?php echo $this->get_field_id( 'rating' ); ?>" name="<?php echo $this->get_field_name( 'rating' ); ?>" value="<?php echo esc_attr( $rating ); ?>">3<br>
        <input type="radio" id="<?php echo $this->get_field_id( 'rating' ); ?>" name="<?php echo $this->get_field_name( 'rating' ); ?>" value="<?php echo esc_attr( $rating ); ?>">4<br>
        <input type="radio" id="<?php echo $this->get_field_id( 'rating' ); ?>" name="<?php echo $this->get_field_name( 'rating' ); ?>" value="<?php echo esc_attr( $rating ); ?>">5<br>
		</p>

		<?php
	}

}
Viewing 2 replies - 1 through 2 (of 2 total)

  • The form() method:
    The HTML “id” attribute has to be unique in order to form a valid DOM element. This can be achieved by simply adding a -{nr}
    The “for” attribute of each(!) <label> element refers to that id. Though this would be the correct way, having a proper id and for attribute will only matter for DOM operations, not for saving the widget data itself.

    The “value” attribute of each radio element also has to be unique, otherwise you cannot save “different” ratings/values.

    public function form( $instance ) {

    echo "    <p>\n";
    echo "     <legend>Rating:</legend>\n";

    // 0 being the default value or "no rating set (yet)"
    $rating = ( isset( $instance['rating'] ) && is_numeric( $instance['rating'] ) ) ? (int) $instance['rating'] : 0;

    for( $n = 1; $n < 6; $n++ ) {

      echo '     <input type="radio" id="' . $this->get_field_id( 'rating' ) . '-' . $n . '" name="' . $this->get_field_name( 'rating' ) . '" value="' . $n . '" ' . checked( $rating == $n, true, false ) . '><label for="' . $this->get_field_id( 'rating' ) . '-' . $n . '"> ' . $n . '</label><br />' . "\n";

    }

    echo "    </p>\n";

  }

    The update() method:
    Basically that’ll do but the idea is to properly validate the data before saving it. And since you know your value should be numerical and more specific, between 1-5 (or in my example 0 and 5) you could explicitly test for that rule.

    public function update( $new_instance, $old_instance ) {

    $instance = array();

    $instance['rating'] = ( isset( $new_instance['rating'] ) && $new_instance['rating'] > 0 && $new_instance['rating'] < 6 ) ? (int) $new_instance['rating'] : 0;

  return $instance;

  }

    Thread Starter DesignLoud

    (@designloud)

    AHH, Thank you so much! That was where I was lost was setting the value and retrieving it. Everything works perfect now

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Radio Buttons in Widget’ is closed to new replies.