Hi,

I have a simple page that submits a form via Ajax. If I leave both
fields blank i get the following response in JSON from the server.

{"errors":{"lastName":"Required","firstName":"Required"}}

I have coded the js to check for errors and then update the page based
on them.

What I would like to do is iterate over the errors returned rather
than have to hard code each error check. So i could use the lastName
and firstName from the JSON, then append '.error' and use the
firstName.error to lookup the span to then set the error message in.

Is this possible?

Below is my html page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd";>
<html>
<head>
    <title></title>

    <script type="text/javascript" src="/js/prototype-1.6.0.3.js"></
script>

    <script type="text/javascript">

        function submitTheForm() {

            // rest the errors
            $('firstName.error').innerHTML='';
            $('lastName.error').innerHTML=''

            $('example').request({
                    requestHeaders: {Accept: 'application/json'},
                    onSuccess: function(transport){
                        var json = transport.responseText.evalJSON();

                        var errors = json.errors;

                        if ( errors.firstName != null ) {
                            $
('firstName.error').innerHTML=errors.firstName;
                        }

                        if ( errors.lastName != null ) {
                            $
('lastName.error').innerHTML=errors.lastName;
                        }
                    },
                    onComplete: function(){ alert('Form data
saved!')},
                    onFailure: function() { alert('Failed!')}
                })

            return false;
        }

    </script>




</head>
<body>

<form id="example" method="POST" action="/ws/simple" name="command">
    <fieldset>
        <legend>User info</legend>
        <div><label for="firstname">First Name:</label>
            <input type="text" name="firstName" id="firstName"
value=""/><span id="firstName.error" /></div>

            <div><label for="lastname">Last Name:</label>
            <input type="text" name="lastName" id="lastName" value="" /
><span id="lastName.error" /></div>


        <div class="buttonrow" ><input type="submit"
value="serialize!" onclick="return submitTheForm()"/></div>
    </fieldset>
</form>

</body>
</html>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to