jQuery - Accessing the set value of input fields.

I'm afraid your description of the problem is too vague.

"if the content elements are changed within the email template, the input field on the multifunctional form does not change."

I have a few questions:

What changes the content elements within the email template? Are the 'content elements' changed via javascript? Is there an Ajax call happening somewhere?

What is formhtml() ? Is this a javascript function for a particular CMS or something?

You can get the values by calling $('#placedContentIDList').val(); again... but I really don't understand your question yet.

I'm happy to help if you could just elaborate. Cheers.

The content elements are changed via jQuery draggable/droppable funcions.  There is an Ajax call, via coldfusion, which is used to change the template.  The content elements come from expandable libraries which are switched out when the templates are switched out, since each library is specific to a content area type, and each template may or may not have one to three content area types.  I added a screen cast to show the template interface in action.

brianmfalls-432762.flv

formhtml() is a custom function that I found some months ago to solve a similar issue.  I have attached the function as well.

///////////////////////////////////////////////// begin formhtml() function  /////////////////////////////////////////////////
$.fn.formhtml = function() {
	if (arguments.length) return $.fn.html.apply(this,arguments);
	this.find("input,textarea,button").each(function() {
		this.setAttribute('value',this.value);
	});
	this.find(":radio,:checkbox").each(function() {
		if (this.checked) this.setAttribute('checked', 'checked');
		else this.removeAttribute('checked');
	});
	this.find("option").each(function() {
		if (this.selected) this.setAttribute('selected', 'selected');
		else this.removeAttribute('selected');
	});
	return $.fn.html.apply(this);
};
///////////////////////////////////////////////// end formhtml() function  /////////////////////////////////////////////////

Select allOpen in new window

It's early yet.  Let me drink some coffee and look to remember how I am calling the values presently and I will get back to you on whether val() will do the trick or not.  Thanks for responding KiasChaos83.

jQuery('.ui-droppable', '#templateContainer').each(function(eachIndex){ 

Select allOpen in new window

Since droppable area types will vary from layout template to layout template, I opted to use jQuery’s each() function to loop through the droppable areas.  The ‘types’ are unique only by image size.  E.G. Droppable elements can only be placed in droppable areas with corresponding area/size.

var contentElement = $(this).attr('contentElementID');
var pcIDl = $('#placedContentIDList').val();
var placedContent = pcIDl + ',' + contentElement;

Select allOpen in new window

-contentElement is the value of the 'contentElementID' attribute of the content element within the droppable area being indexed by the each() function.
- pcIDl is the value of the existing list of content element ID’s on the multifunctional form.
- placedContent is the appendage of the contentElementID to pcIDl.

      

$('#placedContentIDList').val(placedContent);
});

Select allOpen in new window

The value of the multifunctional form field is changed to the appended list.


Since the value we are after is in the contentElementID attribute of the content elements container (<td></td>) tag, we cannot leverage val().  I tried adding a value attribute to the container tag, but when I called the tag via the tags ID then val(), it came back ‘undefined’.  I’ll keep poking away at it.  :)

var contentElement = $(this).attr('contentElementID');

Select allOpen in new window

Nice work, I'm glad you solved it ;)

Thanks Kias.

Setting the value as a cookie solves the issue.  The key is in using the getcookie() and killcookie() functions.