Getting one div to replace another.

[Arbu]

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>

 

[Arbu]

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.

[dsonesuk]

Usually means its the submission of form reloading the page when it shouldn't.

[Arbu]

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

onsubmit="return false"

 

Edited April 8, 2021 by Arbu

[Arbu]

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?

[Arbu]

I think I've got it. You have to specify type="button" for the button. Otherwise it's treated as if the type were "submit".