Button onClick call PHP function 15

PHP wird serverseitig ausgeführt. Wenn man mittels HTML Button eine PHP Funktion aufrufen möchte, muss man die Seite neu laden und einen Parameter mit übergeben.

Hierzu gibt es von WordPress eine besondere Klasse: „admin-post.php„, die dafür genutzt wird. An diese Klasse/Datei werden die Daten mittels submit Post übermittelt. Dann kann ein „add_action“ Event genutzt werden, um eine PHP Funktion aufzurufen.

1. Schritt

Eine HTML Form mit Textfeld und Button erstellen. Die Form hat eine „action“ welche die POST Daten zu „admin-post.php“ sendet.

<form method="POST" id="myRedirectForm" action="<?php echo home_url() . '/wp-admin/admin-post.php' ?>" >
      <input type="text" name="search" id="myTextInput"/>
      <input type="hidden" name="action" value="redirectByCode">
      <input type="submit" id="mySubmitBtn" value="GO"/>
</form>

Alternativ kann man auch mit Hilfe von Javascript die Werte der Form übermitteln.

jQuery('#searchBtn').on('click', function (){
       jQuery("#myRedirectForm").submit();
});

2. Schritt

Nun kann man ein „add_action“ Event zum Beispiel in „functions.php“ einfügen und diesem eine Funktion zuweisen. Man benötigt zwei actions. Eine für eingeloggte Adminnutzer und eine für alle anderen:

add_action( 'admin_post_redirectByCode', 'redirectToPageByCode' );
add_action( 'admin_post_nopriv_redirectByCode', 'redirectToPageByCode' );

Der erste Teil des Parameters ist bei jedem „add_action“ Event gleich: „admin_post_“. Danach fügt man einfach die Value des hidden Inputfelds aus der Form von oben hinzu.

3. Schritt

Der zweite Parameter ist der Name der Funktion, welche man zum Beispiel auch in „functions.php“ einfügen kann. Folgende Funktion gibt den Wert des Textfeldes, welches mittels Post übermittelt wurde wieder aus:

function displayInputValue(){
	$tempCode = (isset($_POST['search'])) ?sanitize_text_field($_POST['search']) : false;
        echo $tempCode;	
}

Beispiel: redirectToPageByCode

HTML Code in „page.php“:

<form method="POST" id="myRedirectForm" action="<?php echo home_url() . '/wp-admin/admin-post.php' ?>" class="">
		<div class="searchbox">
			<input id="tempCode" name="search" type="number" placeholder="Code..." onKeyPress="if(this.value.length==8) return false;" />
			<input type="hidden" name="action" value="redirectByCode" />
			<span id="searchBtn">			
				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#F7F7EF" class="bi bi-search" viewBox="0 0 16 16">
					<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
					<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
				</svg>			
			</span>			
		</div>
	</form>

On Click Event in „us-navigation.js“:

 // click button - code input form
    jQuery('#searchBtn').on('click', function (){
        jQuery("#myRedirectForm").submit();
    });
    

Code in „functions.php“:

add_action( 'admin_post_redirectByCode', 'redirectToPageByCode' );
add_action( 'admin_post_nopriv_redirectByCode', 'redirectToPageByCode' );


function redirectToPageByCode(){
	$tempCode = (isset($_POST['search'])) ?sanitize_text_field($_POST['search']) : false;
	$postID = getPostIdByMetaKeyAndValue('page_code', $tempCode);	

	if($postID){
		$tempUrl = home_url() . '/?p=' . $postID;
		wp_redirect( $tempUrl );
		exit;	
	}else{
		wp_redirect( home_url() );
		exit;
	}
}

Links