I’m trying to make a shortcode
plugin in wordpress.
<?php
function upd_signup_form() {
$key = get_query_var( 'upd' );
ob_start();
?>
<a href="#" class="signup-submit">Reserve Your Spot for Free</a>
<div id="upd-modal" style="display: none;">
<a href="#" id="upd-modal-close">CLOSE X</a>
<div id="upd-form">
<form name="registerform" id="registerform" action="<?php echo site_url().'/wp-login.php?action=register'; ?>" method="post">
<p>
<label for="user_login">Username<br>
<input type="text" name="user_login" id="user_login" class="input" value="" size="20"></label>
</p>
<p>
<label for="user_email">E-mail<br>
<input type="text" name="user_email" id="user_email" class="input" value="" size="25"></label>
</p>
<p>
<label for="first_name">First Name<br>
<input id="first_name" class="input" type="text" value="" name="first_name">
</label>
</p>
<p>
<label for="last_name">Last Name<br>
<input id="last_name" class="input" type="text" value="" name="last_name">
</label>
</p>
<p>
<label for="password">Password<br>
<input id="password" class="input" type="password" value="" name="password">
</label>
</p>
<p>
<label for="rpassword">Re-enter Password<br>
<input id="rpassword" class="input" type="password" value="" name="rpassword">
</label>
</p>
<p>
<label for="upd_terms">
<input id="upd_terms" class="checkbox" type="checkbox" value="true" name="upd_terms">
I accept these terms and conditions.</label>
</p>
<p>
<label for="upd_register">
<input id="upd_register" class="checkbox" type="checkbox" value="true" name="upd_register">
I would like to sign-up for the Synek Waitlist.
</label>
</p>
<?php
if( $key != '' ) :
$uargs = array(
'role' => 'subscriber',
'meta_key' => 'upd_key',
'meta_value' => $key
);
$ruser = get_users( $uargs );
if( is_array($ruser) ) :
$userx = $ruser['0'];
?>
<input type="hidden" id="upd_user_id" name="upd_user_id" value="<?php echo $userx->ID; ?>">
<input type="hidden" id="upd_user_key" name="upd_user_key" value="<?php echo $key; ?>">
<?php
endif;
endif;
?>
<br class="clear">
<input type="hidden" name="redirect_to" value="">
<p class="submit"><input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Register"></p>
</form>
</div>
</div>
<script type="text/javascript">
jQuery('.signup-submit').on('click', function(){
jQuery('#upd-modal').fadeIn('400');
});
jQuery('#upd-modal-close').on('click', function(){
jQuery('#upd-modal').fadeOut('400');
});
</script>
<?php
$form = ob_get_clean();
return $form;
}
add_shortcode('upd-signup', 'upd_signup_form');
?>
Now, if I didn’t do the ob_get, and just echo’d out the html, which is not what you’re supposed to do, everything works fine. But, when I do the ob_start and ob_get_clean, jQuery no longer wants to work and I get this error:
Uncaught SyntaxError: Unexpected token <
I’ve looked through my code, that token isn’t in there. I don’t know why this is happening.
I had the same problem. WordPress was adding p and br tags within the html of the output.
I was able to solve by restructuring the HTML so there were less spaces and line breaks. The problem was surprisingly specific to the script tags. If the html is structured like this it should not cause any problems.
If you are still having problems then this PHP should help remove all line breaks from the HTML.