Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Bill Dowd
Bill Dowd
7,681 Points

How do I find the value of the id property in a span tag of a dynamically generated list of database results?

Here is my loop to generate the html: ```$config_list = ""; $i = 0;

foreach($recent as $value) {
    $i += 1;
    $config_list .= "<div>\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";
}

Here are some of the results:

```<div>
    <form id="config_1" method="post" action="controller.php">
    <input type="hidden" name="form_id" value="config">
    <input type="text" name="setting" value="birthday_alert_days" readonly>
    <input type="text" name="value" value="30">
    <button id="button_1">Save</button>
    <span id="saved_1" style="color: #f00;"></span>
    </form>
</div>
<div>
    <form id="config_2" method="post" action="controller.php">
    <input type="hidden" name="form_id" value="config">
    <input type="text" name="setting" value="default_state" readonly>
    <input type="text" name="value" value="WA">
    <button id="button_2">Save</button>
    <span id="saved_2" style="color: #f00;"></span>
    </form>
</div>
<div>
    <form id="config_3" method="post" action="controller.php">
    <input type="hidden" name="form_id" value="config">
    <input type="text" name="setting" value="mia_days" readonly>
    <input type="text" name="value" value="90">
    <button id="button_3">Save</button>
    <span id="saved_3" style="color: #f00;"></span>
    </form>
</div>

And here is the JQuery code:

    $(document).ready(function() {
        $('form').submit(function(evt) {
            evt.preventDefault();
            var id = $(this).find("span").attr("id");
//          var id = $(this).attr("id");
            var url = $(this).attr("action");
            var formData = $(this).serialize();
            $.post(url, formData, function(response) {
                $('#id').html("Saved!"); // HELP! This doesn't work
            }); // end post
        }); // end submit
    }); // end ready
</script>

I need to be able to grab the span id from the clicked form or be able to use "this" somehow, so I can display "Saved!" to the right of the "Save" button. For a bonus, I would love to be able to have it fade away after a couple of seconds.

Thank you for your help.

Bill

1 Answer

Bill Dowd
Bill Dowd
7,681 Points
Bill Dowd
Bill Dowd
7,681 Points

I was on the right track, just missed a few points. Here is the final, so far, code.

    $(document).ready(function() {
        $('form').submit(function(evt) {
            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(4000);
            }); // end post
        }); // end submit
    }); // end ready
</script>