input fields really slow and lags when typing

[ianhaney50]

Hi

 

I just built a web project and all works perfect but noticed when typing in any of the forms like login, register, or update the profile form, typing is really slow and lags in the form

 

has this happened to anyone else as not sure what is causing it?

[scootstah]

Is your site on the internet so we can see it?

 

Are you using Javascript to do anything on the inputs?

[ianhaney50]

Hi scootstah

 

sorry yeah is live, the link is below

 

http://www.broadwaymediadesigns.co.uk/sites/the-tax-elephants/register.php

 

The only javascript is at the end after the form that disables the submit button until the check the checkbox, the html and javascript is below

<form action="<?=$_SERVER['PHP_SELF']?>" method="post">
	<label>Username:</label> <input type="text" name="username" required="required" placeholder="Please Enter your chosen username"/>
    <br />
	<label>Password:</label> <input type="password" name="password" required="required" placeholder="Please Enter your chosen password"/>
    <br />
	<label>Name:</label> <input type="text" name="name" required="required" placeholder="Please Enter your name">
    <br />
	<label>Email:</label> <input type="email" name="email" required="required" placeholder="Please Enter your email"/>
    <br />
    <label>Address Line 1:</label> <input type="text" name="address1" required="required" placeholder="Please Enter the first line of your address"/>
    <br />
    <label>Address Line 2:</label> <input type="text" name="address2" required="required" placeholder="Please Enter the second line of your address"/>
    <br />
    <label>Town:</label> <input type="text" name="town" required="required" placeholder="Please Enter your town"/>
    <br />
    <label>County:</label> <input type="text" name="county" required="required" placeholder="Please Enter your county"/>
    <br />
    <label>Postcode:</label> <input type="text" name="postcode" required="required" placeholder="Please Enter your postcode"/>
    <br />
    <label>Telephone Number:</label> <input type="text" name="telnumber" required="required" placeholder="Please Enter your landline number"/>
    <br />
    <label>Mobile Number:</label> <input type="text" name="mobnumber" required="required" placeholder="Please Enter your mobile number"/>
    <br />
    <label>Car/Van Model:</label> <input type="text" name="model" required="required" placeholder="Please Enter your car/van model"/>
    <br />
    <label>Car/Van Number Plate:</label> <input type="text" name="numplate" required="required" placeholder="Please Enter your car/number plate"/>
	<br />
 <label>Car Tax Renewal Date :</label> <input type="text" id="datepicker" name="tax" required="required" placeholder="Please Enter your Car Tax Renewal Date"/>
<br>
<label>MOT Expiry Date :</label>
<input type="text" id="datepicker2" name="mot" required="required" placeholder="Please Enter your MOT Expiry Date"/>
<br />
<label>Insurance Expiry Date :</label>
<input type="text" id="datepicker3" name="insurance" required="required" placeholder="Please Enter your Insurance Expiry Date"/>
<br><br>
<div class="box">
<label>I agree to the <a href="#popup1">terms</a></label>
</div>
<input type="checkbox" class="checkbox" id="the-terms" value="I Agree">

<div id="popup1" class="overlay">
    <div class="popup">
        <h2>Terms</h2>
        <a class="close" href="#">×</a>
        <div class="content">
            TERMS TEXT.
        </div>
    </div>
</div>
<input type="submit" name="submit" value="Register" disabled="disabled" id="submitBtn" />
	<a class="haveaccount" href="login.php">I already have an account...</a>
</form>

</div>

<!--CONTENT-->

<script>
$(document).ready(function() {
    var the_terms = $("#the-terms");

    the_terms.click(function() {
        if ($(this).is(":checked")) {
            $("#submitBtn").removeAttr("disabled");
        } else {
            $("#submitBtn").attr("disabled", "disabled");
        }
    });
}); 
</script>

[Ch0cu3r]

Its is lagging because you have an onkeypress event being triggered as the user types into the field. This event is performing an ajax request to update-status.php for every key press

 

Not sure why you want this for when a person is registering to your site?

 

You would only want to do this when a person is editing their own details when they are logged in to their own account. Event then you would not want an onkeypress event, instead an onblur event would be more suitable - this is triggered when a user clicks away from the form field. 

[ianhaney50]

Ahh thank you so much, I took the link out now to the script.js that was causing it and is loads quicker, thank you again so much