SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ajax form with out enter

    Hello,

    I'm trying to learn ajax and i made a small application which search a database

    the problem i'm facing that the user have to click the button (search). if he click enter (keybored) nothing will happend.

    how could i make it working both ways, when he click the button or pressing enter in the keybored. ( If i can make it using one way is fine. but how do i disable pressing enter in the keybored )

    HTML code

    Code:
    <form action="#" method="get" class="cmxform">
    		<fieldset>
    			<legend>Search Database</legend>	
    				<ol>
    					<li>
    						<label for="q">Serial Number</label>
    						<input type="text" name="q" id="q" />
    					</li>
    					<li> 
    						<input type="button" name="search" onclick="getResponse(form.q.value)" value="Look up!" class="search" />
        				        </li>
    				</ol>
    		</fieldset>
    	</form>
    javascript code

    Code:
    function CreateRequestObject()
    {
    	var req;
    	if( window.XMLHttpRequest )
    	{
    		//Mozilla, Safari, Netscape
    		req = new XMLHttpRequest();
    	}
    	else if( window.ActiveXObject )
    	{
    		//Internet Explorer
    		req = new ActiveXObject( "Microsoft.XMLHTTP" );
    	}
    	return req;
    }
    // making the object
    var http = CreateRequestObject();
    
    function getResponse(q)
    {
    	http.open( "GET" , "result.php?q="+q );
    	http.onreadystatechange = handleResponse;
    	http.send(null);
    }
    
    function handleResponse()
    {
    	if( http.readyState == 4 && http.status == 200 )
    	{
    		document.getElementById("result").innerHTML = http.responseText;
    	}
    }
    php code

    PHP Code:
    <?php

        
    if( $_GET['q'] == "123" )
        {
            echo 
    "correct";
        }
        else
        {
            echo 
    "mmm";
        }

    ?>
    thank you

  2. #2
    SitePoint Enthusiast ada80ro's Avatar
    Join Date
    Apr 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you press enter the form is submitted which is different from a regular button being clicked.
    Press enter == click on a submit button

    So you have to change your button with a submit button and add a onsubmit handler on form element.

    Code:
    <form action="#" method="get" class="cmxform" onsubmit="getResponse(q.value);return false;">
    		<fieldset>
    			<legend>Search Database</legend>
    				<ol>
    					<li>
    						<label for="q">Serial Number</label>
    						<input type="text" name="q" id="q" />
    					</li>
    					<li>
    						<input type="submit" name="search" value="Look up!" class="search" />
        				</li>
    				</ol>
    		</fieldset>
    	</form>
    Also you change http.open( "GET" , "result.php?q="+q );
    with
    http.open( "GET" , "result.php?q="+q, true ); if you want your code to work in w3c compliat browsers.

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanx man, it worked.

    the other problem was the (form.q.value) in the form tag.

    when i wrote it ( q.value ) it worked.

    Thanx


Bookmarks

Posting Permissions

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