Jump to content

Getting one div to replace another.


Arbu
 Share

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 comment
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 comment
Share on other sites

  • 1 month later...
On 4/8/2021 at 4:20 PM, Arbu said:

OK, I added this into the form declaration, and it seems to fix it:


onsubmit="return false"

 

Er, that's not so good because then none of the data is set to the server. But if I don't have it, the form seems to get submitted before the Paypal instructions are completed. I'd really like to understand what the trigger is for submitting the form. I had thought that it would be done by the user clicking a button with type="submit". But my button doesn't have this type. So what on earth is the trigger? Is it just the fact of hiding the form?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...