0

I'm having issues handling the submission of similar forms using the same submit function. My website imports event-data from Google cal, and depending on how many events there are, it creates similar forms for each event, using a foreach-loop. But I can't get the submission to work properly, giving the feedback message intended. Instead the page gets reloaded. This is the foreach-loop (php):

foreach ($feed->entry as $entry) {

    $eventdetail = ...
    $when_atr = ...
    $title = ...
    ...

    echo '<form method="post" class="formClass" action="" >

            <fieldset>
                <table>
                    <tr>
                        <td><label for="header"><b><font face="georgia, garamond" color="#303030">Header:</font></b></label>
                        <input type="text" name="header" id ="header" class="input" value="'.$title.'" /></td>
                        ...
                        ...
                    </tr>
                </table>
            </fieldset>
            <input type="submit" value="Add!" class="button" id="submit" name="submit" />
        </form>';
}

And this is my Submit-function:

$(document).ready(function(){

    $("form.formclass").submit( function (event) {
        event.preventDefault();
        if(checkdate(this.date)){
            var formdata = $(this).serialize();
            $.ajax({
                type: "POST",
                url: "add_event.php",
                data: formdata,
                success: function() {
                    $('#form').html("<div id='message'></div>");
                    $('#message').html("<h2>Event added!</h2>")
                    .append("<p>See you there.</p>")
                    .hide()
                    .fadeIn(1500, function() {
                        $('#message').append("<img id='checkmark' src='onewebmedia/message-512.png' />");
                    });
                }
            });
        }
        return false;
    });
});

I've thought about giving every form their own ID, but can I use that approach without having to write different functions for all forms? Or is there another approach that is better? It seems like the communication between the forms and the function doesn't work at all at the moment, when I click the submit-button, the page gets reloaded and not even the checkdate-function is called, which implies that there is something wrong with the communication between the form and the function.

jahed
  • 171
  • 12
  • "I can't get the submission to work without getting redirected to the php" - what do you mean by that? You should be able to have a single form handler handle multiple forms; a form is nothing but a submission of fields and values. Is your jQuery validation failing the form? – Brian Kendig May 09 '14 at 12:31
  • Sorry, I mean that the page gets reloaded instead of giving the feedback message intended. Can't there be a problem in finding the right form? – jahed May 09 '14 at 13:03
  • When I have the action written directly in the form (action="add_event.php") I get redirected to the php-file, but when I have the action written in the submit function, and leave the form action blank (action="") the page is reloaded instead. I want neither of these behaviours! – jahed May 09 '14 at 13:53
  • Probably, you are creating forms after you bind `submit` events to them which they don't exist in that time yet. – alpakyol May 09 '14 at 14:19
  • So I've tried different combinations of .on now, like $(document).on('submit', 'form.formclass', function() { $("form.formclass").submit(function( event )... and also $("form.formclass").on("submit", function( event ) but it's still not working?... – jahed May 09 '14 at 14:53
  • Try `$("form").on("click", ".formClass", function() { ... })`. By the way, you have a typo error on class selector **`formClass`** – alpakyol May 09 '14 at 15:50
  • Nope, it doesn't work either. Shouldnt it be $("form").on("click", ".formClass", function( **event** ) { ... }) ? Neither way works though. – jahed May 09 '14 at 17:23
  • Use Firebug's 'Net' panel to look at what happens when you submit the form. Is the form data being submitted, or not? This will tell you whether the problem is (a) your JavaScript not submitting the form properly, or (b) your form handler not doing the right thing with the data. – Brian Kendig May 10 '14 at 04:24
  • It's neither of those. The form handler seems to get confused when there are multiple similar forms, and therefore, the communication between the forms and the handler is broken - when submitting a form, the data doesn't even get to the handler, which I noticed because the handler is not checking the date, and even when I erase the if(checkdate)-statement, nothing happens. The code within the form-handler works properly when there is only one form on the page and I can tie the form to the form's id, but I can't do that when there is xx similar forms. – jahed May 10 '14 at 09:03
  • When action="" in the form, the page reloads, and when action="add_event.php", it executes the action but not through the form handler. Therefore, I assume something is wrong in the communication between the handler and the form - I can't tie the forms to the handler properly – jahed May 10 '14 at 09:05
  • By the way, ids must be unique, you are adding multiple forms with the elements with same id. Your page has multiple submit buttons with same id `submit`. Make them **unique** like submit, submit2 or whatever. Also do this for input elements and other elements with ids. – alpakyol May 10 '14 at 10:28

0 Answers0