Where am I going wrong with form submission?

Question

Before I added the menu buttons, this worked, but now it submits to the controller.php instead of capturing in JQuery. It's the top .submit(function(evt)... and it worked with "form" originally, but I've tried "#config_form" and "#config_1". Nothing stops the submission.

The getConfigurations() function builds the forms for the config DB results.

Note: the DB update works just fine.

<script>
    $(document).ready(function() {
        $('#config_1').submit(function(evt) { // This captures the config results DB updates "Save" button
            evt.preventDefault();
            var id = $(this).find("span").attr("id"); // Finds the span id attribute
            $('#' + id).show(); // Shows any faded out "Saved!" text
            var url = $(this).attr("action");
            var formData = $(this).serialize();
            $.post(url, formData, function(response) {
                $('#' + id).text("Saved!").fadeOut(3000);
            }); // end post
        }); // end submit

        $('.setup_main_menu').submit(function(evt) { // This captures the menu buttons clicks
            evt.preventDefault();
            var url = $(this).attr("action");
            var formData = $(this).serialize();
            $.ajax({
                type : 'POST',
                url : url,
                data : formData,
                success: function(data) {
                    $('#output').html(data);
                }
            }); // end ajax
        }); // end submit

    }); // end ready
</script>

Controller.php:

// This file processes all form submissions

if($_REQUEST['form_id'] == "config") {
    extract($_REQUEST);
    if(setConfigurations($setting, $value)) {
        // return to the page
    }
    else {
        print "There was a problem writing to the database.";
    }
//  return getConfigurations();
}
else if($_REQUEST['form_id'] == "inmates"){

}
else if($_REQUEST['form_id'] == "units"){

}
else if($_REQUEST['form_id'] == "lessons"){

}
else if($_REQUEST['form_id'] == "certificate"){

}
else if($_REQUEST['form_id'] == "grader"){

}
else if($_REQUEST['form_id'] == "config_menu"){
    print getConfigurations();
}
else if($_REQUEST['form_id'] == ""){

}

// Returns all the configurations from the database file
function getConfigurations() {
    require("../_private/database.php");
    try {
        $results = $db->query("
                SELECT * FROM config");
    } catch (Exception $e) {
        echo "Data could not be retrieved from the database.";
        exit;
    }
    $recent = $results->fetchAll(PDO::FETCH_ASSOC);

    $config_list = "";
    $i = 0;

    foreach($recent as $value) {
        $i += 1;
        $config_list .= "<div id=\"config_form\">\n";
        $config_list .= "\t<form id=\"config_" . $i ."\" method=\"post\" action=\"controller.php\">\n";
        $config_list .= "\t<input type=\"hidden\" name=\"form_id\" value=\"config\">\n";
        $config_list .= "\t<input type=\"text\" name=\"setting\" value=\"" . $value["setting"] . "\" readonly>\n";
        $config_list .= "\t<input type=\"text\" name=\"value\" value=\"" . $value["value"] . "\">\n";
        $config_list .= "\t<button id=\"button_" . $i ."\">Save</button>\n";
        $config_list .= "\t<span id=\"saved_" . $i . "\" style=\"color: #f00;\"></span>\n";
        $config_list .= "\t</form>\n";
        $config_list .= "</div>\n";
    }

    return $config_list;
}


function setConfigurations($setting, $value) {
    require("../_private/database.php");
    try {
        $results = $db->query("
                UPDATE config SET value=\"" . $value . "\" WHERE setting = \"" . $setting . "\"");
    } catch (Exception $e) {
        echo "Data could not be written to the database.";
        exit;
    }
    return true;
}

?>

I hope this makes sense to someone. Thanks!

Answer 1 · 2014-10-31T23:44:24Z

October 31, 2014 11:44pm

From just a quick glance, it looks like you're loading the content for the forms in the setup area dynamically -- that is, the forms with data load via AJAX based on the buttons the user clicks. Is that the case? If so, you have to apply the "submit" either when the code new HTML is loaded, or use event delegation. With jQuery event delegation lets you attach an event handler to a parent element that's already on the page -- that parent element looks for events on particular children and then runs the event handler. The child element doesn't need to be in place beforehand, just the parent.

For example, say you had this code when the page loads:

<div id="formContainer">

</div>

then using Ajax you load something new into that div, so that the div then looks like this

<div id="formContainer">
  <form action="controller.php">

  </form>
</div>

You would use event delegation like this. First select the parent element

$('#formContainer')

than use the 'on' event, add the submit event, the child selecotr, and the function that should run when the event occurs on the child like this:

$('#formContainer').on('submit','form', function () {

});

Notice, the second argument to the on() function. This tells the parent -- formContainer -- that when a form inside it is submitted, then run the function.

Read this page for more information: http://learn.jquery.com/events/event-delegation/

Thank you Dave McFarland...

Answer 2 · 2014-10-20T20:13:32Z

October 20, 2014 8:13pm

Does it work if you just write the HTML instead of dynamically generating it with the PHP? If it does try making .submit(function ... be .on("submit", function ...

Answer 3 · 2014-10-22T01:07:15Z

October 22, 2014 1:07am

Okay so, first up, though it probably won't make a difference to the functioning of your code, you're repeating the id attribute value of config_form for each one of the divs surrounding the config forms. Change that to a class if it's used for styling purposes (in your PHP code).

Secondly, the value attributes of the form_id hidden input fields in your .setup_main_menu forms don't match what your PHP code is expecting for the value of the $_REQUEST['form_id'] variable, with the exception of config_menu.

And I have no idea whether this would affect it or not, but I don't think you should use existing attribute names in the name attribute... e.g. don't use name="value". Since value is a property of form elements in the DOM, and even val is a method from jQuery, I'd suggest something else. Maybe use config_setting and config_value or something like that?

I don't really know if changing anything I suggested is actually going to help, but it's probably good practice anyways!

Answer 4 · 2014-10-27T00:48:03Z

October 27, 2014 12:48am

I don't think viewing the source code will show you anything that has been loaded via Ajax, which the outputted area would be, correct?

Anyways, the only other thing I can think of is that the submit event handlers aren't being properly bound to the .setup_main_menu forms...

Are those forms being generated dynamically with Ajax or anything similar? Perhaps you could change the code to use jQuery's .on() method?

You would use the following:

$('.setup_menu_group').on('submit', '.setup_main_menu', function(evt) { // This captures the menu buttons clicks
...

The .on() method is also supposedly more efficient that the .click()/.submit() etc. methods.

I'm running out of ideas though...

Answer 5 · 2014-10-27T02:05:08Z

October 27, 2014 2:05am

Perhaps you should put some console.log() calls throughout your JS/jQuery to try and determine where it's going wrong.

That and add an error callback function to your Ajax (similar to the success one you've already got), to see if that's where it is failing...

This is getting a bit tricky to picture everything in my head, and I'm getting a bit lost with how you've got it all pieced together.

Not sure if there is a CodePen equivalent that allows sharing of PHP code, since sharing server side code involving databases is generally not a good idea...

Sorry I couldn't be of more help!

Answer 6 · 2014-10-27T04:29:29Z

October 27, 2014 4:29am

If you mean hidden by CSS, then no, there shouldn't be any difference...

This all seems like some of the jQuery or Ajax is modifying HTML and you're either losing the event handlers that are bound to some of the modified elements, or some JavaScript is getting run too early or to late...

You might just have to systematically add in JS console.log() and PHP echo/var_dump() commands everywhere to see what is and isn't being run, and in what order.

Answer 7 · 2014-10-31T04:04:27Z

October 31, 2014 4:04am

Hi Bill Dowd

Is this somewhere live that we can see it? Can you provide a URL? It's difficult to troubleshoot with just these snippets. If it's up on a web server it'll be a lot easier to try to figure out an answer.

Answer 8 · 2014-10-31T05:20:36Z

October 31, 2014 5:20am

To begin troubleshooting this Bill Dowd,

I'd first strip your HTML and JavaScript code down to the smallest testable unit:

Create a web page with JUST the html form you have had trouble with -- it sounds like it's just the one.
Validate the HTML to make sure it's valid HTML -- the markup you posted didn't pass W3C validation when I tested it.
Then add the JavaScript that responds to just that one form.
Strip everything out of the Javascript except the original event handler:

$('#config_1').submit(function(evt) { // This captures the config results DB updates "Save" button
            evt.preventDefault();
}); // end submit

The code at this point should do nothing -- not submit to the controller.php file at all. Then slowly add one line of JS at a time and test. Repeat this process until you can identify the error.

For us to help, however, you'll need to place this up on a publicly accessible web server -- it sounds like there are too many moving parts for us to decipher the problem with just the code you've provided. If, as you suggest, the problem is related to the tabbed panels, we'll need to see a live demo to figure this out.

Welcome to the Treehouse Community

Looking to learn something new?

Bill Dowd

Bill Dowd

Where am I going wrong with form submission?

Ken Alger

Ken Alger

Ryan Duchene

Ryan Duchene

Bill Dowd

Bill Dowd

Iain Simmons

Iain Simmons

Bill Dowd

Bill Dowd

8 Answers

Bill Dowd

Bill Dowd

Iain Simmons

Iain Simmons

Bill Dowd

Bill Dowd

Joe Manson

Joe Manson

Bill Dowd

Bill Dowd

Iain Simmons

Iain Simmons

Bill Dowd

Bill Dowd

Iain Simmons

Iain Simmons

Bill Dowd

Bill Dowd

Iain Simmons

Iain Simmons

Bill Dowd

Bill Dowd

Bill Dowd

Bill Dowd

Iain Simmons

Iain Simmons

Bill Dowd

Bill Dowd

Dave McFarland

Dave McFarland

Bill Dowd

Bill Dowd

Iain Simmons

Iain Simmons

Dave McFarland

Dave McFarland