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 5 of 5
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    89
    Thanks
    51
    Thanked 0 Times in 0 Posts

    Drop down not posting when in jquery

    Gidday

    I have a basic drop down:

    Code:
    <div id="CO"><select name="tester">
      <option value="a">A</option>
      <option value="b">B</option>
     </select></div>
    It's set up inside a simple search form, which also has a text input. When I click the form's submit button, it successfully posts whatever the drop down is set at, plus the form's text input.

    I now want to have the drop-down in a jquery dialog. So I set up a link that opens a query dialog for the above div "CO", and set "CO" to hide until the link is clicked. So the drop down only appears when the link is clicked, and it appears in a nice dialog pop up.

    But the value doesn't post now (note - I haven't moved the drop down code - it's still inside the main form).

    It's been a while since I used jquery, so I'm forgetting something fundamental here. Can someone please point it out?

    Also, the overall idea was to have a dialog with a few drop downs plus a radio button, so the user can set some options, close the dialog, and have the values of those options posted along with the input text when they hit the submit button. As long as the drop downs are coded inside the main form, their values should be posted right? Or should I be setting up a function to collect the values of the dialog when it's closed, and somehow passing the vars into the form when it's submitted?

    Thanks for your time and help.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Even if hidden dynamically, it should still post the values. But it’s impossible to help you with that tiny snippet of code. Please post your entire code (HTML and JS).

  • Users who have thanked VIPStephan for this post:

    shaunthomson (04-06-2013)

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    89
    Thanks
    51
    Thanked 0 Times in 0 Posts
    I ended up not using a drop down, but am having the same problem with a checkbox - it won't post. But it does post when I turn off the hide.

    Here you go (#ce is a clicked link to bring up the dialog) (cheers):

    Code:
    $('body').ready(function()
    {
    
        $("#ce").click(function() {
          
       	$("#CE").dialog(
    	{
    		resizable:false,
    		height:'auto',
    		minWidth:310,
    		modal:true,
    		
    		buttons:
    		{
    			"Done":function()
    			{
                                 $(this).dialog("close")
    			},
    		}
    	});
    });
    Code:
    <script type="text/javascript">$(document).ready(function(){$('#CE').hide();});</script>

    Code:
    <form id='testForm' name='testForm' action='' method='post'>
    <div id="CE"><input type="checkbox" name="tester" id="tester" /> </div>
    <input type='submit' name='mySubmit' id='mySubmit' />
    </form>
    Code:
    if (isset($_POST['tester'])) echo 'tester: '.$_POST['tester'];
    Last edited by shaunthomson; 04-06-2013 at 05:48 PM.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I think you need to put the whole form in the dialog, not just the form fields. I don't think having two ids of ce and CE is helping either.

    This works fine for me:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <title>Untitled Document</title>
    </head>
    
    <body>
    <?php if (isset($_POST['tester'])) echo 'tester: '.$_POST['tester'];?>
    <p id="ce">Dialog</p>
    <form id='testForm' name='testForm' action='' method='post'>
    	<div>
    		<input type="checkbox" name="tester" id="tester">
    		<input type='submit' name='mySubmit' id='mySubmit'>
    	</div>
    </form>
    <script type="text/javascript">
    $(document).ready(function(){
    
    	$('#testForm').hide();
    	
        $("#ce").click(function() {
    	
    		$("#testForm").dialog({
    			resizable:false,
    			height:'auto',
    			minWidth:310,
    			modal:true,
    			buttons:{
    				"Done":function(){
    					$(this).dialog("close")
    				},
    			}
    		});
    		
    	});
    });
    </script>
    </body>
    </html>
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    shaunthomson (04-15-2013)

  • #5
    New Coder
    Join Date
    May 2012
    Posts
    89
    Thanks
    51
    Thanked 0 Times in 0 Posts
    Thanks mate - it's working now!


  •  

    Posting Permissions

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