[SOLVED] this won't work,, anyone know why?

Reaper0167 · December 28, 2008

the two textfields on my form are named "username" and "password" and my form name is "form1" and form method is set to default. my next post will show code that works, but when changing the design of the form, it doesn't want to work.

<html>
<head>

    <style type="text/css">
    .error { color: #ff0000; }
    </style>

    <!-- using javascript to make sure fields are not left empty -->

    <script type="text/javascript" language="javascript">

    function validate(form1)
    {
    var valid = true;

    if (form1.username.value)
    {
        document.getElementById('username_error').innerHTML = '';
    }
    else
    {
        document.getElementById('username_error').innerHTML = 'Please enter a username.';
        valid = false;
    }

    if (form1.address.value)
    {
        document.getElementById('password_error').innerHTML = '';
    }
    else
    {
        document.getElementById('password_error').innerHTML = 'Please enter a password.';
        valid = false;
    }
    return valid;
    }
    </script>
    <style type="text/css">
    <!--
    body {
    background-color: #FFFFFF;
    }
    .style3 {color: #000000}
    -->
    </style>

    <title></title>
    <style type="text/css">
    p.c3 {text-align: center}
    div.c2 {text-align: right}
    div.c1 {text-align: center}
    </style>
</head>

<body>
    <p> </p>

    <p> </p>

    <p> </p>

    <p> </p>

    <table width="100%" height="36" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td height="36">
                <div class="c1">
                    <img src="pics/header.png" alt="header" width="433" height="37">
                </div>
            </td>
        </tr>
    </table>

    <div class="c1">
        <br>
         Hi, please log in.
    </div>
    <br>
     

    <form id="form1" name="form1" onSubmit="return validate(this);">
        <table width="100%" border="0" cellspacing="3" cellpadding="0">
            <tr>
                <td width="39%">
                    <div class="c2">
                        <label for="username">Username:</label>
                    </div>
                </td>

                <td width="61%"><input name="username" type="text" span id="username_error" class="error" size="35"></td>
            </tr>

            <tr>
                <td>
                    <div class="c2">
                        <label for="password">Password:</label>
                    </div>
                </td>

                <td><input name="password" type="password" span id="password_error" class="error" size="35"></td>
            </tr>

            <tr>
                <td> </td>

                <td><input type="submit" name="submit" id="submit" value=" Log in"></td>
            </tr>
        </table>
    </form>

    <p class="c3">Don't have a username?
    <br>
     Click here to register.</p>
</body>
</html>

<!-- using javascript  to set focus of the cursor on the username textfield -->
<script type="text/javascript" language="javascript">

    document.form1.username.focus();

</script>

Reaper0167 · December 28, 2008

here is the code that works,,, but the one above does not.

<html>
<head>
<style>
.error { color: #ff0000; }
</style>
<script type="text/javascript">

function validate(formObj)
{
    var valid = true;

    if (formObj.uname.value)
    {
        document.getElementById('uname_error').innerHTML = '';
    }
    else
    {
        document.getElementById('uname_error').innerHTML = 'User name is required.';
        valid = false;
    }

    if (formObj.address.value)
    {
        document.getElementById('address_error').innerHTML = '';
    }
    else
    {
        document.getElementById('address_error').innerHTML = 'Address is required.';
        valid = false;
    }

    if (formObj.phone.value)
    {
        document.getElementById('phone_error').innerHTML = '';
    }
    else
    {
        document.getElementById('phone_error').innerHTML = 'Phone number is required.';
        valid = false;
    }

    return valid;
}

</script>
</head>

<body>
<form name="theForm" onSubmit="return validate(this);">
  Enter your info:<br><br>
  User Name: <input type="text" name="uname"> <span id="uname_error" class="error"></span><br>
  Address: <input type="text" name="address"> <span id="address_error" class="error"></span><br>
  Phone: <input type="text" name="phone"> <span id="phone_error" class="error"></span><br>
  <br>
  <button type="submit">Submit</button>
</form>
</body>
</html>

opalelement · December 28, 2008

3 things...

1... That is javascript, not PHP

2... Look at these:

<td width="61%"><input name="username" type="text" span id="username_error" class="error" size="35"></td>
...
<td><input name="password" type="password" span id="password_error" class="error" size="35"></td>

You combined the span and input fields. Here is the working way to make those lines:

<td width="61%"><input name="username" type="text" size="35" /> <span id="username_error" class="error"></td>
...
<td><input name="password" type="password" size="35" /> <span id="password_error" class="error"></td>

3... Now try that, and you will see it submits no matter what. This is because you changed "address" to "password". You made a good attempt at fixing the javascript, but you forgot a spot.

if (form1.address.value)
{

document.getElementById('password_error').innerHTML = '';

}

else

{

document.getElementById('password_error').innerHTML = 'Please enter a password.';

valid = false;

}

Fix those and it should work (it did for me)

Reaper0167 · December 29, 2008

hey, thank you. I just a beginner here and i'm not sure if i am learning this the right way or not. thanks again.

Sign In

[SOLVED] this won't work,, anyone know why?

Recommended Posts

Reaper0167

Link to comment

Share on other sites

Reaper0167

Link to comment

Share on other sites

opalelement

Link to comment

Share on other sites

Reaper0167

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information