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 7 of 7
  1. #1
    New Coder
    Join Date
    May 2016
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Textbox not in line

    -image-pngHi, I have this code for a drop dox selection. For both option selected, it will show a textbox. For the first option selected, the textbox will be far away while the second option selected, the textbox display area is at the correct position. May I know how to edit to make both textbox show at the same location.

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    
        $(function () {
            $("#passport").change(function () {
                if ($(this).val() == "Yes") {
                    $("#dvPassport").show();
                } else {
                    $("#dvPassport").hide();
                }
            });
    
            $("#passport").change(function () {
                if ($(this).val() == "No") {
                    $("#dvPassport1").show();
                } else {
                    $("#dvPassport1").hide();
                }
            });
        });
    
    </script>
    
    <table>
        <tr>
            <td>Passport</td>
            <td><select id="passport" style='width: 270px'>
                    <option value="Please Select">Please Select</option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                </select>
            </td>
        </tr>
    
        <tr>
            <td>
                <div id="dvPassport" style="display: none">
                    <input type="text" id="txtPassportNumber" style='width: 270px' placeholder="Passport No"/>
                </div>
            </td>
            <td>
                <div id="dvPassport1" style="display: none">
                    <input type="text" id="reason" style='width: 270px' placeholder="Reaons"/>
                </div>
            </td>
        </tr>
    
    </table>
    Last edited by justin0312; 03-19-2017 at 06:59 AM.

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    6,868
    Thanks
    31
    Thanked 940 Times in 937 Posts
    You constructed the table incorrectly. You place id="dvPassport" in the <td> which is under the <td> that has the word "Passport", so when the id="dvPassport" <td> is visible the two cells take on the width styled with style='width: 270px' in the bottom cell.

    The fix:
    Create an empty cell in the second row and place both id="dvPassport" and id="dvPassport1" in the second cell.
    Move the Jquery to after the HTML code, but before the </body> tag. Now the "after page load" is not needed.
    Re-write the JQ so only one function is run on making a selection and account for selecting the "Please Select" after you made one.
    FYI: Jquery is now at ver 1.11.3.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Client Test</title>
     </head>
    <body>
    <table>
    <tr>
    	<td>Passport</td>
    	<td>
    		<select id="passport" style='width: 270px;'>
    			<option value="Please Select">Please Select</option>
    			<option value="Yes">Yes</option>
    			<option value="No">No</option>
    		</select>
    	</td>
    </tr>
    
    <tr>
    	<td></td>
    	<td>
    		<div id="dvPassport" style="display: none;">
    		<input type="text" id="txtPassportNumber" style='width: 270px;' placeholder="Passport No">
    		</div>
    		<div id="dvPassport1" style="display: none;">
    		<input type="text" id="reason" style='width: 270px;' placeholder="Reaons">
    		</div>
    	</td>
    </tr>
    </table>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
    $("#passport").change(function () {
    	 $("#dvPassport").hide();
    	 $("#dvPassport1").hide();
        if (($(this).val() == "Yes") && ($(this).val() != "Please Select")){
            $("#dvPassport").show();
        } else if (($(this).val() == "No") && ($(this).val() != "Please Select")){
            $("#dvPassport1").show();
        }
    });
    </script>
    </body>
    </html>
    Again FYI: Think of a way to display the HTML without using tables. And a question for you -> Do you need to use <div>s in a <td>?
    Last edited by sunfighter; 03-19-2017 at 07:01 PM.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. Users who have thanked sunfighter for this post:

    justin0312 (03-21-2017)

  4. #3
    New Coder
    Join Date
    May 2016
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I'm doing a form so that is why I decided to use table.
    I actually chance upon the short code for the option display and I edited it to make it into my requirement. I am still learning html and php and perhaps, you can give me some tips on doing this and will be really appreciate it.

  5. #4
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    6,868
    Thanks
    31
    Thanked 940 Times in 937 Posts
    Did you run my code and study it?
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  6. #5
    New Coder
    Join Date
    May 2016
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Yes, I have tried it and it is according to my requirement

  7. #6
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    6,868
    Thanks
    31
    Thanked 940 Times in 937 Posts
    This thread Does not call validateForm() Why? Post #5 by Shaka Zorba has a good example of a form without a table.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  8. Users who have thanked sunfighter for this post:

    justin0312 (03-25-2017)

  9. #7
    New Coder
    Join Date
    May 2016
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I have taken a look at it and it is indeed better. I have edited my code to something similar with that. And I apologise for the very late reply.


 

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
  •