CODEWITHSUNDEEP
javascriptjqueryhtml
Jeff Hines
Jeff Hines

Reputation: 3521

Copy HTML into textarea on submit

I have a form with multiple blocks of inputs with default values assigned by PHP, and I would like to pass the HTML markup of one of the blocks into a PHP script. Here is a modified snippet of my form to exemplify the markup:

<form action="/page/do_work/job_number" id="work_form">
    <textarea style="display: none;" name="markup" id="markup"></textarea>
    <div id="block_1">
        <table>
            <tr>
                <td><input type="text" value="123" /></td>
                <td><input type="text" value="123" /></td>
            </tr>
        </table>
    </div>
    <div id="block_2">
        <table>
            <tr>
                <td><input type="text" value="abc" /></td>
                <td><input type="text" value="abc" /></td>
            </tr>
        </table>
    </div>
</form>

I am listening for the submission of the form with some jQuery, so that I can copy the HTML of the table into the textarea.:

$('#work_form').submit(function(){
    // Snatch the markup
    var markup = $('#block_1', '#work_form').html(); 
    // Place it into the textarea
    $('#markup', '#work_form').html( markup );
    // Move on
    return true;
});

The Problem is that the modified values are not being copied into the textarea. For instance, if I were to change the values from "abc" to "xyz" the markup that is passed to the textarea still says "abc". Any help would be greatly appreciated.

Edit: Using .html() or .val() both add the markup in to the textarea, but I would like to know why the changes in value of the inputs are not reflected in the markup that is inserted into the textarea. Upon further inspection, changing the value of the input fields and then inspectigating them in Firebug shows the default value is retained. Do I need to update the DOM in some way?

Edit 2: The markup variable is being set, but the changes I make to the input fields are not reflected in the markup inserted into the textarea.

Upvotes: 0

Views: 1684

Answers (3)

Jeff Hines
Jeff Hines

Reputation: 3521

Changes to input fields do not change the DOM, which is what I was supposed to do. To change the DOM, I edited the .submit() function to look like this:

$('#work_form').submit(function(){
    // Update the DOM
    var block_1 = $('#block_1', '#work_form');
    block_1.find('input').each(function(i,e){
        el = $(e);
        el.attr('value', el.val());
    });
    // Snatch the markup
    var markup = block_1.html(); 
    // Place it into the textarea
    $('#markup', '#work_form').html( markup );
    // Move on
    return true;
});

Thanks @PherricOxide for pointing me to this question:

reading innerHTML of HTML form with VALUE attribute (& its value) of INPUT tags

Upvotes: 1

geekman
geekman

Reputation: 2244

Well for text area you need to change its 'value' not its 'innerhtml' and thats what .html does.

$('#markup').val(markup)

Try this.

Upvotes: 1

PherricOxide
PherricOxide

Reputation: 15929

Try,

$('#markup', '#work_form').val( markup );

Also throw in a console.log(markup) to make sure the markup variable is getting set right.

Upvotes: 1

Related Questions