How to stop Redirect button , I want to perform Calculation

Highlighted
Occasional Contributor

I want to perform addition Of 2 input number on hs-button click using Hubspot Form  but instead of performing Calculation  It is displaying only inline thankyou message.

 

$("#value").click(function(){
 var num1=parseInt($("#num1").val());
 var num2=parseInt($("#num2").val());
var total=(num1+num2);
$("#output").val(total);

// }); 

 I wants to apply these Jquery

Reply
0 Upvotes
12 Replies 12
Highlighted
Community Manager

Hi @Mritunjay1     

 

could you please share the URL you are working on. This will help the experts I will tag so they will be able to advise you.    

 

Hey @Anton @prosa @DanielSanchez  could you please share your knowledge with @Mritunjay1 ?

Thank you

Sharon 

Reply
0 Upvotes
Highlighted
Occasional Contributor

This is my Preview Page which i am working :-

https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

 

<div class="span12 homepage-section8 align-center">
<div class="span12 wrapper">
<h3>
{{ module.add_heading_here }}
</h3>
{% form
form_to_use="{{ module.form_field.form_id }}"
response_response_type="{{ module.form_field.response_type }}"
response_message="{{ module.form_field.message }}"
response_redirect_id="{{ module.form_field.redirect_id }}"
response_redirect_url="{{module.form_field.redirect_url}}"
gotowebinar_webinar_key="{{ module.form_field.gotowebinar_webinar_key }}"
%}
<script charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/shell.js"></script>
<script>

hbspt.forms.create({
portalId: '4190743',
formId: 'ad9df900-050c-4c2d-911e-df9334a255d2',
onFormSubmit: function(){
// My SCRIPT HERE

var num1=parseInt($('input[name="n1st"]').val());
var num2=parseInt($('input[name="n2"]').val());
var num3=parseInt($('input[name="n3"]').val());
var total=(num1+num2*num3);
alert(total);
$('input[name="result"]').val(total);

}

});

</script>
</div>
</div>

 

When I am using this i am getting 2 form 1 because of :-(case1)

{% form
form_to_use="{{ module.form_field.form_id }}"
response_response_type="{{ module.form_field.response_type }}"
response_message="{{ module.form_field.message }}"
response_redirect_id="{{ module.form_field.redirect_id }}"
response_redirect_url="{{module.form_field.redirect_url}}"
gotowebinar_webinar_key="{{ module.form_field.gotowebinar_webinar_key }}"
%}

and along with other Hubspot form which is because of:-(Case2)

<script>

hbspt.forms.create({
portalId: '4190743',
formId: 'ad9df900-050c-4c2d-911e-df9334a255d2',
onFormSubmit: function(){
// My SCRIPT HERE

var num1=parseInt($('input[name="n1st"]').val());
var num2=parseInt($('input[name="n2"]').val());
var num3=parseInt($('input[name="n3"]').val());
var total=(num1+num2*num3);
alert(total);
$('input[name="result"]').val(total);

}

});

</script>

 

Problem:- When I am putting value in field of Case1 form and clicking on case2 Get value button then i am getting value in result of Case1 field.

 

Requirement:- When i click on Get Value button in case1 then only output should come without displaying inline thankyou message

Reply
0 Upvotes
Highlighted
Regular Contributor | Platinum Partner

Is there a reason you have 2 forms with the "same" inputs? I believe the reason it is doing your calculation on form (case1) when you hit get value on form 2(case2) is because form 2 is trying to submit, but since form1 isnt it gets to run your calculation (Id get rid of form1 (eg hubl called one) as you may need to use "onFormReady" later.

 

I think this is what you need: https://developers.hubspot.com/manipulating-forms-with-jquery

 

You need to trigger a change event to update your form I think.

so something like this:

 

 

// My SCRIPT HERE

var num1=parseInt($('input[name="n1st"]').val()).change();
var num2=parseInt($('input[name="n2"]').val()).change();
var num3=parseInt($('input[name="n3"]').val()).change();
var total=(num1+num2*num3);
alert(total);
$('input[name="result"]').val(total).change();

I hope that sets you on the right track.

 

 

Noah Armstrong | TSL Marketing
Senior Developer
6085 Marshalee Dr| Suite 100 | Elkridge, MD 21075
Contact Us

TSL Marketing
Highlighted
Occasional Contributor

I Appreciate your work and apologies for my Question

 

Here I have created One sample

https://codepen.io/MritunjayChaurasia/pen/VwLeZzp

and When i am implementing this in Hubspot inbuild form  I am getting only Inline Thankyou Message instead of getting Value.

If possible pls correct my Code,I am not able to get where i making mistake.

Reply
0 Upvotes
Regular Contributor | Platinum Partner

Just a quick question. Do you actually need this to be a hubspot form or are you just trying to do a calculation and return its value?

Noah Armstrong | TSL Marketing
Senior Developer
6085 Marshalee Dr| Suite 100 | Elkridge, MD 21075
Contact Us

TSL Marketing
Reply
0 Upvotes
Highlighted
Occasional Contributor

I want to perform Calculation using Hubspot form  by  taking input from the user through Hubspot form

Reply
0 Upvotes
Highlighted
Regular Contributor | Platinum Partner

Are you using your values for another purpose? It seems like you want to display the result on the frontend. Does your result value need to go to the contact propertiy values/backend?

 

If this were me I would setup a standalone "form" and do my calculation then if it needs to be submitted as a hubspot form input value I would populate that and send it with the submit.

 

For example you could 

<form>
<input type="number" id="num1" placeholder="enter First Number"/>
  <input type="number" id="num2" placeholder="enter second Number">
  <input type="number" id="num3" placeholder="enter third Number">
  <input type="number" readonly id="output">
<button id="submit">Submit</button>
</form>
<script>
(function($) {
$("#submit").submit(function(e){
    e.preventDefault();
    var num1=parseInt($("#num1").val());
    var num2=parseInt($("#num2").val());
    var num3=parseInt($("#num3").val());
    var total=(num1+num2*num3);
    $("#output").val(total);
    });
})( jQuery );
</script>

The above should work if you dont want to actually submit the form to hubspot.

If you need to use a Hubspot form something like this might be close:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-debug.js"></script>
<script type="text/javascript">
  hbspt.forms.create({
	portalId: "yourportalid",
	formId: "your-form-id",
  onFormReady: function() { 
    var num1=parseInt($("#num1").val().change());
    var num2=parseInt($("#num2").val().change());
    var num3=parseInt($("#num3").val().change());
    var total=(num1+num2*num3);
    $("#output").val(total).change();
   }
 });
</script>

The above (or a slight variation of it) should work to populate your values. But if you want to actually display them on the page after you submit the form you will need to do something else.

Noah Armstrong | TSL Marketing
Senior Developer
6085 Marshalee Dr| Suite 100 | Elkridge, MD 21075
Contact Us

TSL Marketing
Highlighted
Occasional Contributor

Thanks for your work

I am going through your second steps:-

 

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-debug.js"></script>
<script type="text/javascript">
  hbspt.forms.create({
	portalId: "yourportalid",
	formId: "your-form-id",
  onFormReady: function() { 
    var num1=parseInt($("#num1").val().change());
    var num2=parseInt($("#num2").val().change());
    var num3=parseInt($("#num3").val().change());
    var total=(num1+num2*num3);
    $("#output").val(total).change();
   }
 });
</script>

But This Does not giving Proper Solution  as i required. On submitting form I do not require Thanks for submitting the form. I only want Total value to be displayed in $("#output").val(total) box when submit button is clicked of Hubspot Form.

 

Q:- Does your result value need to go to the contact propertiy values/backend?

A:- Since I am using Hubspot inbuilt form then value must be go for storage

 

Reply
0 Upvotes
Highlighted
Regular Contributor | Platinum Partner

Alright. This is how I got this to "work."

<style>
  #message {
    display: none;
  }
</style>
<p id="message"></p>

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
	portalId: "portalid",
	formId: "formid",
    onFormSubmit: function($form) {
          var num1=parseInt($('input[name="number_1"]').change().val());
      
    var num2=parseInt($('input[name="number_2"]').change().val());
      
    var num3=parseInt($('input[name="number_3"]').change().val());
      
    var total=parseInt((num1+num2*num3));
      console.log(total);
      $('#message').text('The Total Numbers Are: '+total);
    },
    onFormSubmitted: function($form) {
      $('#message').show();
      $('.submitted-message').hide();
    }
});
</script>

A few things to note.

1. Under the "Style&Preview" tab in your form you will need to check the "Set as raw HTML form" option. For some reason my values were coming out as Nan if this isn't set.

2. This means you will need to style your form using CSS.

Hopefully that solves your issue.

Good luck.

Noah Armstrong | TSL Marketing
Senior Developer
6085 Marshalee Dr| Suite 100 | Elkridge, MD 21075
Contact Us

TSL Marketing
Reply
0 Upvotes
Highlighted
Occasional Contributor

Thanks for your Response 

I am very close to my solution when i am using below code :-

HTML+HUBL:-

<div class="form-container">


{% form
form_to_use="{{ module.form_field.form_id }}"
response_response_type="{{ module.form_field.response_type }}"
response_message="{{ module.form_field.message }}"
response_redirect_id="{{ module.form_field.redirect_id }}"
response_redirect_url="{{module.form_field.redirect_url}}"
gotowebinar_webinar_key="{{ module.form_field.gotowebinar_webinar_key }}"
%}

</div>

 

JS:-

 

$(document).ready(function () {

setInterval(function(){
$('.form-container form').submit(function() {
let num1=parseInt($('input[name="n1st"]').val());
let num2=parseInt($('input[name="n2"]').val());
let num3=parseInt($('input[name="n3"]').val());
let total=(num1+num2*num3);
alert(total);

console.log("result:-"+total);
return false;
});
}, 500);

});

 

Now I am getting Result in Alert Box as well as in Console but still not able to stop Redirecting to  inline thankyou Page(I don't want that page to come after submitting form).

Reply
0 Upvotes
Highlighted
Regular Contributor | Platinum Partner

What happens when you remove this code?

response_redirect_id="{{ module.form_field.redirect_id }}"
response_redirect_url="{{module.form_field.redirect_url}}"

Also on your form  (both page and form area) make sure that redirect to page is not selected.

Noah Armstrong | TSL Marketing
Senior Developer
6085 Marshalee Dr| Suite 100 | Elkridge, MD 21075
Contact Us

TSL Marketing
Highlighted
Regular Contributor | Platinum Partner

If it is a submit buttion you may need to go about it differently.

But if you are just using a .click() event you can do this.

$("#value").click(function(e){
e.preventDefault();
 var num1=parseInt($("#num1").val());
 var num2=parseInt($("#num2").val());
var total=(num1+num2);
$("#output").val(total);
//Something to finish you action here
// }); 

 

Noah Armstrong | TSL Marketing
Senior Developer
6085 Marshalee Dr| Suite 100 | Elkridge, MD 21075
Contact Us

TSL Marketing