How do I copy the values of one form element to another?

Question

This is a follow up to this questions:

How can I manipulate a form / inputs to be ignored when a form is submitted

I have the info displayed, the form, the show()s and hide()s, etc. Most everything seems to be progressing fairly well. Where I could use some input - no pun ontended - is on how to take the new values in the form and copy those to the display only div as part of the ajaxSuccess.

I can copy type=text and textarea but what about checkboxes, multi-selects and radios.

In short, once the new values in the form are submitted, I need to update the page (not as a form) with those new values. Perhaps I need to write some for each form element type? Even so, I'm not quite sure where to start.

Pardon me if my working isn't clear. If that's the case just ask what you'd like me to clarify.

Have you tried the `:input` selector? – Ja͢ck May 29 '12 at 02:59 — Ja͢ck, May 29 '12 at 02:59

score 0 · Answer 1 · answered May 29 '12 at 08:44

0

The way that will make most sense is to have the script that is processing your form return the form contents in the ajaxSuccess data. Here's an example:

The javascript:

$.ajax({
    url: 'ajax/process.php',
    success: function(data) {
        // Load returned data into page
        $('#result').html(data);
    }
});

The php:

var $input1 = $_POST['input1'];
var $input1 = $_POST['input1'];

// DO SOMETHING WITH VARS AND IF SUCCESSFUL RETURN

if($success){
    echo "Thanks! Here is your info: ".$input1." and ".$input2;
}

Once the data has been returned you can manipulate it anyway you like. For example if you needed to separate out the different values from the form you could post a comma separated string back from the PHP and use the javascript .split() method to create an array from that string.

Hope that's helpful :)

answered May 29 '12 at 08:44

Steve O

5,224
1
24
26

Thanks @Steve O - Unfortunately, I don't think ExpressionEngine's SafeCracker + Ajax returns an object that includes the fields + values updated. I'm looking for an easy, or at least "reasonable" way to look at an input control (e.g. multi-select), recognize what it is, and then update a "twin" control elsewhere on the page. I'm using a data attribute in the From control to ID (literally) the To. Gotta be dobable, yes? – Chief Alchemist May 29 '12 at 12:31
btw, my Plan B is to only have a single form, continue to use disabled="disabled" but use addClass / removeClass to "toggle" how the form is styled. The disable = false version would look like a real form, disable = true with class="is-disabled" (for example) would style the form to hide borders, etc. The problem with this is, what if the user makes a change and then hit cancel. How would I revert the changes back to the values prior to the Edit links being clicked? – Chief Alchemist May 29 '12 at 12:36
Duh?! Just discovered the form Reset. Looks like plan B will be the ideal solution. – Chief Alchemist May 29 '12 at 13:25

score 0 · Answer 2 · answered May 29 '12 at 12:27

I'd say that your best bet is to take a different approach altogether, and reload your content from the database after it's been updated - in this case via an AJAX call. The reason being that your posted content from the form may not match what ends up being saved to the database, as some of your fieldtypes may process and alter the data they're passed (for example, stripping tags, formatting text, etc). This way the refreshed content exactly matches what is displayed when the same content comes from the Channel Entries call.

How do I copy the values of one form element to another?

2 Answers2