0

hey guys,
I am really new to UI design and I am trying to finish building a simple website to include on my resume. My problem is that I have a login page with a radio button asking the user if they are an existing customer. If they are they would select one of two radio buttons, yes or no. By default I have selected the yes button to be checked. Consequentally, I would only like the user login form to be displayed while hiding the user registration from. And if the user were to select the no radio button I would like to hide the user login form and display the other. This is the code I got so far.

<script src="C:/xampp/htdocs/book_apps/ALEXsWebsite/jquery-1.10.2.js"></script>
<html>
    <head>
        <title>User Login or Register</title>
        <link rel="stylesheet" href="main.css" >
    </head>
    <body>
        <div id="question"><?php echo "Are you a returning cutomer?"?></div>
        <ul>
            <li><label><input type="radio" name="input" id="existingUser" value="yes" checked="checked">YES</label></li>
            <li><label><input type="radio" name="input" id="notExistingUser" value="no">NO</label></li>
        </ul>

        <div class="registration">
            <h1>User Registration</h1>
            <form name="userRegistration" action="userHome.php" method="post">
                <br />
                <label>Full Name:</label>
                <input type="input" id="inputName" name="name" />
                <br />

                <label>Phone Number:</label>
                <input type="input" id="inputPhone" name="pNumber" />
                <br />

                <label>Address:</label>
                <input type="input" id="inputAddress" name="address" />
                <br />
                <label>Email:</label>
                <input type="input" id="inputEmail" name="email" />
                <br />

                <label>&nbsp;</label>
                <input type="submit" value="Submit" />
                <br />
            </form>
        </div>

        <div class="login">
            <h1>User Login</h1>
            <form  name="userLogin" action="userHome.php" method="post">
              <label>Email:</label>
                    <input type="input" name="emailLogin" />
                    <br />
              <label>Password:</label>
                    <input type="password" name="password" />
                    <br />
              <label>&nbsp;</label>
                    <input type="submit" value="Submit" />
                    <br />
            </form>
        </div>

    </body>
</html>

Like I mentioned, I am a rookie and would appreciate it if you guys keep your solutions easy to understand with minimal code changes. I have been thinking about how to apprach it but I can not seem to put it into code because I don't know javaScript but I have to use it (personal reasons). My pseudocode is something like this:
if the radio button with id="existingUser" is checked, then hide form name="userRegistration"
else hide form name="userLogin".

  (Also I know I have to change both form actions to a js function that would perform form validation. But I was wondering how do I get the users to go to userHome.php after that js function is complete? assumming input data is ok )
3
Contributors
2
Replies
30
Views
3 Years
Discussion Span
Last Post by Patrickoller
0
<html>
    <head>
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("tbody[id^='Value']").hide();
                $("input[name='Radio']").click(function(){
                    change_selection();
                });
                change_selection();
            });

            function change_selection() {
                var selected_value = $("input[name='Radio']:checked").val();
                $("tbody[id^='Value']").hide();
                $("#" + selected_value).show();
            }
        </script>
    </head>
    <body>
        <form action="" method="post" id="SomeForm" ></form>
            <table>
                <tbody>
                    <tr>
                        <td class="td-ctr">Size</td>
                        <td class="td-ct"><input type="radio" name="Radio" value="Value1" checked="checked"/> Value <input type="radio" name="Radio" value="Value2" /> Value</td>
                    </tr>
                </tbody>
                <tbody id="Value1">
                    <tr>
                        <td class="td-ctr">Only if Value 1</td>
                        <td class="td-ct"><input type="text" name="SomeName" value="" /></td>
                    </tr>
                </tbody>
                <tbody id="Value2">
                    <tr>
                        <td colspan="2" class="td-ct">Only if Value 2</td>
                    </tr>
                    <tr>
                        <td class="td-ctr">SomeName1</td>
                        <td class="td-ct"><input type="text" name="SomeName1" value="" /></td>
                    </tr>       
                    <tr>
                        <td class="td-ctr">SomeName2</td>
                        <td class="td-ct"><input type="text" name="SomeName2" value="" /></td>
                    </tr>
                    <tr>
                        <td class="td-ctr">SomeName3</td>
                        <td class="td-ct"><input type="text" name="SomeName3" value="" /></td>
                    </tr>
                    <tr>
                        <td class="td-ctr">SomeName4</td>
                        <td class="td-ct"><input type="text" name="SomeName4" value="" /></td>
                    </tr>
                    <tr>
                        <td class="td-ctr">SomeName5</td>
                        <td class="td-ct"><input type="text" name="SomeName5" value="" /></td>
                    </tr>
                    <tr>
                        <td class="td-ctr">SomeName6</td>
                        <td class="td-ct"><input type="text" name="SomeName6" value="" /></td>
                    </tr>
                    <tr>
                        <td class="td-ctr">SomeName7</td>
                        <td class="td-ct"><input type="text" name="SomeName7" value="" /></td>
                    </tr>                                                                                                                                                               
                </tbody>
            </table>
        </form>

    </body>
</html>

This code may be useful for you try it!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.