feb 11, 20206:17 AM - editado feb 11, 20206:22 AM
Participante
How to stop Redirect button , I want to perform Calculation
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);
feb 12, 202011:13 AM - editado feb 12, 202011:13 AM
Colaborador | Partner nivel Platinum
How to stop Redirect button , I want to perform Calculation
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
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)
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
How to stop Redirect button , I want to perform Calculation
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.
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
How to stop Redirect button , I want to perform Calculation
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
How to stop Redirect button , I want to perform Calculation
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
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
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);
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).