jQuery Quick Fix for Expressionengine SAEF
Posted by Jon on September 13th, 2011

In Expressionengine 2.0+, stand alone entry forms (saef) are practically deprecated because of the introduction of the new safecracker entry forms.  While the new safecreacker forms are much better as a whole…there is still a need to use them in a stand alone form.  For instance, in the backend of EE, there is really no way to create your own custom field for a form.  What if I want a select box that only lists the members who have glasses? Obviously, this isn’t a real world example, but there’s still no real way to do that in EE.  So we must resort to stand alone forms that we create for the frontend of the site.

If you’ve ever tried to use a saef, you’d know that the javascript portions of the form break outside of the backend. So to remedy this ridiculous problem, I’ve written some custom jQuery to do the trick.  In order to use this, you will have to include the jquery script in the header like so:

<code>{exp:jquery:script_tag}</code>

  1. <script type="text/javascript">
  2. // <![CDATA[
  3. $(document).ready( function() {
  4.  
  5. //URL Title js
  6. $("input#title").keyup( function() {
  7. var titleText = $("input#title").val().replace(/ /g,"_").toLowerCase();
  8. $("input#url_title").val(titleText);
  9. });
  10.  
  11. //Safecracker File js
  12. $(".safecracker_file_undo_button").css("display", "none");
  13. $(".safecracker_file_remove_button").click( function() {
  14. $(".safecracker_file_input input").removeAttr("disabled");
  15. $(".safecracker_file_thumb").hide();
  16. $(".safecracker_file_undo_button").show();
  17. $(".safecracker_file_remove_button").hide();
  18. var value = $(".safecracker_file_hidden input").val();
  19. $(".safecracker_file_placeholder_input input").val(value);
  20. $(".safecracker_file_hidden input").val("NULL");
  21. return false;
  22. });
  23. $(".safecracker_file_undo_button").click( function() {
  24. $(".safecracker_file_input input").attr("disabled","disabled");
  25. $(".safecracker_file_thumb").show();
  26. $(".safecracker_file_undo_button").hide();
  27. $(".safecracker_file_remove_button").show();
  28. var value2 = $(".safecracker_file_placeholder_input input").val();
  29. $(".safecracker_file_hidden input").val(value2);
  30. $(".safecracker_file_placeholder_input input").val("NULL");
  31. ;return false;
  32. });
  33. });
  34. // ]]>
  35. </script>

I’ve also included the jQuery code necessary to update the url_title field dynamically when the user inputs data into the title field.  Be sure to include the url_title field in your form though.

Leave Your Response

* Name, Email, Comment are Required