Sorry to trouble you - seems like found the solution for my case (use validation rule that would allow any value in select list - please, suggest if there’s some more elegant solution). Should read WIKI more accurately and search the forum.
I’d like to ask for help with AJAX/eForm usage. It’s probably stupid question, so please be patient, ’cause I’m doing only first steps in AJAX/Javascript (never used it before) and, well, MODx.
My page contains one list from which we choose first option. Depending on the selected option and using AJAX, we populate second SELECT list with another set of options. The final selection of the city to be inserted into third field of the form.
Example: select COUNTRY from the first list (then second list is populated with cities), then select CITY from the second list. This selected CITY is displayed in the third field of the form. On pressing "submit" button, the whole form is submitted for further processing.
Everything seems to work smoothly until the form submission. After pressing send button, the form is actually not submitted, there’s no confirmation text from eForm and processing script receives nothing. Instead, the same page with the form is reloaded, some of the fields being already filled by previously selected values.
Here is an example code.
First, a document with form is created (I used "blank" template for it):
[!frontend_snippet!]
[!eForm? &formid=`newArticle` &tpl=`Form_TEST` &noemail!]
The "frontend_snippet" only adds mootools to the page:
<?php
//FRONTEND
$modx->regClientStartupScript("manager/media/script/mootools/mootools.js");
?>
Here’s the chunk "Form_TEST" which is used in eForm call (please, note that I used "blank" template for the document, so this chunk is in fact a complete page):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Form</title>
<script type="text/javascript" src="manager/media/script/mootools/mootools.js"></script>
<script type="text/javascript">
function SendProperties() {
var element = $('Property2_list');
var element2 = $('Property2');
//assuming that the backend snippet is located in document 182
new Ajax("[~182~]",{
postBody:$('newArticle').toQueryString(),
onSuccess: function(response){
// Remove existing options from the target
options_number = element.childNodes.length;
for(var count = 0; count < options_number; count++) {
element.removeChild(element.firstChild);
}
new_option = document.createElement("option");
new_option.appendChild(document.createTextNode(response));
new_option.value=response;
element.appendChild(new_option);
//element2.value=response;
}
}).request();
}
</script>
</head>
<body>
<form action="[~[*id*]~]" method="post" enctype="multipart/form-data" id="newArticle">
<input name="formid" value="newArticle" type="hidden">
<p>Property1:<br>
<select name="Property1" id="Property1" size="10" onChange="SendProperties();">
<option value="option1" selected="selected">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
<option value="option6">option6</option>
</select>
</p>
<p>Property2_list:<br>
<select name="Property2_list" id="Property2_list" size="10" value="" onChange="Property2.value=Property2_list.value;">
<option value="">Second list will be here</option>
</select>
</p>
<p>Property2:<br>
<input class="field" type="text" name="Property2" id="Property2" maxlength="60" value="" /></p>
<p><input type="submit" name="frmGo" value="Send review" /></p>
</form>
</body>
</html>
Then, backend snippet is created, which generates data to populate second list. In this test example it simply returns a string "Option_text". Here it is:
<?php
echo "Option_text";
?>
(I hope that I didn’t forget to include something while writing this message).
As a result when I select an option from first list on the page, the "Option_text" appears in the second list. After selecting this "Option_text" in the second list, the third field also displays "Option_text". But after submitting the form nothing happens - the data is not sent.
A couple of interesting notes.
1) After the form submission, the same form reloads with "Option_text" in the third field. If this form is submitted again without selecting anyhing, it will be successfully sent.
2) Also, if a string:
element2.value=response;
is uncommented in Javascript code, so that the third field is filled automatically as the second list is populated, and after that nothing is selected in the second list, the form will also be successfully sent.
Could you please suggest what mistakes I have made in this code and why the form couldn’t be submitted? As I have mentioned, I’m new to Javascript so I probably don’t see something obvious here.
Thank you for reading this long message.
