Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2014
    Posts
    74
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Help with Ajax design

    Hi people,


    I have basic JavaScript experience but have never used AJAX before and hoping someone could show me how something would be done so I can get an understanding of the AJAX concept.

    What I was to do is make the webpage query if the e-mail address has already been registered, and if it has to then return a message.

    This is what I am talking about:

    Code:
    <SCRIPT type="text/javascript">
    	function validateForm() {
    		if (AJAX CODE GOES HERE) {
    			alert("The e-mail address has already been registered.");
    			return false;
    		}
    	}
    Am I making sense?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    I can only help you with the general approach right now and the first thing I would generally suggest is that you should avoid using alerts in production code in future. JS alerts should nowadays only be used for debugging; for real-life applications you should create your own modal dialogs (i. e. “DHTML popups”).

    Now, what AJAX does is communicate with the server asynchronously, i. e. without reloading the entire page, by just loading the chunks you need. That said, you would run the AJAX process upon validation and then use a callback from the AJAX function to do whatever you intended. Your code example is kind flipped in reverse. It should rather be something like:
    1. AJAX function loads a file where all e-mail addresses are stored
    2. callback inside AJAX function is executed: If the file has successfully been loaded traverse the results with JS to match the entered address
    3. if/else address exists do something


    This is all happening inside the AJAX function, not vice versa.

  • #3
    New Coder
    Join Date
    Jan 2014
    Posts
    74
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanks Stephen,

    Could you please show me a simple example of AJAX doing a simple lookup on a MySQL database and to returning an alert if something matches? Basically, I want to make AJAX lookup an e-mail address and if it already exists to alert the user "The e-mail address has already been registered". I know you say alerts are old school. I agree they are, but thats how I want to do it at this time.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 592 Times in 572 Posts
    Quote Originally Posted by Phaelon View Post
    Thanks Stephen,

    Could you please show me a simple example of AJAX doing a simple lookup on a MySQL database and to returning an alert if something matches? Basically, I want to make AJAX lookup an e-mail address and if it already exists to alert the user "The e-mail address has already been registered". I know you say alerts are old school. I agree they are, but thats how I want to do it at this time.
    that depends on about half a dozen factors, there isn't a one-size-fits-all server solution like there is client JS.
    given mysql, i would guess your using php, but you don't say.

    it's impossible to code the sql for you: it has to match the database and column names in your existing db.
    the php is available on the php documentation under the mysql section, check it out. once you can get the php to spit json to a url, then you use ajax to grab that json and update the html with it.

    as you can see, your request is not possible to fulfill with "a simple example", given the unknowns and complexity.

    focus on the getting the php working by cutting, pasting, and editing the examples, and we'll be happy yo help you finish wiring it up to the html via ajax if you get stuck.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Yeah, and “rnd me” will probably not agree with me here but this brings up the general issue and approach: The site has to communicate with the server anyway so the first and most important thing would be to get the validation working at least in a basic way without JavaScript at all, and then JS/AJAX can be added for further enhancement. This will also make potential changes easier later on.

  • #6
    New Coder
    Join Date
    Jan 2014
    Posts
    74
    Thanks
    11
    Thanked 0 Times in 0 Posts
    After studying I have come up with the following code. The first two portions are the JavaScript and HTML, the third portion is the PHP. Does this look right?

    Code:
    <SCRIPT>
    	function email() {
    		xmlhttp = new XMLHttpRequest();
    		xmlhttp.open("GET","emailvaidate.php",true);
    		xmlhttp.send();
    		if (xmlhttp.responseText == document.forms['form']['email'].value) {
    			alert "The e-mail address has already been registered.";
    			return;
    		}
    	}
    </SCRIPT>
    
    <FORM onsubmit="return email()">
    	<INPUT name="email">
    	<INPUT type="submit" value="SUBMIT">
    </FORM>
    Code:
    <?php
    	$link = mysql_connect('localhost', 'testuser', 'testpw');
    	$db_selected = mysql_select_db('testdb', $link);
    	$query = ("SELECT * FROM customers WHERE email = ".$_GET['email']."");
    	$result = mysql_query($query);
    	mysql_close($link);
    	echo $result;
    ?>
    What I don't get is how I can send the INPUT value containing the e-mail address in xmlhttp.open. Does anyone know how it can be done? Something like this?

    Code:
    xmlhttp.open("GET","emailvaidate.php?email=".document.forms['form']['email'].value."",true);
    Last edited by Phaelon; 04-29-2014 at 04:04 AM.

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 592 Times in 572 Posts
    use <INPUT name="email" id=email type=email>, then you can say xmlhttp.open("GET","emailvaidate.php?email="+encodeURIComponent(email.value), false ); to make the form wait on the ajax call.

    you should parameratize your php/sql call or else anybody can trick your server into doing all sorts of nasty things by sending a long weird sql command fragment in the email field. i know this is just a demo, and you've almost got it working, but sql injection is a concern to keep in mind on something that the public uses.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #8
    New Coder
    Join Date
    Jan 2014
    Posts
    74
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanks.

    What does the true and false statements mean in the argument?

    Thanks on the sanitisation tip.Yeah, I will use mysql_real_escape_string on production.

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 592 Times in 572 Posts
    true and false tell ajax if it should wait and use a return or finsih immediatly and use a callback to handle the response
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •