Jump to content

Getting one div to replace another.


Recommended Posts

I'm trying to set up a registration form with Paypal payment. Once all the data has been entered and verified in the form, the registration form should be hidden and the Paypal form show. But the Paypal form only shows for two seconds before the registration form reappears. What am I doing wrong? I attach code below. Also, I don't understand the lines in regformhash which someone else has written for me. It seems that you can return multiple instructions in one line in a function. But what does the false at the end of each line do? Where does it get picked up?

Thanks.

<form class="clearfix" method="post" id="registerform" name="registration_form" action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>"> 
				<div class="form" id ="formdetails">
				    <input class="user" type="text" placeholder="Username" name="username" autocomplete="off">
					<input class="first_name" type="text" placeholder="First Name" name="first_name" autocomplete="off">
				    <input class="surname" type="text" placeholder="Surname" name="surname" autocomplete="off">
				    <input class="em" type="text" placeholder="Email" name="email" autocomplete="off">
				    <input class="pass" type="password" placeholder="Password" name="password" autocomplete="off">
				    <input class="pass" type="password" placeholder="Confirm Password" name="confirmpwd" autocomplete="off">
				</div>
					<div id="clearfix">
						<div style="width: 50%; float: right; position: relative; height: 54px;">
						
					<button class="register"  onclick="return regformhash(this.form, this.form.username, this.form.first_name, this.form.surname, this.form.email, this.form.password,  this.form.confirmpwd);">Continue</button>
						</div>
						<div class="terms">
						<!--	<label style="line-height: 36px; font-size: 14px; font-family: Lato; color: #4285F4; padding-left: 6px;">Terms and conditions</label> -->
						</div> 

					</div> 
				<div id="paypal-button-container" hidden ="true"></div>
				<script src="https://www.paypal.com/sdk/js?client-id=Aa0YBaV1-WR_MAf-ExcJw38f8kwG-Oir7r5xPgbC1Bz1-tgEC4J6UAPNZopfkyBzzE4vMie3WiBdYIyF&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>
				<script>

				  paypal.Buttons({
					  style: {
						  shape: 'rect',
						  color: 'gold',
						  layout: 'vertical',
						  label: 'subscribe'
					  },
					  createSubscription: function(data, actions) {
							//this triggers on the user clicking a Paypal button.
						return actions.subscription.create({
						  'plan_id': '****************'
						});
					  },
					  onApprove: function(data, actions) {	   
					document.getElementById("registerform").submit();
					  }
				  }).render('#paypal-button-container');
				</script>
				</form>

<script type = "text/javascript">

	function showpaypal(){
		document.getElementById("formdetails").hidden=true;
		document.getElementById("clearfix").hidden=true;
		document.getElementById("paypal-button-container").hidden=false;
		return false;
	}



function regformhash(a, b, h, i, c, d, e) {
    if ("" == b.value ) return swal({title: "Please try again",text: "Please enter your username.",showConfirmButton: true,showCancelButton: false,allowOutsideClick: true}), a.username.focus(), false;
    if ("" == h.value ) return swal({title: "Please try again",text: "Please enter your first name.",showConfirmButton: true,showCancelButton: false,allowOutsideClick: true}), a.first_name.focus(), false;
    if ("" == i.value ) return swal({title: "Please try again",text: "Please enter your surname.",showConfirmButton: true,showCancelButton: false,allowOutsideClick: true}), a.surname.focus(), false;
    if ("" == c.value ) return swal({title: "Please try again",text: "Please enter your email address.",showConfirmButton: true,showCancelButton: false,allowOutsideClick: true}), a.email.focus(), false;
    if ("" == d.value ) return swal({title: "Please try again",text: "Please enter your password.",showConfirmButton: true,showCancelButton: false,allowOutsideClick: true}), a.password.focus(), false;
    if ("" == e.value ) return swal({title: "Please try again",text: "Please confirm your password.",showConfirmButton: true,showCancelButton: false,allowOutsideClick: true}), a.confirmpwd.focus(), false;
    if (f = /^\w+$/, !f.test(a.username.value)) return swal({title: "Please try again",text: "Username must contain only letters, numbers and underscores.",showConfirmButton: true,showCancelButton: false,allowOutsideClick: true}), a.username.focus(), false;
    if (f = /^[a-zA-Z]*$/, !f.test(a.first_name.value)) return swal({title: "Please try again",text: "First name must contain only letters.",showConfirmButton: true,showCancelButton: false,allowOutsideClick: true}), a.first_name.focus(), false;
    if (f = /^[a-zA-Z]*$/, !f.test(a.surname.value)) return swal({title: "Please try again",text: "Surname must contain only letters.",showConfirmButton: true,showCancelButton: false,allowOutsideClick: true}), a.surname.focus(), false;
    if (d.value.length < 6) return swal({title: "Please try again",text: "Passwords must be at least 6 characters long.",showConfirmButton: true,showCancelButton: false,allowOutsideClick: true}), a.password.focus(), false;
    var f = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;
    if (!f.test(d.value)) return swal({title: "Please try again",text: "Passwords must contain at least one number, one lowercase and one uppercase letter.",showConfirmButton: true,showCancelButton: false,allowOutsideClick: true}), false;
    if (d.value != e.value) return swal({title: "Please try again",text: "Your password and confirmation do not match.",showConfirmButton: true,showCancelButton: false,allowOutsideClick: true}), a.password.focus(), false;
	//regardless of whether the last argument here is true or false, the paypal buttons only show for two seconds before the page reverts to show the form details.
	showpaypal(), true;
}
</script>

 

Link to post
Share on other sites
  • 1 month later...

Hmm, if I type the code from showpaypal() into the chrome console and execute the lines one by one it all works well. But I'm still getting the same problem with calling this function on the page- the paypal div shows for an instant and then the form details reappear.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...