How to disable or hide a field on submissions edit mode

  • kimlyit
    Asked on March 24, 2016 at 4:08 AM

    Hi JotForm,

    I need to create a request form and the request needs an approval for the submitted form. I understand that we can add an edit link to achieve this. But i dont want the supervisor to change anything on the submitted report, and i just want them to approve or disapprove. Is there anyway to grayed out or disable the user filled in portion except the approval option? 

     

    Thanks 

  • Mike_G JotForm Support
    Replied on March 24, 2016 at 7:24 AM

    I have created a workaround for you. Kindly follow the instructions below to accomplish what you would like to happen. 

    You will be needing two additional widgets and one additional textbox field in your form. Those fields should not show on your form.

    Widget 1 - Get Form Page URL widget - this will help you determine the URL of the page so you will be able to know if the form is loaded through an edit link or not. This widget is automatically hidden on the form.

    Widget 2 - DateTime Single widget - since this widget is filled every time the form is being loaded, it will help you get the value of the Get Form Page URL widget to the additional field that you will also add to your form. You need to hide this widget on the form with the help of CSS codes injected in its Custom CSS tab.

    Textbox field - you need this to hold the value of the Get Form Page URL widget that will only be passed if the DateTime Single widget is filled during form load. You will learn how to create conditions for that later. This field is also set as hidden on the form. You will label this field "Current URL".

    How to disable or hide a field on submissions edit mode Image 1 Screenshot 70

    Once you have added those fields, you are ready to create the conditions. You will be using these three conditions in your form.

    How to disable or hide a field on submissions edit mode Image 2 Screenshot 81

    Note: Please be noted that when a form is loaded from an edit link, its URL starts with https://www.jotform.com/edit/. And that's the value that you need for the condition rules that you will be creating later.

    First Condition: If "DateTime" is filled, copy the value of the "Get Page URL widget" to the "Current URL" field.

    How to disable or hide a field on submissions edit mode Image 3 Screenshot 92

    Second Condition: If "Current URL" field has a value that starts with "https://www.jotform.com/edit/", disable all the fields that have or will have an input.

    Note: Enable / Require type of condition is used in this condition.

    How to disable or hide a field on submissions edit mode Image 4 Screenshot 103

     

    The next two conditions are optional because it was not mentioned in your requirements.

    Note: Show/Hide type of conditions is used in these conditions.

    Third Condition: If "Current URL" field doesn't start with "https://www.jotform.com/edit/", hide multiple fields, Approval and Submit button (without Clear Form button).

    How to disable or hide a field on submissions edit mode Image 5 Screenshot 114

    The condition above will hide the Approval field and the second submit button, so that it will not show on the form when it is being filled by your submitters.

    Then, the condition below, however, will hide the Submit button with Clear Form button, when the form is in edit mode. So that the one filling up the Approval field has no way of clearing the form.

    Fourth Condition: If "Current URL" field starts with "https://www.jotform.com/edit/", hide Submit button(with Clear Form button).

    How to disable or hide a field on submissions edit mode Image 6 Screenshot 125

    Once you've done that, you just need to hide the fields that are unnecessary to show on your form. These are the DateTime Single widget and the Current URL textbox field.

    You can try to hide the Current URL textbox field through its properties, however, that doesn't seem to work in edit mode. So I would suggest you add the CSS code below to your form instead.

    #id_32, #id_31, #id_30{

    display: none !important;

    }

    Also, here's a clone version of your form, https://form.jotform.com/60832057884967.

    I would suggest you clone the form to examine the conditions and the new fields added to it then, make tests submissions. 

    If you have questions or concerns about any of the instructions given above, please do not hesitate to get back to us. 

    Thank you.

  • Mike_G JotForm Support
    Replied on March 24, 2016 at 7:39 AM

    By the way, below is a sample of the clone version of your form in edit mode. Notice that you will not be able to edit the other form fields except the Approval Field. Also, notice that the Submit button with Clear Form is hidden. 

    https://www.jotform.com/edit/334624437590475610

  • kimlyit
    Replied on March 28, 2016 at 9:34 PM

    Thank you so much Mike ! This is just what i wanted. 

  • Elton Support Team Lead
    Replied on March 29, 2016 at 2:33 AM

    Glad my colleague's solution worked for you. Cheers!

  • kimlyit
    Replied on March 29, 2016 at 3:56 AM

    Hi Mr Elton,

     

    When i click the Edit_Submission option in the email it opens up in Jotform, is there any way for me to redirect the form to our website ? 

     

    Thanks !

     

  • Elton Support Team Lead
    Replied on March 29, 2016 at 4:53 AM

    That's possible when you use a custom domain name with your form URLs. Here's a guide: https://www.jotform.com/help/144-How-to-use-Custom-Domains-with-JotformPlease take note that this does not support HTTPS so you have to use HTTP on your edit URL.

    Let says http://http://www.kimlyit.com// is your website. Once you map custom.jotform2.comwith one of your sub-domain e.g. form.kimlyit.com as also explained in the guide, you can then construct your edit URL with your custom domain name and use it in your email notification.

    Example: http://form.kimlyit.com/edit/{id}

    {id} - This will be replaced with the actual submissions ID once it is sent on email.

    -----

    However, if you want the edit URL to be loaded into a frame or a section on your page, this is possible with PHP script. If you know a bit of PHP, the guide will be so much easy for you to implement.

    1. Embed the following iframe on your page.

    <iframe allowtransparency="true" src="https://form.jotform.com/edit/<?php echo $_GET['sID'] ?>" frameborder="0" style="width:100%; height:600px; border:none;" scrolling="no"> </iframe>

    2. Use the URL of the page where you have embedded tha above code then append this ?sID={id}

    Example:

    www.yourwebsite.com/myform.php?sID={id}

    Then add this URL on your email notification as your edit URL.

    Like on the first solution, the {id} will be replaced with the actual submissions ID once it is sent on email.

    Demo: https://shots.jotform.com/elton/get_submissions_ID.php?sID=335048321822617552

    If you need further help, do let us know.

  • prowrestlingtees
    Replied on May 16, 2016 at 6:01 PM

    Mike how can I accomplish this on my form.  I only want customers to edit shipping information

     

    https://form.jotform.com/61175259404152

  • David JotForm Support Manager
    Replied on May 16, 2016 at 11:16 PM

    @prowrestlingtees, your question will be addressed on the following thread: https://www.jotform.com/answers/840538