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 3 of 3

Thread: Jquery Form

  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Jquery Form

    If I am using the Jquery form plugin, how can I get the it to fire the submit when an option is selected in a Select control rather than a submit button?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.js"></script>
    <script type="text/javascript"> 
    
            $(document).ready(function() { 
                // bind 'myForm' and provide a simple callback function 
                $('#myForm').ajaxForm(function() { 
                    alert("Thank you for your comment!"); 
                }); 
            }); 
    
        </script> 
    
    </head>
    
    <body>
    <form id="myForm" action="testpost.php" method="POST"> 
    <select name="test" id="item_select">
    <option value="0">No Tech Assigned</option>
    <option value="1">No Tech Assigned</option>
    <option value="2">No Tech Assigned</option>
    </select>
      
    </form>
    </body>
    </html>
    Last edited by mrmrsg; 11-16-2010 at 10:39 PM. Reason: clean up code

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Add a jquery handler for "onchange" for your select tag:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.js"></script>
    <script type="text/javascript">
    	$(document).ready(function() {
    		//hide the submit button
    		$('#hidden_submit_button').hide();
    
    		// bind 'myForm' and provide a simple callback function
    		$('#myForm').ajaxForm(function() { 
    			alert("Thank you for your comment!"); 
    		});
    
    		// bind 'item_select' and provide a simple callback function
    		$('#item_select').change(function() {
    			alert('Selection has changed!');
    			document.getElementById('hidden_submit_button').click();
    		});
    	});
    </script>
    </head>
    
    <body>
    <form id="myForm" action="testpost.php" method="POST"> 
    <select name="test" id="item_select">
    <option value="0">No Tech Assigned</option>
    <option value="1">No Tech Assigned</option>
    <option value="2">No Tech Assigned</option>
    </select>
    <input type="submit" value="Submit" id="hidden_submit_button" />
    </form>
    </body>
    </html>
    And add a submit button (which you can hide with CSS) to "click" with the script to submit the form. The reason you can't simply use a javascript "submit" directly on the form is that when you do so, the "onsubmit" script will not run. Adding a submit button and simulating a click on it will allow your onsubmit (ajaxForm) script to still run.

    Alternatively, you could set the onchange function above to do all of your current onsubmit stuff (remove your onsubmit code since it won't fire anyway), then do a call to this.parentNode.submit() so that you don't have to worry about the hidden submit button at all. The downside is a complete lack of support for any user who has javascript disabled. On the whole, the first approach is better practice as far as I am concerned.
    Last edited by Rowsdower!; 11-17-2010 at 05:55 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Jquery Form

    All the frameworks I seem to find are either huge and are full of features I simply don't need or are so lightweight.
    Nitro Muscle mass


  •  

    Tags for this Thread

    Posting Permissions

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