I was unable to get my wordpress widget to post forms correctly. I took the advice on this website and researched the issue (see relevant links at the bottom of the post) to see what the problem was. The first issue was that I could not use “name” for a field. I needed to make sure that the posted name was unique. If not, WordPress would bring me to a “Site Not Found” which was really cryptic.

The key to figuring this out was to start with this example:

https://www.w3schools.com/php/php_forms.asp

I literally copied and pasted that example into the widget function, of course taking out the html head and tail business. It did not work because it was posting to “name” which already existed. Also, the file reference for WordPress did not start in the plugin directory, but rather the wordpress directory; so it ended up looking in the wrong place for the action.php file that is run after the submit is made. Look carefully at the URL address bar when the post is made to see if the action is actually getting to the right place. Finally, I adjusted the address, and everything worked like in the example; however, it left the main WordPress page. So I was stuck.

I put back “” as the action page. I tried the GET method; that did not work for me (and I am still not sure why, but I should adjust it and check it out because GET is preferable for this application; it allows bookmarks); it ended up (thank G-d) that the “post” method worked. (Just now, I changed all occurrences of “post” to “get” and all instances of “POST” to “GET” and it is working as expected. I was having a problem with GET where the URL was being formed correctly and then I could not access it. That problem was I was nesting PHP. I removed all the nested PHP. Along the route, I updated the initial slider value which was not set correctly.

And finally it works!

Starting Code:

 	public function widget( $args, $instance ) {
	/* include "thiswidget.php"; */ /*disable for now*/
      /* Include the widget($args, $instance) function body */
      /* include "businesspartnerships.php"; */ /*Original works fine with id update */
	static $recommended_ex_no = 3;
        static $example_run = 4;
       $example_max = 4;
       $example_min = 0;
       $this_widg_id = $this->id;  /* Get the widget ID to be the unique ID Key */
 
       $default_slider_value = 3;  /*Default slider value if nothing new has been posted */
       if ($example_run > 0) { /*Provide a slider to select examples */
	/*See http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html */
	/*See http://www.html5tutorial.info/html5-range.php */
 	/*See https://www.w3schools.com/php/php_forms.asp */
 	 
        ?><p> Recommended View Example Number: <?php echo $recommended_ex_no ?></p>
        <!-- See: http://stackoverflow.com/questions/11788005/how-to-get-fetch-html5-range-sliders-value-in-php -->
        <form action="" method="post">
    	<input type="range" min="<?php echo $example_min;?>" max="<?php echo $example_max;?>" step="1" value="<?php echo $set_slider_value ?>" id="<?php echo $this_widg_id; ?>" name="<?php echo $this_widg_id; ?>" onchange='document.getElementById("text_<?php echo $this_widg_id; ?>").value = "Slider Value = " + document.getElementById("<?php echo $this_widg_id; ?>").value;'/>
	<br><center><input type="text" style="text-align: center" name="text_<?php echo $this_widg_id; ?>" id="text_<?php echo $this_widg_id; ?>" value="Slider Value = <?php echo $set_slider_value ?>" disabled /></center>
	<br />
	<center><input style="text-align: center" type="submit" value="Submit" /></center>
	</form>	

	<?php
	$this_widg_id = esc_attr( $this->id) ;  /* Get the widget ID to be the unique ID Key */
 
 	echo "The key is : "; echo esc_attr( $this->id); echo "<br><br>";
	if(isset($_POST[esc_attr( $this->id)])){
		echo '<br> isset below get <br>';
		echo "<center>The example selected is: ".$_POST[esc_attr( $this->id)]." </center>";
    	// Your Slider value is here, do what you want with it. Mail/Print anything..
    		$example_run = $_POST[esc_attr( $this->id)];
    		$set_slider_value = $_POST[esc_attr( $this->id)];  /*If the value has been posted, then show it.*/
	} else {
       		/* $set_slider_value = $default_slider_value; */ /* Slider value is initially set to default. */ 
	}
	}

	/* Try https://www.w3schools.com/php/php_forms.asp example here, since form update was not working before */
	?>
	<!-- <form action="wp-content/plugins/carousel_edit_url_for_newspro/welcome_get.php" method="post"> -->
	
	<form action="" method="post">
	
	Name: <input type="text" name="thisexname"><br>
	<!-- E-mail: <input type="text" name="email"><br> -->
	<input type="submit">
	</form>
	
	<?php 
	if (isset($_POST[esc_attr("thisexname")])){
		echo 'Welcome '; echo $_POST["thisexname"]; echo "<br>";
		}
	?>

	<?php
	/*Setup example runs;  an example run of 0 does not run! */
      	
      if ($example_run > 0) {
      	echo '<p>Example content being viewed currently is now example number '.$example_run.':';
      	}
...

Intermediate code (full Widget Function):

 	public function widget( $args, $instance ) {
	/* include "thiswidget.php"; */ /*disable for now*/
      /* Include the widget($args, $instance) function body */
      /* include "businesspartnerships.php"; */ /*Original works fine with id update */
	static $recommended_ex_no = 3;
        static $example_run = 4;
       $example_max = 4;
       $example_min = 0;
       $this_widg_id = $this->id;  /* Get the widget ID to be the unique ID Key */
 
       $default_slider_value = 3;  /*Default slider value if nothing new has been posted */
       if ($example_run > 0) { /*Provide a slider to select examples */
	/*See http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html */
	/*See http://www.html5tutorial.info/html5-range.php */
 	/*See https://www.w3schools.com/php/php_forms.asp */
 	 
        ?><p> Recommended View Example Number: <?php echo $recommended_ex_no ?></p>
        <!-- See: http://stackoverflow.com/questions/11788005/how-to-get-fetch-html5-range-sliders-value-in-php -->
        <form action="" method="get">
    	<input type="range" min="<?php echo $example_min;?>" max="<?php echo $example_max;?>" step="1" value="<?php echo $set_slider_value ?>" id="<?php echo $this_widg_id; ?>" name="<?php echo $this_widg_id; ?>" onchange='document.getElementById("text_<?php echo $this_widg_id; ?>").value = "Slider Value = " + document.getElementById("<?php echo $this_widg_id; ?>").value;'/>
	<br><center><input type="text" style="text-align: center" name="text_<?php echo $this_widg_id; ?>" id="text_<?php echo $this_widg_id; ?>" value="Slider Value = <?php echo $default_slider_value ?>" disabled /></center>
	<br />
	<center><input style="text-align: center" type="submit" value="Submit" /></center>
	</form>	

	<?php
	$this_widg_id = esc_attr( $this->id) ;  /* Get the widget ID to be the unique ID Key */
 
 	echo "The key is : "; echo esc_attr( $this->id); echo "<br><br>";
	if(isset($_GET[esc_attr( $this->id)])){
		echo '<br> isset below get <br>';
		echo "<center>The example selected is: ".$_GET[esc_attr( $this->id)]." </center>";
    	// Your Slider value is here, do what you want with it. Mail/Print anything..
    		$example_run = $_GET[esc_attr( $this->id)];
    		$set_slider_value = $_GET[esc_attr( $this->id)];  /*If the value has been posted, then show it.*/
	} else {
       		/* $set_slider_value = $default_slider_value; */ /* Slider value is initially set to default. */ 
	}
	}

	/* Try https://www.w3schools.com/php/php_forms.asp example here, since form update was not working before */
	?>
	<!-- <form action="wp-content/plugins/carousel_edit_url_for_newspro/welcome_get.php" method="post"> -->
	
	<form action="" method="get">
	
	Name: <input type="text" name="thisexname"><br>
	<!-- E-mail: <input type="text" name="email"><br> -->
	<input type="submit">
	</form>
	
	<?php 
	if (isset($_GET[esc_attr("thisexname")])){
		echo 'Welcome '; echo $_GET["thisexname"]; echo "<br>";
		}
	?>

	<?php
	/*Setup example runs;  an example run of 0 does not run! */
      	
      if ($example_run > 0) {
      	echo '<p>Example content being viewed currently is now example number '.$example_run.':';
      	}
      if ($example_run == 1) {
        echo '<p>Example Business Partnerships Begins</p>';
        include "businesspartnerships.php";  /*full copy*/
        echo '<p>Example BP Ends</p>';
      	}
      elseif ($example_run == 2) {
        echo '<p>Example for Business Begins</b>';
      	include "businesscarousel/business_head.php";  /*content before the loop*/
      	include "businesscarousel/business_loop.php";  /*the loop*/
      	include "businesscarousel/business_tail.php";  /*content after the loop*/
        echo '<p>Example for Business Ends</b>';
      	}
      elseif ($example_run == 3) {
        echo '<p>Example for Books Begins</b>';
        include "bookscarousel/books.php";
        echo '<p>Example for Books Ends</b>';
        }
      elseif ($example_run == 4) {
        echo '<p>Example for Looped Books Begins</b>';
        include "bookscarousel/books_head_vars.php";
        include "bookscarousel/books_head.php";
        include "bookscarousel/books_loop_vars.php";
        include "bookscarousel/books_loop.php";
        include "bookscarousel/books_tail_vars.php";
        include "bookscarousel/books_tail.php";
        echo '<p>Example for Looped Books Ends</b>';
        }
}

I finally cleaned up the code a little bit, taking out the examples and just running with the essentials (verified that this basically worked):

/**
	 * Front-end display of widget.
	 *
	 * @see WP_Widget::widget()
	 *
	 * @param array $args     Widget arguments.
	 * @param array $instance Saved values from database.
	 */
	
  	public function widget( $args, $instance ) {
	/* include "thiswidget.php"; */ /*disable for now*/
      /* Include the widget($args, $instance) function body */
      /* include "businesspartnerships.php"; */ /*Original works fine with id update */
       $example_run = 4;  /*Set to 0 to disable all widget output */
       $example_max = 4;
       $example_min = 0;
       $recommended_ex_no = 4;
       $default_slider_value = 4;  /*Default slider value if nothing new has been posted */

       $this_widg_id = $this->id;  /* Get the widget ID to be the unique ID Key */
 
       if ($example_run > 0) { /*Provide a slider to select examples */ 
        ?><p> The Recommended Example Number To View is Example Number <?php echo $recommended_ex_no ?>.</p>
        <!-- See: http://stackoverflow.com/questions/11788005/how-to-get-fetch-html5-range-sliders-value-in-php -->
        <form action="" method="get">
    	<input type="range" min="<?php echo $example_min;?>" max="<?php echo $example_max;?>" step="1" value="<?php echo $set_slider_value ?>" id="<?php echo $this_widg_id; ?>" name="<?php echo $this_widg_id; ?>" onchange='document.getElementById("text_<?php echo $this_widg_id; ?>").value = "Slider Value = " + document.getElementById("<?php echo $this_widg_id; ?>").value;'/>
	<br><center><input type="text" style="text-align: center" name="text_<?php echo $this_widg_id; ?>" id="text_<?php echo $this_widg_id; ?>" value="Slider Value = <?php echo $default_slider_value ?>" disabled /></center>
	<br />
	<center><input style="text-align: center" type="submit" value="Submit Slider Value" /></center>
	</form>	

	<?php
	$this_widg_id = esc_attr( $this->id) ;  /* Get the widget ID to be the unique ID Key */
 
 	echo '<br><br><center><p style="text-align: center">This example widget instance is entitled, "'; 
 	echo esc_attr( $this->id); echo '".</p></center>';
	if(isset($_GET[esc_attr( $this->id)])){
		/* echo "<center>The example selected is: ".$_GET[esc_attr( $this->id)]." </center>"; */ /*Activate to debug */
    	// Your Slider value is here, do what you want with it. Mail/Print anything..
    		$example_run = $_GET[esc_attr( $this->id)];
    		$set_slider_value = $_GET[esc_attr( $this->id)];  /*If the value has been posted, then show it.*/
		} else {
       		$set_slider_value = $default_slider_value; /* Slider value is initially set to default. */ 
		}
	} /*End if example is >0 */
	/* If not working, adapt https://www.w3schools.com/php/php_forms.asp example here, since form update was not working before */
	/*Setup example runs;  an example run of 0 does not run! */
      	
      if ($example_run > 0) {
      	echo '<center><p style="text-align: center">The example content being viewed currently is now example number '.$example_run.':</p>';
      	}
      if ($example_run == 1) {
        echo '<p>Example Business Partnerships Begins</p>';
        include "businesspartnerships.php";  /*full copy*/
        echo '<p>Example BP Ends</p>';
      	}
      elseif ($example_run == 2) {
        echo '<p>Example for Business Begins</b>';
      	include "businesscarousel/business_head.php";  /*content before the loop*/
      	include "businesscarousel/business_loop.php";  /*the loop*/
      	include "businesscarousel/business_tail.php";  /*content after the loop*/
        echo '<p>Example for Business Ends</b>';
      	}
      elseif ($example_run == 3) {
        echo '<p>Example for Books Begins</b>';
        include "bookscarousel/books.php";
        echo '<p>Example for Books Ends</b>';
        }
      elseif ($example_run == 4) {
        echo '<p>Example for Looped Books Begins</b>';
        include "bookscarousel/books_head_vars.php";
        include "bookscarousel/books_head.php";
        include "bookscarousel/books_loop_vars.php";
        include "bookscarousel/books_loop.php";
        include "bookscarousel/books_tail_vars.php";
        include "bookscarousel/books_tail.php";
        echo '<p>Example for Looped Books Ends</b>';
        }
}
    

Also I had to make sure that the double quote ” was not being used where the better ‘ quote unquote ‘ should be used.

Any advice to do this better?

And the next part of the question: how is this done on the back-end in the widgets appearance part of the admin screen?

Read more here: How to get WordPress frontent widget get/post example working on the front end and back end?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: