Highlighted

Keeping form data for later use

LEGEND ,
Jan 22, 2016

Copy link to clipboard

Copied

Hello, all,

I know that this question doesn't really belong here, but the General Development forum is dead (I've already asked a question, there - no response), and the smartest users that I interact with are in this forum, anyway.  So, please forgive the audacity of posing this question, here, and please do not move it to another forum.

I've been tasked with setting a form up so that a user can check a checkbox that will save the form for re-use, later.  The user can give it a name, and it will appear in a SELECT drop-down on future visits.

What I have in mind (and I've done, so far) is to use jQuery.serializeArray() and JSON.stringify() to save the form fields and data as a string in a single column of a database table.  So far, so good.

However, upon retrieving said string, posting it back to the browser and using JSON.parse() to make that data into an object, I'm facing some real difficulty in populating the data back into the form.

The code that I have, so far, is not the actual form that I'm working on - I've created a dummy form just to get this code to work, and will transfer it to the production form as soon as I've got this working.

I'm going to try to get code from my dev environment (isolated from internet) to post here.  I'll be right back.  (If I sit here, the session will expire before I hit the "Post" button on this message.)

V/r,

^_^

The select form elements don't have an attribute of type.  So, trying to get that attribute would fail.  What I would do is add a data attribute to all the fields to store the type.

<select name="inputc" id="inputc" data-type="select"> 

then update your code to get the field...

var frminpt = datab, $el = $("[name=" + frminpt.name + "]"), type = $el.data('type'); alert(frminpt.name + " is a " + type)

hth,

--Dave

Views

325

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Keeping form data for later use

LEGEND ,
Jan 22, 2016

Copy link to clipboard

Copied

Hello, all,

I know that this question doesn't really belong here, but the General Development forum is dead (I've already asked a question, there - no response), and the smartest users that I interact with are in this forum, anyway.  So, please forgive the audacity of posing this question, here, and please do not move it to another forum.

I've been tasked with setting a form up so that a user can check a checkbox that will save the form for re-use, later.  The user can give it a name, and it will appear in a SELECT drop-down on future visits.

What I have in mind (and I've done, so far) is to use jQuery.serializeArray() and JSON.stringify() to save the form fields and data as a string in a single column of a database table.  So far, so good.

However, upon retrieving said string, posting it back to the browser and using JSON.parse() to make that data into an object, I'm facing some real difficulty in populating the data back into the form.

The code that I have, so far, is not the actual form that I'm working on - I've created a dummy form just to get this code to work, and will transfer it to the production form as soon as I've got this working.

I'm going to try to get code from my dev environment (isolated from internet) to post here.  I'll be right back.  (If I sit here, the session will expire before I hit the "Post" button on this message.)

V/r,

^_^

The select form elements don't have an attribute of type.  So, trying to get that attribute would fail.  What I would do is add a data attribute to all the fields to store the type.

<select name="inputc" id="inputc" data-type="select"> 

then update your code to get the field...

var frminpt = datab, $el = $("[name=" + frminpt.name + "]"), type = $el.data('type'); alert(frminpt.name + " is a " + type)

hth,

--Dave

Views

326

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 22, 2016 0
LEGEND ,
Jan 22, 2016

Copy link to clipboard

Copied

Okay.. here is the test form that I'm working with:

<form name="formthis" id="formthis">

Input a: <input type="text" name="inputa" id="inputa" />

<br />Input b: <input type="password" name="inputb" id="inputb" />

<br />Input c: <select name="inputc" id="inputc">

            <option value="">Select</option>

            <option value="this">THIS</option>

            <option value="that">THAT</option>

        </select>

<br />Input d: <input type="checkbox" name="inputd" id="inputd_1" value="inputd_1" />1 <input type="checkbox" name="inputd" id="inputd_2" value="inputd_2" />2 <input type="checkbox" name="inputd" id="inputd_3" value="inputd_3" />3

<br />Input e: <select name="inpute" size="3" multiple="multiple" id="inpute">

                    <option value="Option A">Option A</option>

                    <option value="Option B">Option B</option>

                    <option value="Option C">Option C</option>

                    <option value="Option D">Option D</option>

                    <option value="Option E">Option E</option>

                </select>

<br />Input f: <input type="radio" name="inputf" id="inputf_a" value="Alpha" />Alpha <input type="radio" name="inputf" id="inputf_b" value="Bravo" />Bravo <input type="radio" name="inputf" id="inputf_c" value="Charlie" />Charlie

<br /><input type="button" name="submitBtn" id="submitBtn" value="DO IT" onclick="return saForm();" />

<br /><textarea name="txtarea" id="txtarea" width="100%" height="200"></textarea>

</form>

The saForm() function is currently set to just iterate through the form elements by name retrieved from the server.

function saForm(){

    var thisForm = $('#formthis').serializeArray(), thatForm = JSON.stringify(thisForm), frm = document.getElementById('formthis'), elems = frm.elements;

    frm.reset(); // Clear form data after submitting, for testing purposes.

    $.ajax({

        type: "POST",

        url: "doit.cfc?method=myFunction",

        data: {theData: thatForm}

        }).done(function(data){

            var datab = JSON.parse(data), j;// Turns JSON string into JS array-like object with keys (associative).

            for(var j in datab){

                var frminpt = datab, $el = $("[name=" + frminpt.name + "]"), type = $el.attr('type'); alert(frminpt.name + " is a " + type);

                }

            });

    }

This is working fine, except for single and multiple SELECTs.  They alert as undefined.  Why?  I can't set the selected options if I can't identify the element as a SELECT.

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 22, 2016 0
Advocate ,
Jan 22, 2016

Copy link to clipboard

Copied

I would ask this at http://stackoverflow.com/, you will get a response a lot quicker by loads more people.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 22, 2016 0
LEGEND ,
Jan 22, 2016

Copy link to clipboard

Copied

I once had an SO account for all of about four days.  I requested to have it deleted because SO (and all the associated sites/forums) is more of a popularity contest than an actual help/support forum.  There are more trolls and jerks who downvote just for the sake of downvoting than there are people who are serious about helping others.  Granted, there are some super-smart people who peruse SO; but they can often be overshadowed by class-a jerks.

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 22, 2016 0
LEGEND ,
Jan 25, 2016

Copy link to clipboard

Copied

I appreciate haxtbh's suggestion, but it really isn't an option.  Is anyone, here, familiar enough with JavaScript and jQuery?

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 25, 2016 0
Engaged ,
Jan 25, 2016

Copy link to clipboard

Copied

The select form elements don't have an attribute of type.  So, trying to get that attribute would fail.  What I would do is add a data attribute to all the fields to store the type.

<select name="inputc" id="inputc" data-type="select"> 

then update your code to get the field...

var frminpt = datab, $el = $("[name=" + frminpt.name + "]"), type = $el.data('type'); alert(frminpt.name + " is a " + type)

hth,

--Dave

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 25, 2016 0
LEGEND ,
Jan 25, 2016

Copy link to clipboard

Copied

!

I'll give that a shot, fergusondj‌.  Thank you.  I'll report back and let you know how it went.

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 25, 2016 0
LEGEND ,
Jan 25, 2016

Copy link to clipboard

Copied

BRILLIANT!!!

Thanks, fergusondj‌.  I had to make a minor adjustment ($el.attr('data-type') instead of $el.attr('type')) and it works excellent (except it doesn't see a file input, but that's cool.)

Much appreciated.

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 25, 2016 0
Engaged ,
Jan 25, 2016

Copy link to clipboard

Copied

Glad it worked for you.  Also, you should use  $el.data('type'); to get to data attributes not $el.attr('data-type') .  This was in my original example but you may have missed it.

https://api.jquery.com/data/

Thanks,

--Dave

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 25, 2016 0
LEGEND ,
Jan 25, 2016

Copy link to clipboard

Copied

I'll give that another shot.. it didn't work until I changed it to 'data-type'.

And, I may have spoke too soon.  Your suggestion works for everything except _multiple_ selects (but only because the JSON format doesn't do "fieldName":"Val1,Val3" - it's "fieldName":"Val1","fieldName":"Val3")

Still.. I'm way ahead of where I was before your response.  Thank you!

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 25, 2016 0
LEGEND ,
Jan 26, 2016

Copy link to clipboard

Copied

I'm using $el.data('type'), but when using alert(), it is undefined.

Nevermind.. I was tired, yesterday, and made a mistake that removed the name of the elements, so NOTHING was defined.  (sheepish grin)

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2016 0
LEGEND ,
Jan 26, 2016

Copy link to clipboard

Copied

Sigh.  Now I'm experiencing another issue.

Apparently, when a page with a select-multiple is loaded (ergo, no options are selected), the select-multiple does not exist.

I'm trying to set options selected based upon what is being returned, but I keep getting "$(...).val() is null" and the pointer is pointing to the code that references the select-multiple.

I've tried if(!$('#selectName')){ $('#selectName').val([]);}, but this isn't doing anything, apparently.

How can I initialize a select-multiple upon page load?

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2016 0
LEGEND ,
Jan 26, 2016

Copy link to clipboard

Copied

Finally.  SMH.

I create a blank array at the start of the function.

Using a for() loop, when it comes to the "select-multiple" type, I .concat() the array.

After the loop, I set the value of the multi-select to that array.

Head-desk!  Head-desk!  Head-desk!

V/r,

^_^

UPDATE:  THERE ARE NO LINKS IN THIS POST.  WHY IS IT BEING "MODERATED"?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2016 0