How to have a button to call a JavaScript function?

Mark42

Asked on November 24, 2016 at 1: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!

Kevin Support Team Lead

Replied on November 24, 2016 at 1: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.

Mark42

Replied on November 26, 2016 at 2: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

liyam

Replied on November 26, 2016 at 6: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.

Mark42

Replied on November 28, 2016 at 4: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:

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.onSubmissionDISABLEDerror="jumpToFirstError";

});

function jsFunction(){

alert("Hi");

}

</script>

.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>

Job Bidding

</h1>

</div>

</li>

Personal Information

</span>

</span>

</div>

</li>

Personnel Number

*

</span>

</label>

</div>

</li>

Name

*

</span>

</label>

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

</span>

</span>

</div>

</li>

E-mail

*

</span>

</label>

</div>

</li>

Hire Date

*

</span>

</label>

 -

</span>

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

</span>

 -

</span>

</span>

</span>

</span>

</div>

</li>

Current Position

*

</span>

</label>

</div>

</li>

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

</span>

</span>

</span>

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

</span>

</div>

</li>

</ul>

Bidder's Details

</span>

</span>

</div>

</li>

Bidder's Personnel Number

*

</span>

</label>

</div>

</li>

Bidder's Name

*

</span>

</label>

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

</span>

</span>

</div>

</li>

Bidder's E-mail

*

</span>

</label>

</div>

</li>

Bidder's Hire Date

*

</span>

</label>

 -

</span>

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

</span>

 -

</span>

</span>

</span>

</span>

</div>

</li>

Bidder's Current Position

*

</span>

</label>

</div>

</li>

</ul>

Job Classifications

</span>

</span>

</div>

</li>

Job Classification

*

</span>

</label>

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

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

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

</select>

</div>

</li>

Crew Preferrence

*

</span>

</label>

</select>

</div>

</li>

Priority

*

</span>

</label>

</select>

</div>

</li>

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

Should be Empty:

</li>-->

</ul>

</div>

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

</div>

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

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

</script>-->

</div>

Boris

Replied on November 28, 2016 at 5: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" onDISABLEDclick="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.

Mark42

Replied on November 28, 2016 at 2: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?

Welvin Support Team Lead

Replied on November 28, 2016 at 3: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.