MachForm Community Forums » MachForm 4

1. williamansley
   Member

   Is it possible to create a custom javascript file that will change the text in field labels on the form as the form loads. I want to change fields that are not editable in the GUI interface (the save and resume fields).

   Posted 8 years ago #
2. 

   yuniar

   This is actually a clever idea and I never thought of this before! It's a bit odd way to do it, but yeah it is possible.

   Simply create a custom javascript file, such as custom.js and load it into your form. Put this code below into your custom javascript file:

   $(function(){
   	$("#li_resume_checkbox label").text("Save my progress and resume later TEST");
   	$("#li_resume_email label").text("Enter Your Email Address TEST");
   	$("#guide_resume_email small").text("A special link will be sent to you TEST");
   	$("#li_resume_email").data("resumelabel","Save Form and Resume Later TEST");
   });

   adjust all the above text with your own preferred text. That should do it.

   ---

   MachForm Founder

   Posted 8 years ago #

3. williamansley
   Member

   I agree that it is an odd way to change a form, but it is a way to change that part of a Machform that can be deployed on a form by form basis. What you gave me works wonderfully well, as far as it goes, but it doesn't address changing the page that comes up after clicking the (formerly) "Save form and resume later" button. As far as I can see by looking at the source for that web page, the script is loaded for that page, but I can't figure out how to target tags only on that page. I have actually spent some time working on this myself, but haven't made any progress. I'd like to target the h2 and h3 tags on the "resume and save later" page.

   If this is possible and you can provide a solution for this, I would be one very, very happy customer (instead of just very happy).

   Posted 8 years ago #
4. 

   yuniar

   You can easily replace the h2 tag by adding this line of code:

   $("h2:contains('progress')").text('Your progress has been saved TEST');

   However, h3 tag is a bit more problematic. Replacing the text completely won't work, as it contains the unique resume link.
   If you simply want to add some text at the end of the h3 tag, you can add this code:

   $("h3:contains('mf_resume')").html($("h3:contains('mf_resume')").html() + 'additional TEXT here');

   ---

   MachForm Founder

   Posted 8 years ago #

5. williamansley
   Member

   Actually, I want to remove the resume link from the "resume page". For my purposes, I just want the link to be sent in the email. And I want the link to be available in the entry info view when viewing entry manager screen in the Admin interface. I assume that replacing the contents of the h3 tag on the "resume" page will not interfere with the "resume email" or the display of the link in the entry manager screen. Please let me know if replacing the contents of the h3 tag will cause any problems with the display of the resume link for this form in those other locations. Please let me know if I haven't been clear in my questions here.

   Posted 8 years ago #
6. 

   yuniar

   Ah... I see, in that case you can use similar code as h2.
   To summarize, your complete code should be like this:

   $(function(){
   	$("#li_resume_checkbox label").text("Save my progress and resume later TEST");
   	$("#li_resume_email label").text("Enter Your Email Address TEST");
   	$("#guide_resume_email small").text("A special link will be sent to you TEST");
   	$("#li_resume_email").data("resumelabel","Save Form and Resume Later TEST");
   
           $("h2:contains('progress')").text('Your progress has been saved TEST');
           $("h3:contains('mf_resume')").text('Your own custom text here');
   });

   It is safe to replace the content of h3 tag and it won't cause any issue with other places.

   ---

   MachForm Founder

   Posted 8 years ago #

7. williamansley
   Member

   Yuniar, thank you again for your time and input on this issue. Unfortunately, the two new lines you added don't work for me.:

   $("h2:contains('progress')").text('Your progress has been saved TEST');
   $("h3:contains('mf_resume')").text('Your own custom text here');

   From my Googling to try to figure out why, it seems to me that the ":contains" pseudo-selector is not actually in the CSS3 specification and must be implemented in a javascript library such as JQuery. Apparently, I don't have the proper library loaded, because the lines of code don't do anything if I include them. Actually, to limit the scope of the troubleshooting, I have just put in the first line and it doesn't cause anything to change.

   Posted 8 years ago #

8. williamansley
   Member

   Yuniar, perhaps what I wrote in my last update about why it isn't working was nonsense, but the fact remains that the code you gave me to rewrite the text in the "save and resume success page" does not work for me. Perhaps you could take another look at this issue and try to help me figure out why not? Thank you.

   Posted 8 years ago #

9. celsiusmarketing
   Member

   William, i believe since he using javascript you need to use document ready and wait for page to load before replacing text strings.

   Posted 8 years ago #

10. williamansley
    Member

    @celsiusmarketing: Thank you for trying to help, but the problem is that the first few lines of code Yuniar gave me work fine just as they are, but the final two have no effect at all on the "save and resume success page" that comes up after the "save" button is clicked. If more code is needed to make this work, then it will have to be given to me by someone else; I don't have the knowledge and, especially right now, the time to do any more with this myself.

    These lines work:

    $("#li_resume_checkbox label").text("Save my progress and resume later TEST");
    $("#li_resume_email label").text("Enter Your Email Address TEST");
    $("#guide_resume_email small").text("A special link will be sent to you TEST");
    $("#li_resume_email").data("resumelabel","Save Form and Resume Later TEST");

    These lines don't work:

    $("h2:contains('progress')").text('Your progress has been saved TEST');
    $("h3:contains('mf_resume')").text('Your own custom text here');

    Posted 8 years ago #
11. 

    yuniar

    I've been testing it again and I think I know the problem. All the code above are actually correct.
    However, on the resume page itself, apparently the main jQuery library is not being loaded on all cases (which is a bug).

    So to make it working 100%, we need to fix the underlying bug. You'll need to edit your "machform/includes/view-functions.php" file.
    Search around line 6630 for this code:

    $embed_class = '';

    exactly below that line, add this code:

    if(!empty($custom_script_js)){
    	$custom_script_js = '<script type="text/javascript" src="'.$jquery_url.'"></script>'."\n".$custom_script_js;
    }

    this should fix the bug and allow the code I've posted above to run on all conditions. This fix should be included into the next update.

    ---

    MachForm Founder

    Posted 8 years ago #

12. williamansley
    Member

    @yuniar: I just tested this and the bug fix you supplied works perfectly! I had a bit of trouble at first because I had an apostrophe in one of my replacement strings, which was breaking the code almost completely, but fortunately I realized what the problem was quickly and escaped it with a backslash. (Hurrah for syntax highlighting editors!)

    I have to say, the level of support you provide is amazing; by far the best I've seen from any software vendor I have dealt with. I almost hate to ask for even more help, but I will. Can code be added to the javascript file to make the "save and resume email" field required? Or, is there any other way to do this?

    Posted 8 years ago #

13. agdm619
    Member

    Works great! One question though. Can I add a return or new line to the code? I added a "\n" but it doesn't create that text on a new line. (see below)

    $("#li_resume_checkbox label").text("GPS Employee: Check the box to save your progress and resume later, or send to WSM.\n WSM: Check the box to send ticket back to GPS Supervisor.");

    And I agree with @williamansley - "Can code be added to the javascript file to make the "save and resume email" field required? Or, is there any other way to do this"

    Thanks for any help!
    Aaron

    Posted 8 years ago #
14. 

    yuniar

    The "save and resume email" will be set as required within our next update (v4.7). Hang on please.

    ---

    MachForm Founder

    Posted 8 years ago #

RSS feed for this topic

Reply

You must log in to post.