Question

I’m working on a project (a shoutbox) that requires a form to be submitted without reloading the page.Should be easy, right? Well, I’m using jQuery, and I’m running in to a problem. When I only have one input box, everything works fine. But if I have two, it breaks.

Form –

<form id="freeshout-form" method="post">
    <input id="name" type="text" name="name" value="name" />
    <input id="entry" type="text" name="entry" value="entry" />
</form>

jQuery –

$("#freeshout-form").submit(function(event) {
    event.preventDefault();
    alert($("#name").val() + ' - ' + $("#entry").val());
    });

However, if I remove one of the input boxes the alert box will show the value of that input and “undefined” for the value of [what would have been] the other input value. But if I put the input value I took out back in, the alert box doesn’t show up at all.

Any ideas?

Update: Works on jsfiddle, but not on my site. Same code, though, and I removed everything that could possibly interfere with it.

Answer 1

Your code works fine when I add a submit button. You can add an invisible one. Or you could have the form listen for the “Enter” key.

---

Perhaps a caching issue. Clear your browser’s cache and try again.