Guys, im scratching my head around this one.
I have this website that basically contains a few forms that are filled in by the user. The user then can download that information in human readable format (pdf) or machine readable format (xml) but I'm having a slight problem submitting textboxes.
I have a few of them, for instance in the description section, but when i access the $_POST['Desc_Desc_desc'] value, it's empty even though i can see content on the textarea. The weird thing is that when i use firebug to inspect the element, it shows the element as if it had no contents..
Can anyone figure what is causing this strange behavior?
In service_level_library.buttons.prepForSubmit, the textarea is cloned along with the rest of the form via the DOM cloneNode method. This copies HTML element attributes, but not DOM properties. (Sometimes DOM element node properties have a corresponding attribute, so updating the property affects the attribute, which can make it appear that DOM properties are being copied.)
While textarea DOM objects have a value property, the textarea HTML element doesn't have a corresponding value attribute, so the value property isn't exposing an attribute. Thus when you clone the node, the (empty) value attribute is what gets copied, leaving the current value of the element (as accessible via the value property) behind.
To fix your script, do one of:
Copy the value after cloning.
Set the initial value for the textarea, either by assigning to the defaultValue property or setting the text content of the node, before cloning. This works because the current value of the cloned node will be set to its initial value, and a deep copy of a textarea will copy its text contents (the source of its initial value).
Programmatically replace the textarea with an input before cloning (though this would be more involved than the other options),
You say in your question $_POST['Desc_Desc_desc'], although in the code I see a textarea with name Dep_desc and id Dep_Desc_Desc. Then you should write $_POST['Dep_desc'], i.e. the name of the <textarea> instead of the id.
Also, textareas don't have a value attribute, so in your html you should write the initial content between the opening and the closing tag.
HTML
<textarea name="Dep_desc" id="Dep_Desc_Desc">Initial content</textarea>
PHP
echo "The content of the textarea is ".nl2br(htmlspecialchars($_POST['Dep_desc']));
notes
nl2br: Respect new lines in the html output replacing the \n symbol with <br />.
htmlspecialchars: Prevent possible XSS attacks.
I used firebug to analyze what gets sent to your script by
document.getElementById('descriptionForm').submit()
The form data is being sent correctly
Content-Type: application/x-www-form-urlencoded Content-Length: 113
Desc_Desc_name=SO&Desc_Desc_keywords=overflow&Desc_Desc_concept=http%3A%2F%2Fso.com&Desc_Desc_desc=Stack+overflow
The form action parameter is currently set to "submit.action" which yields a 404.
The form buttons are defined outside your form tag.
The form buttons does not activate a submit on your form.
Bottom line: the form does not get submitted to the intended recipient.
I had a similar issue but later I found out that somewhere at the bottom, I had reused the same name for another element which was empty. That wiped off my required element at var_dump, print_r as well. It took a while to get that out.
Related
I've been trying for a while now to find a decent way to insert and modify text in a tinyMCE textarea using jQuery with little success. Most of the answers that people provide are generally only being used for a single tinyMCE textarea, or by calling a tinyMCE field based off of an ID. This is all well and good but my project has me creating repeated fields dynamically on the page, which makes it difficult to get a specific tinyMCE element.
Before I implemented tinyMCE I was calling the repeated fields by their class in association with a parent div.
Ex:
$(this).parents(".main-category").find(".js-description").val(product_data['description_' + $('#language').val()]);
The above code is run when I change the product via dropbox. "$(this)" being the dropbox, it then calls for the parent div and finds the description textarea where it would then input the correct default data (passed through from a controller) into the field.
the problem here is that when you initialize tinyMCE, the original text area is all but buried and become inaccessible with this method.
the tinyMCE site provides documentation for how to insert text into a tinyMCE field, but these only work when there's a single tinyMCE element on the page or when you are manually inserting the fields yourself.
// Sets the HTML contents of the activeEditor editor
tinyMCE.activeEditor.setContent('<span>some</span> html');
// Sets the raw contents of the activeEditor editor
tinyMCE.activeEditor.setContent('<span>some</span> html', {format : 'raw'});
// Sets the content of a specific editor (my_editor in this example)
tinyMCE.get('my_editor').setContent(data);
// Sets the bbcode contents of the activeEditor editor if the bbcode plugin was added
tinyMCE.activeEditor.setContent('[b]some[/b] html', {format : 'bbcode'});
Is there any way to convert any of these into something that I could use? Or is there some other method that I can use to insert information into the text areas?
Thanks in advance!
Yes, the tinymce source element becomes inaccessible when the editor gets initialized. This is necessary because tinymce creates a new contenteditable iframe which is then used to edit text. The editor text gets writen back to the former textarea on several events.
You asked for a jQuery way to acces the tinymce editor content. This is possible.
The following example shows howto acces the editor body element, looks for a html element with class .js-description and resets its value.
var editor = tinymce.activeEditor || tinymce.get('my_editor_id') || tinymce.editors[0];
$(editor.getBody()).find(".js-description").val('new_val');
Ok, so the weirdest thing happened here.
I have a php file with Javascript to write onto elements based on events on the webpage.
And there are 3 html forms on the page. One is a searchbox, one has all inputs hidden and gets submitted on a certain event, and one is a textbox and a button on clicking which the javascript writes the text to a certain element in the page.
Also, this third form is itself written onto the document by the javascript on clicking another button.
The problem is, while doing certain operations with this third form, i need to reference one of its inputs values (newSkillName).
So for this third form, In Chrome-
document.forms[1].newSkillName.value
works,
while in Firefox-
document.forms[2].newSkillName.value
works.
I, however, managed to fix the code. But i'm still curious. Why did Chrome and Firefox process the abnormality differently?? Any idea?
Give the form elements unique ID attributes and reference them with document.getElementById(id).
You could also use the NAME attribute and reference the form by name document.forms["name_of_form"];
The quick workaround/copout fix is to hunt down the field in the DOM a diffferent way. For example, with id='NewSkillName' use document.getElementById('NewSkillName').value.
Okay this is quite complicated to explain but i'll try and keep it as short as possible. I'm making an 'app', part of the function of which is to pull XML based data from a file using PHP DOMDocument() and a loop to display each block of information in its own DIV. My aim is to allow the user to then click a 'close' button on any of these displayed div's and they will be hidden using jQuery similar to this:
$('input[name=foo]').live('change', function(){
if ( $(this).is(":checked")) {
$('.bar').hide(500);
}
I'm pretty certain I can get it up to this stage with no issues however, when the user saves at the end of this process I want to pass params back that relate to the boxes that have been hidden/removed using $_POST and then subsequently remove the corresponding items/nodes from the original xml document. Each item and each close button has a unique ID.
Any tips on how to achieve this would be much appreicated. thanks
just get the ids or names of the div that have hidden and send that as POST and then go to their parent element. suppose their parent node is referenced in $parent and the node u want to remove is referenced in $child. Now use $parent->removeChild($child)
or u can do this
get the node reference say $node
then use
$node->parentNode->removeChild($node);
One idea is that you can check whether the div is hidden or not like $(".bar").is(':hidden'); and then not include it in the XML you're sending back.
When one of the boxes is clicked, do a xmlhttprequest using the post method.
$.post() pasing the ID and state of the box.
I have a form that has a <textarea> that I would like to replace with a <div contenteditable="true". Is there an easy way to insert that content into my MySQL database with PHP?
I just implemented this, so I don't know what bugs there are right now, but it does work. I also know that it's pretty hacked together and there is probably a more elegant solution to doing this, but this one works.
I'm making a simple assumptions here: Your textarea contains html elements in it and doesn't mess up your database (using whatever method you like best)
Community Wiki'd because it's something that other people might have better ideas on.
First convert your textareas to divs, don't add extra space between the div and the content (it should be like this: <div id="content" contenteditable="true"><p>First paragraph...
Pick an id for each div that's going to now be contenteditable, on my site I've decided on the really simple content id, and I only have one div that's editable on each page that needs editing (you might need more. Each div needs it's own id).
Make a form, AFTER (or before, just don't put your div inside of the form, actually, that probably doesn't matter, but just to be safe), put a hidden textarea (display:none; visibility:none) with no content.
Add a hidden input field that contains a unique identifier for your database's reference to the current page.
Place a submit button OUTSIDE of the form. This is done because you're going to call a javascript function to put your div's content into the hidden textarea and submit the form after that.
Add an onclick attribute to the submit button, have it call the function to update (mine's upport because it updates my portfolio)
Make the function.
Create a new variable that contains the div's content (var nt = document.getElementById('contentId').innerHTML;)
Add that content to the hidden textarea (document.forms["formId"].nameOfTextarea.value += nt;)
Submit the form (document.forms["upport"].submit();)
Now make the form processor the way you normally would.
I have a form that has cloned form elements in it. The form submits to e-mail. The problem I am having is that when a user lets say changes their mind and removes a cloned form element block and submits the form, the cloned form element that they removed shows up in the email output. How can I get it so that removed element(s) do not show up in the e-mail output?
The form is here: http://www.pentco.com/test.php
I've duplicated and commented out the php code that's used to process the form at the beginning of the page source so that it remains visible when viewing the source and does not get compiled.
Any illumination is greatly appreciated.
That is because your javascript for Removing the item is only hiding the element - not removing it. This keeps all the form elements within the document and allows them to be submitted.
As Chris pointed out, you are .hide()-ing an element, when you really should .remove() it.