What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I reset part of the form (RESOLVED)

    Asked by AA_C on August 31, 2013 at 01:14 PM

    Hi,

    We have people submitting forms for an event. They may want to submit 3 or 4 at a time. most of the form information remains unchanged but particular event information changes, i.e., event date, people judging event, number of each event. It would be helpful if I had a button to reset only some fields. How can I do this?

     

    thanks,

    Bob

  • Profile Image

    Answered by jedcadorna on August 31, 2013 at 01:57 PM

    Hi, 

    I think it is possible to put s reset button for a specific field that you want to erase. What you can do is to get the source code of your form.

    1. Get source code and download it.

    2. Get the ID of which field you want to reset.

    3. Open the html source code that you have downloaded.

    4. Modify the code and insert this.

    <input type="text" value="" id="#first_6"> 

    <button id="reset">reset</button>

    <script type="text/javascript">

        document.getElementById('reset').onclick= function() {

            var field= document.getElementById('#first_6');

            field.value= field.defaultValue;

        };

    </script>

     It should look something like this.

    reset

     

    Hope this helps.

     

    Thanks,

    Jed

  • Profile Image

    Answered by AA_C on September 01, 2013 at 10:31 AM

    Hi Jed,

    Thanks this should work.

    Thanks,

    Bob

  • Profile Image

    Answered by AA_C on September 01, 2013 at 11:55 AM

    Hi Jed

     

    I tried the code and it is not working for me. Perhaps more info would help. I have 36 fielsds to reset.

    there 3 fields with dates each wrapped in a <div>. I my first attempt I tried to reset the dates to default, no date displayed. Like so;

    <script type="text/javascript">

    $('button.reset').click( function(){

    var field = document.getElementById('day_32','month_32','year_32');

    field.value= field.defaultValue; });

    </script>

    This did not work and the form indicated all the required fields that were empty? Then I tried to reset the date using the <div id="cid_32">

      var field = document.getElementById('cid_32');

    This also did not work? I'm sure the fix is a simple one, if I knew what to do.
     
    I can post the forms UL to view if that would help????????
    I'm sure it is a simple fix if I knew what I was doing. 
  • Profile Image
    JotForm Support

    Answered by jonathan on September 01, 2013 at 01:20 PM

    Hi Bob,

    There is a disadvantage when using the form's source code -- that is, everytime you Edit/Update the form in the form builder, you will also need to update the embedded source code of the form.

    Can you please share to us the URL of the website where you have embedded the form using its source code? We need this info to be able to check the form.

    ---

    If I may suggest, how about if you use 2 forms instead.

    Just like to your multi-page form http://www.jotform.com/32395425708863 , you can use 2 forms instead.

    Similar idea to this form http://jotformpro.com/form/31427061944957 

    My idea is, you 1st capture the basic details like names, numbers in the 1st form. And upon submission, transfer the basic info into the 2nd form, where the user can then fill the other detail info needed.

    This can will ensure that you always get the initial basic info on the 1st form. And complete detailed info on the 2nd form.

    Thanks.

  • Profile Image

    Answered by AA_C on September 01, 2013 at 02:45 PM

    Hi,

    Thanks...

    Yes I do realize when I make a change I then need to update my embedded code for every change. 

    The idea of multi forms may help, I will look into this.

    The form is actually in 3 sections, The "CONDITIONS", the "APPLICANTS" , who must agree to the conditions before they can move on and the "FORM". The form has sections also. Some sections after being filled do not require changes other sections like; Start Date, End Date and Close Date change and the last section, "RUNS JUDGES" requires all fields to be reset. I used a matrix here and adjusted field sizes to fit input required. Perhaps this is the wrong use for a matrix but it appears to fix my needs. I would like to have the RUN fields have max values limit(20), numeric validation, number of character limit(2)....this is not a big issue but a nice to do.... for later.

    Here is the URL for the test form;

    Any values are acceptable for President and Secretary name and number for testing.

    http://www.aac.ca/en/forms/TrialApp/Form010913-001.aspx

     

    thanks,

    Bob

  • Profile Image
    JotForm Support

    Answered by jonathan on September 01, 2013 at 03:43 PM

    Hi,

    You can use the inspect element tool of the browser to know the input id# of the particluar field.

    For example, in your form the input Day for Start Date is "day_32"... for End Date it is "day_33"

     


    This part of your code is wrong also

    var field = document.getElementById('day_32','month_32','year_32');

     

    it should be assign for each element ID.. like this

    var field1 = document.getElementById("day_32");

    var field2 = document.getElementById("month_32");

    var field3 = document.getElementById("year_32");

     

    Inform us if you need further assistance.

    Thanks.

  • Profile Image

    Answered by AA_C on September 01, 2013 at 06:06 PM

    Hi,

    So as indicated I will have var field1 through 36 for all the 36 fields I need to reset...

    OK! Here goes!

    Thanks,

    Bob

  • Profile Image
    JotForm Support

    Answered by jonathan on September 01, 2013 at 06:10 PM

    Hi Bob,

    That might be too impractical for 36 fields... can you tell us which fields are these?

    You can shorten the code if by doing a loop or if the are of the same type.

    Tell us which 36 fields are you trying to apply the reset code, and we will see how we can help.

    Thanks.

  • Profile Image

    Answered by AA_C on September 01, 2013 at 07:59 PM

    Hi Jonathan,

    List of field that require reset;

    Start Datd, 3 fields

    End Date, 3 fields

    Close Date, 3 fields

    Under Runs and Judges, all fields in each matrix.

    For Starters id="id_98" 8 fields (Runs / Judges)

    For Advanced id="id_99" 8 fields

    For Masters id="ïd_100" 10 fields

    For Games id="id_101" 4 fields

    I noticed that when using a matrix that the input fields do not have an ID. I can only identify them by their form name, I could add ID="" to each field if that helps or perhaps this won't work???

    Hope this helps...

    Thanks,

    Bob

  • Profile Image
    JotForm Support

    Answered by jonathan on September 01, 2013 at 08:35 PM

    For the matrix field, since it does not have ID#, we can use the

    document.GetElementByName(fieldname)

     

    I will create a demo form that does the reset on this form.
    I will get back to you later when I have done it.

    Thanks.

  • Profile Image

    Answered by AA_C on September 01, 2013 at 10:46 PM

    Hi,

    OK great... I must tell you that I tried the code above for hours with no success. The "Event Reset" button keeps resetting the complete form, not just the 3 date fields, here is what I had;

    <li id="event" class="form-line">

    <div id="event_01" class="form-input">

    <div class="form-buttons-wrapper" style="margin-left: 170px">

    <button id="event_rest_1"  class="form-submit-reset form-submit-button-black_glass" >Reset Event</button>

    <script type="text/javascript">

    document.getElementById('event_rest_1').onclick= function()

    {

       var field1 = document.getElementById("day_32");

       var field2 = document.getElementById("month_32");

       var field3 = document.getElementById("year_32");                                 

        field.value = field.defaultValue;                               

    };            

    </script>

    </div>

    </div>

    </li>

     I even tried the code as Jed gave as an example , exactly and all the other fields reset but not <id="#first_6">, that one did not reset? 

    Although I have used javascript for a number of webpages and adobe forms, I am not programmer so the more info the better...please!

    Thanks,

    Bob

     

  • Profile Image
    JotForm Support

    Answered by Welvin on September 02, 2013 at 05:29 AM

    Hi Bob,

    I'll get back to you for the correct codes for resetting input in date fields. I'm on it but using the specific ID's of the date, month and year. It would be good to use just the whole ID of each field. 

    Thanks for waiting.

  • Profile Image

    Answered by jedcadorna on September 02, 2013 at 06:09 AM

    Hi Bob,

    Sorry for the late reply can you try this sample that I made for resetting just the certain fields.

    field

    So basically the example will just reset the 2 fields which is "First Name" and "Last Name" if you want to add other fields just add this  var b = document.getElementById("field2").value= "";  just change the "b" to whatever variable name you want to call it and the "field2" to whatever the field name you want to add. Here is the sample that I made on my server http://112.204.185.169/jotform/challenge.htm

     

    Here is the Demo script that I made:

     

     

     

    </span>Demo Page<span style="color:#3366ff;" _mce_style="color: #3366ff;">

     

     

    id="frm1">

    First name: type="text" name="fname" id="field">

    Last name:   type="text" name="lname" id="field2">

    Email:       type="text" name="email" id="field3">

    Address:     type="text" name="address" id="field4">

    Phone Number: type="text" name="phone" id="field5">

    type="button" onclick="fieldReset()" value="Reset form">

     

     

     

     

     

    Let us know if this works.

    Thanks,

    Jed

  • Profile Image

    Answered by AA_C on September 02, 2013 at 12:45 PM

    Hi, 

    OK... You are very patient with me, thanks!

    I can now reset the date fields...But trying to reset the matrix fields is a challenge.

    I tried using getElementByName but that fails... I tried adding an ID# to each input and using getElementById but that failed... So I need more help...

    Thanks for the code... I'm getting closer here is what I have now:

    <script type="text/javascript">

        function fieldReset(){   

    // this first section works fine for the dates

      var startd = document.getElementById("day_32").value= "";

    var startm = document.getElementById("month_32").value= "";

    var starty = document.getElementById("year_32").value= "";

    var endd = document.getElementById("day_33").value= "";

    var endm = document.getElementById("month_33").value= "";

    var endy = document.getElementById("year_33").value= "";

    var closed = document.getElementById("day_34").value= "";

    var closem = document.getElementById("month_34").value= "";

    var closey = document.getElementById("year_34").value= ""; 

    // from here down nothing happens

    var ss = document.getElementsByName("q98_starters98[0][]";

    var sj = document.getElementsByName("q98_starters98[1][]";

    var sg = document.getElementsByName("q98_starters98[2][]";

    var sk = document.getElementsByName("q98_starters98[4][]";

    var ss = document.getElementById("q98_starters98_0").value= ""; // added id# for this

      }

    </script>

    here is the link to the new test form;

    www.aac.ca/en/forms/TrialApp/Form020913-005.aspx

     

    Thanks,

    Bob

  • Profile Image

    Answered by jedcadorna on September 02, 2013 at 12:53 PM

    Hi,

    Thanks for you response me and my team will try to work on this to provide you a solution. I'll get back to you once I have found where the problem is. 

    Thank you for your patience.

  • Profile Image

    Answered by AA_C on September 02, 2013 at 06:06 PM

    Hi,

    I got it.... 

    I had to add an ID# tage to each input field of the matrix and use getElementById

    like so;

    var ssr = document.getElementById("ssr").value= '';

    var ssj = document.getElementById("ssj").value= ''; // 30 fields

     

    Works great!!!

    Thanks All!!

    Bob

  • Profile Image

    Answered by jedcadorna on September 02, 2013 at 06:11 PM

    That's nice to hear, we do thank you for your patience on this issue. Just feel free to submit a ticket if you have any other questions about your form.

    Thanks,

  • Profile Image

    Answered by cheekyface on August 18, 2015 at 06:36 AM

    Any chance that there is a possibility by now to reset just the fields in between page breaks?  If not can we have this as a feature request.  Would be great for really long forms.
  • Profile Image
    JotForm Support

    Answered by Chriistian on August 18, 2015 at 10:34 AM

    Hi @cheekyface,

     

    I have moved your concern to a separate thread since this is an old thread and so we can better assist you. You can check it here. We will attend to it as soon as possible.

     

    Do let us know if you need further assistance.


    Regards.