Jump to content

input fields really slow and lags when typing


ianhaney50

Recommended Posts

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?

Link to post
Share on other sites

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>
Link to post
Share on other sites

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. 

Link to post
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.