forms and getElementById

forms, javascript

Solution

The first way you tried was the right one.

The problem is, you're not binding the `onclick` event to a function.

You declare the `getName` function in the `head` tag, interpreted before the `body` tag.

But you overwrite `getName` when declaring the button `input` with its `id` and `name` set to `getName`.

You can just change its id and name to `submitButton` for example. You could also move the function declaration to the end of the `body` tag, or wrap it in an `onLoad` method.

I wrapped the `getName` call in an alert to see the result (`alert(getName())`)

Check out the jsFiddle : http://jsfiddle.net/zpNSv/1/

<form name="form" id="form" method="post" action="">  
    <p class="FirstName">  
        <label for="FirstName">First Name:</label>
    </p>
    <p>
        <input name="FirstName" type="text" id="FirstName" />  
    </p>  
    <p class="LastName">  
        <label for="LastName">Last Name:</label>
    </p>
    <p>
        <input name="LastName" type="text" id="LastName" />  
    </p>
    <p class="submit">  
        <input name="submitButton" type="button" id="submitButton" value="Get Name" onClick="alert(getName())" />
    </p>  
 </form>

AND JS

function getName() {
    var FirstName = document.getElementById("FirstName"),
        LastName = document.getElementById("FirstName");
    if (FirstName.value == "" ||   document.getElementById("LastName").value == "")
    {
        return ("Please enter a first name and a last name.");
    }
    else
    {
        var FullName = FirstName.value + ' ' + LastName.value;
        return FullName;
    }
}

Problem

I am having issues using getElementById in a form. I have tried several ways with no luck. I basically need the form to verify that both First Name and Last Name fields are filled in, and display a popup box with the names displayed. Below is the code I have tried. I tried 2 different ways in my javascript and I am not sure what I am missing. ``` <form name="form" id="form" method="post" action=""> <p class="FirstName"> <label for="FirstName">First Name:</label> </p> <p> <input name="FirstName" type="text" id="FirstName" /> </p> <p class="LastName"> <label for="LastName">Last Name:</label></p> <p> <input name="LastName" type="text" id="LastName" /> </p> <p class="submit"> <input name="getName" type="button" id="getName" value="Get Name" onClick=”getName();" /> </p> </form> ``` ``` var getName = function () { if (document.getElementById("FirstName").value == "" || document.getElementById("LastName").value == "") { return ("Please enter a first name and a last name."); } else { var FullName = document.getElementById("FirstName").value + ' ' + document.getElementById("LastName").value; return FullName; } } ``` ``` function getName() { var FullName = document.getElementById('FirstName'); document.getElementById('LastName'); if (FullName.value != "") alert(FullName.value) else alert("Please enter first and last name") } ```

Original source