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 to have a button to call a JavaScript function?

    Asked by Mark42 on November 24, 2016 at 01:36 PM

    Hi,

    I don't want to use Submit button but would like to have a normal html button on click of which I want to call a javascript function. But when I am changing the input type of Submit to "button" then the form validation stops working. Plz help!



    This is a re-post of a comment on How to Inject Custom CSS Codes

    Javascript function
  • Profile Image
    JotForm Support

    Answered by Kevin_G on November 24, 2016 at 01:55 PM

    This will not be possible to do in the Form Builder since it will not allow you to enter the JavaScript code, to achieve this you will need to get the source code of your form and then apply the needed JavaScript code to prevent the submission to happen and call your function. 

    This guide will help you to get the source code of your form: How-to-get-the-Full-Source-Code-of-your-Form

    If you have any question, please let us know. 

  • Profile Image

    Answered by Mark42 on November 26, 2016 at 02:02 PM

    Thanks for your prompt response.

    I am a beginner and not able to restrict the form submission on button click. I was able to get into the source code but could not understand that where I should make the change. I am sharing the link to my form, could you please help me identify the place in source code where I need to make the change?

     

    https://form.jotform.me/63282627690462

  • Profile Image
    JotForm Support

    Answered by liyam on November 26, 2016 at 06:16 PM

    Hello Mark42,

    This may depend on how the code is set. Often, it is placed within the <head> and </head> tags. But for us to be able to properly understand how the function works and how it will work with the form, can you share with us the code that you are going to use?

    We'll look forward to your response.

    Thanks.

  • Profile Image

    Answered by Mark42 on November 28, 2016 at 04:23 AM

    Okay, I just want to alert a "Hi" on click of the submit button. But alert message will only pop up if there is no validation error. In my case validation is not working. Need your assistance here. Thanks!

    Source Code:

    <script src="./prototype.forms.js" type="text/javascript"></script>

    <script src="./jotform.forms.js" type="text/javascript"></script>

    <script type="text/javascript">

       JotForm.setConditions([{"action":[{"field":"7","visibility":"Show"}],"link":"Any","terms":[{"field":"6","operator":"equals","value":"Others"}],"type":"field"},{"action":[{"field":"36","visibility":"Show"}],"link":"Any","terms":[{"field":"7","operator":"equals","value":"Yes"}],"type":"field"}]);

       JotForm.init(function(){

          JotForm.calendarMonths = ["January","February","March","April","May","June","July","August","September","October","November","December"];

          JotForm.calendarDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];

          JotForm.calendarOther = {"today":"Today"};

          JotForm.setCalendar("39", false, {"days":{"monday":true,"tuesday":true,"wednesday":true,"thursday":true,"friday":true,"saturday":true,"sunday":true},"future":true,"past":true,"custom":false,"ranges":false,"start":"","end":""});

          JotForm.calendarMonths = ["January","February","March","April","May","June","July","August","September","October","November","December"];

          JotForm.calendarDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];

          JotForm.calendarOther = {"today":"Today"};

          JotForm.setCalendar("45", false, {"days":{"monday":true,"tuesday":true,"wednesday":true,"thursday":true,"friday":true,"saturday":true,"sunday":true},"future":true,"past":true,"custom":false,"ranges":false,"start":"","end":""});

        JotForm.clearFieldOnHide="disable";

        JotForm.onSubmissionError="jumpToFirstError";

       });

       function jsFunction(){

          alert("Hi");

        }

    </script>

    <link target="_blank" href="./formCss.css" rel="stylesheet" type="text/css" />

    <link type="text/css" rel="stylesheet" target="_blank" href="./nova.css" />

    <!--<link type="text/css" media="print" rel="stylesheet" target="_blank" href="https://cdn.jotfor.ms/css/printForm.css?3.3.15758" rel="nofollow" />-->

    <style type="text/css">

        .form-label-left{

            width:150px !important;

        }

        .form-line{

            padding-top:12px;

            padding-bottom:12px;

        }

        .form-label-right{

            width:150px !important;

        }

        .form-all{

            width:690px;

            color:Black !important;

            font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;

            font-size:14px;

        }

        .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{

            color: Black;

        }

     

    </style>

     

    <div class="jotform-form" name="form_63282627690462" id="63282627690462">

      <!--<input type="hidden" name="formID" value="63282627690462" />-->

      <div class="form-all">

        <ul class="form-section page-section">

          <li id="cid_1" class="form-input-wide" data-type="control_head">

            <div class="form-header-group">

              <div class="header-text httal htvam">

                <h1 id="header_1" class="form-header">

                  Job Bidding

                </h1>

              </div>

            </div>

          </li>

          <ul class="form-section" id="section_2">

            <li id="cid_2" class="form-input-wide" data-type="control_collapse">

              <div class="form-collapse-table" id="collapse_2">

                <span class="form-collapse-mid" id="collapse-text_2">

                  Personal Information

                </span>

                <span class="form-collapse-right form-collapse-right-show">

                  &nbsp;

                </span>

              </div>

            </li>

            <li class="form-line jf-required" data-type="control_textbox" id="id_37">

              <label class="form-label form-label-left form-label-auto" id="label_37" for="input_37">

                Personnel Number

                <span class="form-required">

                  *

                </span>

              </label>

              <div id="cid_37" class="form-input jf-required">

                <input type="text" class=" form-textbox validate[required, Numeric]" data-type="input-textbox" id="input_37" name="q37_personnelNumber" size="20" value="" />

              </div>

            </li>

            <li class="form-line jf-required" data-type="control_fullname" id="id_40">

              <label class="form-label form-label-left form-label-auto" id="label_40" for="input_40">

                Name

                <span class="form-required">

                  *

                </span>

              </label>

              <div id="cid_40" class="form-input jf-required">

                <span class="form-sub-label-container" style="vertical-align: top;">

                  <input class="form-textbox validate[required]" type="text" size="10" name="q40_name40[first]" id="first_40" />

                  <label class="form-sub-label" for="first_40" id="sublabel_first" style="min-height: 13px;"> First Name </label>

                </span>

                <span class="form-sub-label-container" style="vertical-align: top;">

                  <input class="form-textbox validate[required]" type="text" size="15" name="q40_name40[last]" id="last_40" />

                  <label class="form-sub-label" for="last_40" id="sublabel_last" style="min-height: 13px;"> Last Name </label>

                </span>

              </div>

            </li>

            <li class="form-line jf-required" data-type="control_email" id="id_38">

              <label class="form-label form-label-left form-label-auto" id="label_38" for="input_38">

                E-mail

                <span class="form-required">

                  *

                </span>

              </label>

              <div id="cid_38" class="form-input jf-required">

                <input type="email" class=" form-textbox validate[required, Email]" id="input_38" name="q38_email" size="30" value="" />

              </div>

            </li>

            <li class="form-line jf-required" data-type="control_datetime" id="id_39">

              <label class="form-label form-label-left form-label-auto" id="label_39" for="input_39">

                Hire Date

                <span class="form-required">

                  *

                </span>

              </label>

              <div id="cid_39" class="form-input jf-required">

                <span class="form-sub-label-container" style="vertical-align: top;">

                  <input class="form-textbox validate[required, limitDate]" id="month_39" name="q39_hireDate[month]" type="tel" size="2" data-maxlength="2" value="" />

                  <span class="date-separate">

                    &nbsp;-

                  </span>

                  <label class="form-sub-label" for="month_39" id="sublabel_month" style="min-height: 13px;"> Month </label>

                </span>

                <span class="form-sub-label-container" style="vertical-align: top;">

                  <input class="form-textbox validate[required, limitDate]" id="day_39" name="q39_hireDate[day]" type="tel" size="2" data-maxlength="2" value="" />

                  <span class="date-separate">

                    &nbsp;-

                  </span>

                  <label class="form-sub-label" for="day_39" id="sublabel_day" style="min-height: 13px;"> Day </label>

                </span>

                <span class="form-sub-label-container" style="vertical-align: top;">

                  <input class="form-textbox validate[required, limitDate]" id="year_39" name="q39_hireDate[year]" type="tel" size="4" data-maxlength="4" value="" />

                  <label class="form-sub-label" for="year_39" id="sublabel_year" style="min-height: 13px;"> Year </label>

                </span>

                <span class="form-sub-label-container" style="vertical-align: top;">

                  <img class="showAutoCalendar" alt="Pick a Date" id="input_39_pick" src="https://cdn.jotfor.ms/images/calendar.png" style="vertical-align:middle;" />

                  <label class="form-sub-label" for="input_39_pick" style="min-height: 13px;">  </label>

                </span>

              </div>

            </li>

            <li class="form-line jf-required" data-type="control_textbox" id="id_41">

              <label class="form-label form-label-left form-label-auto" id="label_41" for="input_41">

                Current Position

                <span class="form-required">

                  *

                </span>

              </label>

              <div id="cid_41" class="form-input jf-required">

                <input type="text" class=" form-textbox validate[required]" data-type="input-textbox" id="input_41" name="q41_currentPosition" size="20" value="" />

              </div>

            </li>

            <li class="form-line" data-type="control_radio" id="id_6">

              <label class="form-label form-label-left form-label-auto" id="label_6" for="input_6"> Application Type </label>

              <div id="cid_6" class="form-input jf-required">

                <div class="form-single-column">

                  <span class="form-radio-item" style="clear:left;">

                    <span class="dragger-item">

                    </span>

                    <input type="radio" class="form-radio" id="input_6_0" name="q6_applicationType" value="Self" />

                    <label id="label_input_6_0" for="input_6_0"> Self </label>

                  </span>

                  <span class="form-radio-item" style="clear:left;">

                    <span class="dragger-item">

                    </span>

                    <input type="radio" class="form-radio" id="input_6_1" name="q6_applicationType" value="Others" />

                    <label id="label_input_6_1" for="input_6_1"> Others </label>

                  </span>

                </div>

              </div>

            </li>

          </ul>

          <ul class="form-section" id="section_8">

            <li id="cid_8" class="form-input-wide" data-type="control_collapse">

              <div class="form-collapse-table" id="collapse_8">

                <span class="form-collapse-mid" id="collapse-text_8">

                  Bidder's Details

                </span>

                <span class="form-collapse-right form-collapse-right-show">

                  &nbsp;

                </span>

              </div>

            </li>

            <li class="form-line jf-required" data-type="control_textbox" id="id_42">

              <label class="form-label form-label-left form-label-auto" id="label_42" for="input_42">

                Bidder's Personnel Number

                <span class="form-required">

                  *

                </span>

              </label>

              <div id="cid_42" class="form-input jf-required">

                <input type="text" class=" form-textbox validate[required, Numeric]" data-type="input-textbox" id="input_42" name="q42_biddersPersonnel" size="20" value="" />

              </div>

            </li>

            <li class="form-line jf-required" data-type="control_fullname" id="id_43">

              <label class="form-label form-label-left form-label-auto" id="label_43" for="input_43">

                Bidder's Name

                <span class="form-required">

                  *

                </span>

              </label>

              <div id="cid_43" class="form-input jf-required">

                <span class="form-sub-label-container" style="vertical-align: top;">

                  <input class="form-textbox validate[required]" type="text" size="10" name="q43_biddersName[first]" id="first_43" />

                  <label class="form-sub-label" for="first_43" id="sublabel_first" style="min-height: 13px;"> First Name </label>

                </span>

                <span class="form-sub-label-container" style="vertical-align: top;">

                  <input class="form-textbox validate[required]" type="text" size="15" name="q43_biddersName[last]" id="last_43" />

                  <label class="form-sub-label" for="last_43" id="sublabel_last" style="min-height: 13px;"> Last Name </label>

                </span>

              </div>

            </li>

            <li class="form-line jf-required" data-type="control_email" id="id_44">

              <label class="form-label form-label-left form-label-auto" id="label_44" for="input_44">

                Bidder's E-mail

                <span class="form-required">

                  *

                </span>

              </label>

              <div id="cid_44" class="form-input jf-required">

                <input type="email" class=" form-textbox validate[required, Email]" id="input_44" name="q44_biddersEmail" size="30" value="" />

              </div>

            </li>

            <li class="form-line jf-required" data-type="control_datetime" id="id_45">

              <label class="form-label form-label-left form-label-auto" id="label_45" for="input_45">

                Bidder's Hire Date

                <span class="form-required">

                  *

                </span>

              </label>

              <div id="cid_45" class="form-input jf-required">

                <span class="form-sub-label-container" style="vertical-align: top;">

                  <input class="form-textbox validate[required, limitDate]" id="month_45" name="q45_biddersHire[month]" type="tel" size="2" data-maxlength="2" value="" />

                  <span class="date-separate">

                    &nbsp;-

                  </span>

                  <label class="form-sub-label" for="month_45" id="sublabel_month" style="min-height: 13px;"> Month </label>

                </span>

                <span class="form-sub-label-container" style="vertical-align: top;">

                  <input class="form-textbox validate[required, limitDate]" id="day_45" name="q45_biddersHire[day]" type="tel" size="2" data-maxlength="2" value="" />

                  <span class="date-separate">

                    &nbsp;-

                  </span>

                  <label class="form-sub-label" for="day_45" id="sublabel_day" style="min-height: 13px;"> Day </label>

                </span>

                <span class="form-sub-label-container" style="vertical-align: top;">

                  <input class="form-textbox validate[required, limitDate]" id="year_45" name="q45_biddersHire[year]" type="tel" size="4" data-maxlength="4" value="" />

                  <label class="form-sub-label" for="year_45" id="sublabel_year" style="min-height: 13px;"> Year </label>

                </span>

                <span class="form-sub-label-container" style="vertical-align: top;">

                  <img class="showAutoCalendar" alt="Pick a Date" id="input_45_pick" src="https://cdn.jotfor.ms/images/calendar.png" style="vertical-align:middle;" />

                  <label class="form-sub-label" for="input_45_pick" style="min-height: 13px;">  </label>

                </span>

              </div>

            </li>

            <li class="form-line jf-required" data-type="control_textbox" id="id_46">

              <label class="form-label form-label-left form-label-auto" id="label_46" for="input_46">

                Bidder's Current Position

                <span class="form-required">

                  *

                </span>

              </label>

              <div id="cid_46" class="form-input jf-required">

                <input type="text" class=" form-textbox validate[required]" data-type="input-textbox" id="input_46" name="q46_biddersCurrent" size="20" value="" />

              </div>

            </li>

          </ul>

          <ul class="form-section" id="section_16">

            <li id="cid_16" class="form-input-wide" data-type="control_collapse">

              <div class="form-collapse-table" id="collapse_16">

                <span class="form-collapse-mid" id="collapse-text_16">

                  Job Classifications

                </span>

                <span class="form-collapse-right form-collapse-right-show">

                  &nbsp;

                </span>

              </div>

            </li>

            <li class="form-line jf-required" data-type="control_dropdown" id="id_47">

              <label class="form-label form-label-left form-label-auto" id="label_47" for="input_47">

                Job Classification

                <span class="form-required">

                  *

                </span>

              </label>

              <div id="cid_47" class="form-input jf-required">

                <select class="form-dropdown validate[required]" style="width:150px;" id="input_47" name="q47_jobClassification">

                  <option value="">  </option>

                  <option value="Classification 1"> Classification 1 </option>

                  <option value="Classification 2"> Classification 2 </option>

                  <option value="Classification 3"> Classification 3 </option>

                </select>

              </div>

            </li>

            <li class="form-line jf-required" data-type="control_dropdown" id="id_48">

              <label class="form-label form-label-left form-label-auto" id="label_48" for="input_48">

                Crew Preferrence

                <span class="form-required">

                  *

                </span>

              </label>

              <div id="cid_48" class="form-input jf-required">

                <select class="form-dropdown validate[required]" style="width:150px;" id="input_48" name="q48_crewPreferrence">

                  <option value="">  </option>

                  <option value="Crew 1"> Crew 1 </option>

                  <option value="Crew 2"> Crew 2 </option>

                  <option value="Crew 3"> Crew 3 </option>

                </select>

              </div>

            </li>

            <li class="form-line jf-required" data-type="control_dropdown" id="id_49">

              <label class="form-label form-label-left form-label-auto" id="label_49" for="input_49">

                Priority

                <span class="form-required">

                  *

                </span>

              </label>

              <div id="cid_49" class="form-input jf-required">

                <select class="form-dropdown validate[required]" style="width:150px;" id="input_49" name="q49_priority">

                  <option value="">  </option>

                  <option value="1"> 1 </option>

                  <option value="2"> 2 </option>

                  <option value="3"> 3 </option>

                </select>

              </div>

            </li>

            <!--<li style="display:none">

              Should be Empty:

              <input type="text" name="website" value="" />

            </li>-->

          </ul>

      </div>

      <div id="cid_50" class="form-input-wide">

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

            <button id="input_50" type="submit" onclick="jsFunction();" class="form-submit-button form-submit-button-cool_grey">Apply</button>

        </div>

      </div>

      <!--<input type="hidden" id="simple_spc" name="simple_spc" value="63282627690462" />

      <script type="text/javascript">

      document.getElementById("si" + "mple" + "_spc").value = "63282627690462-63282627690462";

      </script>-->

    </div>

  • Profile Image
    JotForm Support

    Answered by Boris on November 28, 2016 at 05:02 AM

    I noticed that your source code is using <DIV> instead of <FORM> element for containing the form. May I ask why you are not using the recommended <FORM> HTML element for your form?

    I also do not see your custom JavaScript function within the source code you have provided, so we cannot check this in greater detail for you.

    The simplest way to have your form pop up an alert box when the submit button is pressed, would be to add it in the onclick property of the Submit button:

    <button id="input_50" type="submit" class="form-submit-button form-submit-button-cool_grey" onclick="alert('hello')"> Submit </button>

    This would be executed regardless of form validation, and would result in the following behavior:

    Please try it out, and let us know should you need further assistance.

  • Profile Image

    Answered by Mark42 on November 28, 2016 at 02:03 PM

    I replaced the form tag with div because form tag is not allowed in SharePoint Content Editor WebPart.

    What I want to achieve is that I want to call a javascript function (an AJAX call to SharePoint REST) on button click but on the same time I want to ensure that the function would only be called if there is no validation error. I tested the above code and I am able to invoke the function (i.e an alert) but I have lost the validation feature. Could you please help me fix the validation feature?

  • Profile Image
    JotForm Support

    Answered by Welvin on November 28, 2016 at 03:13 PM

    I've searched for it, I think SharePoint allows you add the form. In fact, we have this guide for SharePoint websites:

    https://www.jotform.com/help/152-Adding-a-form-to-SharePoint 

    And also, here's an article from SharePoint about form elements:

    "The Content Editor Web Part does not accept the HTML FORM element. If you need to add a Web Part that uses the FORM element, consider using the Page Viewer Web Part or the Form Web Part."

    https://support.office.com/en-us/article/Content-Editor-Web-Part-c1350ff6-934c-4c2e-8e53-1ec3b548a0dc

    Please try this method and I think that would resolve the validation issue. I think that is not working because the form tag is replaced with div tag.