Submit a form in modal box - AJAX

Discussion in 'Programming' started by thrillseeker30, May 18, 2009.

  1. #1
    Hello all, I am having trouble submitting a form that is displayed on a DIV that acts like a modal box.

    Every time I hit submit, it reloads the page and closes the DIV.

    However, if I put a Javascript event-handler, onsubmit="return false" that stops the page from reloading, but I am unable to validate on the server side.

    Here is my code and let me know what you guys think....

    
    <div id="modal_window">
        <form name="reg_form" onsubmit="return false" >
        	<fieldset>
            	<legend>REGISTER</legend>
            	<ol>
                	<li>
                    	<label>USER NAME:</label>
                        <input type="text" name="user_name" id="name" autocomplete="off" onchange="user_validate('user_name', this.value);" />
                    </li>
                    <li>
                    	<label>EMAIL:</label>
                        <input type="text" name="user_email" autocomplete="off" onchange="email_validate('user_email', this.value);"/>
                    </li>
                    <li>
                    	<label>PASSWORD:</label>
                    	<input type="text" name="user_pass" autocomplete="off" onchange="pass_validate('user_pass', this.value);" />
                    </li>
                </ol>
                <fieldset>
                	<input type="submit"  value="Submit" name="submit" onclick="reg_submit()" />
    				<div id="submit_reply"></div>
                </fieldset>
            </fieldset>
        </form>
    
    HTML:
    function reg_submit(){
    	
    	var submit = document.getElementById('submit_reply');
    	
    	var field_name = document.getElementById('name');
    			
    	var field_value = field_name.value;
    	
    	if(field_name) {
    		
    		params = "?" + field_name + "=" + field_value;
    		
    	}
    	
    	ajaxRequest.open("GET", "register.php" + params, true);
    	
    	ajaxRequest.onreadystatechange = function () {
    		
    		if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
    			
    			submit.innerHTML = ajaxRequest.responseText;
    			
    		} 
    		
    	}
    	
    	ajaxRequest.send(null);
    		
    }
    
    Code (markup):
    
    if(isset($_GET['submit'])){
    	
    	echo 'Form has been submitted';
    	
    }
    
    PHP:
     
    thrillseeker30, May 18, 2009 IP