I have run into a basic problem. I have a very simple form that asks the user their name and then they click the submit button and an alert is shown with their name in it.

When the button is clicked nothing happens. I have called the function in the eventhandler on the button.

Here is the form:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type ="text/javascript">
        var myName = document.getElementById('inputName');

        function clicked()
        {
            alert("Hello " + myName.value + "!");
        }
    </script>
</head>
<body>
<form>
What is your name? <input type="text" id="inputName" name="inputName" />
<br />
<input type="submit" id="buttonSubmit" name="buttonSubmit" onclick="clicked()" />
</form>
</body>
</html>

Any ideas?

The problem i see without testing your code is that your script runs as the page loads. There is no value in the input element yet. Grab the value of the input element after the button is clicked, not before.

Try...

<script>

function clicked()
{
    var myName = document.getElementById('inputName');
    alert("Hello " + myName.value + "!");
}

</script>

Works fine...pops up the alert with the value of the input element, then the form is submitted.

<!DOCTYPE html>
<html>
<head>
    <script>

        function clicked()
        {
            var myName = document.getElementById('inputName');
            alert("Hello " + myName.value + "!");
        }
    </script>
</head>
<body>
<form>
What is your name? 
<input type="text" id="inputName" name="inputName" />
<br />
<input type="submit" onclick="clicked()" /> 
</form>
</body>
</html>