Whenever my form is submitted nothing happens and when I check my array on
the console it remains empty. In order to target values of input I need to put it in a function I also use return in function but nothing happens. Actually I want user data collected in object and push into array whenever I click on submit button...
var labelsarray = document.getElementsByTagName("label");
var inputsarray = document.getElementsByTagName("input");
var array = [];
function subm() {
var users = {
FirstName: inputsarray[0].value,
LastName: inputsarray[1].value,
UserName: inputsarray[2].value,
Password: inputsarray[3].value,
DateofBirth: inputsarray[4].value,
Age: inputsarray[5].value,
Gender: inputsarray[6, 7].checked,
Purpose: inputsarray[8, 9, 10].checked
};
array.push(users);
}
<div>
<center>
<form method="post" onsubmit="subm();">
<label for="fname">First Name:</label>
<input type="text" id="fname" />
<br/>
<label for="lname">Last Name:</label>
<input type="text" id="lname" />
<br/>
<label for="uname">User Name:</label>
<input type="text" id="uname" />
<br/>
<label for="pass">Password:</label>
<input type="text" id="pass" />
<br/>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" />
<br/>
<label>Age:</label>
<input type="text" id="age" />
<br/>
<span>Gender:</span>
<input type="radio" name="gender" id="male" />
<label for="male">Male</label>
<input type="radio" name="gender" id="female" />
<label for="female">Female</label>
<br/>
<p>For what purpose(s) you are making account?</p>
<input type="checkbox" id="app" name="purpose" value="storingapps" />
<label for="app">Storing Apps</label>
<input type="checkbox" id="site" name="purpose" value="storingsites" />
<label for="site">Storing Sites</label>
<input type="checkbox" id="fun" name="purpose" value="fun" />
<label for="fun">Fun</label>
<br/>
<input type="submit" value="Submit" class="button" />
</form>
</center>
</div>
When you push the submit button, you start the form submission process.
First the onsubmit function runs. This modifies your array.
Then the form submits and loads a new page.
This is (presumably) the same page that the user is already looking at. It's a fresh copy of it though, so it doesn't contain the array from the old version of it.
You can return false; at the end of the onsubmit function to prevent form submission.
Modern code would use addEventListener (introduced about two decades ago) and call the preventDefault method of the event object.
document.querySelector("form").addEventListener("submit", subm);
function subm(event) {
event.preventDefault();
// etc
}
Related
I have a form where the user can fill out for any enquiries related to the product. I want to get the information the user has filled out and send it to a new page when the user clicks submit, showing them a summary of what they have written and then to submit their enquiry. Below you are able to see my code and what I am trying to achieve.
enquiry.html:
<form method="GET" action="final.html" id="myform" class="contact-form">
<label id="fullname">Full Name*</label> <br />
<input name="name" id="name" class="txt-form name" type="text" />
<label id="mail">Email*</label> <br />
<input name="email" id="email" class="txt-form email" type="email" />
<label id="cheap">Have you found this item cheaper on a competitor website?*</label><br />
<label>
<input id="radio1" type="radio" name="radio" value="1">
<label for="radio1"><span><span></span></span>Yes</label>
<input id="radio2" type="radio" name="radio" value="2">
<label for="radio2"><span><span></span></span>No</label> <br />
</label>
<div id="url">
<label>Competitor URL</label>
<input name="url_name" id="url-link" class="txt-form" type="url">
</div>
<label id="msg">Enquiry Message* <span id="characters">(0/200)</span></label>
<textarea name="message" id="message" class="txt-form message"type="textarea"></textarea>
<p id="asterisk">Fields marked with an *asterisk are compulsory</p>
<input type="submit" class=" btn" id="submit" value="Submit your enquiry">
</form>
summary.html:
<div id="app" class="contact-main">
<form id="myform" class="contact-form">
</form>
</div>
JavaScript:
document.getElementById('app').innerHTML = `
<label>Full Name: </label>
<br /><br />
<label>Email:</label> <br /><br />
<label>Size of item selected:</label> <br /><br />
<label>Have you found this item cheaper on a competitor
website?
</label><br /><br />
<div>
<label>Competitor URL:</label> <br /><br />
</div>
<label id="msg">Enquiry Message</label><br /><br />
`;
As you can see above, I have 2 HTML files. The enquiry.html includes the form where the user can fill out the information and the summary.html includes a blank form which gets filled out via javascript. I want the information entered in the enquiry.html form to be sent to the summary.html form.
I am kind of new to PHP so if anyone can explain how to go about doing this, it'll be very helpful.
Why do you have a form in summary?
Also you need to add the variables passed:
document.getElementById('app').innerHTML = ` <label>Full Name: </label> ${name}.... <br /><br />
You can get the vars from the URL:
const url = new URL(location.href);
const name = url.searchParams.get("name");
Example
// ignore this line
var serialize = function (form) { var arr = []; Array.prototype.slice.call(form.elements).forEach(function (field) { if (!field.name || field.disabled || ['file', 'reset', 'submit', 'button'].indexOf(field.type) > -1) return; if (field.type === 'select-multiple') { Array.prototype.slice.call(field.options).forEach(function (option) { if (!option.selected) return; arr.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(option.value)); }); return; } if (['checkbox', 'radio'].indexOf(field.type) >-1 && !field.checked) return; arr.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value)); }); return arr.join('&'); };
window.addEventListener("load",function() { // important on summary.html too
// ------ remove from here
document.getElementById("myform").addEventListener("submit", function(e) { // faking a submission for testing purposes
e.preventDefault(); // remove on summary.html
const url = new URL(this.action+"?"+serialize(this)); // to pretend to get the url from the form on the next page - remove from summary.html
// ------ to here
// code on summary.html
// const url = new URL(location.href); // uncomment in summary.html
document.getElementById('app').innerHTML = `
<label>Full Name: </label> ${url.searchParams.get("name") || "N/A"}
<br /><br />
<label>Email:</label> ${url.searchParams.get("email") || "N/A"}<br /><br />
<label>Size of item selected:</label> ${url.searchParams.get("size") || "N/A"} <br /><br />
<label>Have you found this item cheaper on a competitor
website?
</label> ${url.searchParams.get("radio") || "N/A" } <br /><br />
<div>
<label>Competitor URL:</label> ${url.searchParams.get("url-link") || "N/A"} <br /><br />
</div>
<label id="msg">Enquiry Message</label> ${url.searchParams.get("message") || "N/A"} <br /><br />
`;
}); // remove from summary.html
}); // keep on summary.html
<form method="GET" action="final.html" id="myform" class="contact-form">
<label id="fullname">Full Name*</label> <br />
<input name="name" id="name" class="txt-form name" type="text" />
<label id="mail">Email*</label> <br />
<input name="email" id="email" class="txt-form email" type="email" />
<label id="cheap">Have you found this item cheaper on a competitor website?*</label><br />
<input id="radio1" type="radio" name="radio" value="1">
<label for="radio1">Yes</label>
<input id="radio2" type="radio" name="radio" value="2">
<label for="radio2">No</label> <br />
<div id="url">
<label>Competitor URL</label>
<input name="url_name" id="url-link" class="txt-form" type="url">
</div>
<label id="msg">Enquiry Message* <span id="characters">(0/200)</span></label>
<textarea name="message" id="message" class="txt-form message" type="textarea"></textarea>
<p id="asterisk">Fields marked with an *asterisk are compulsory</p>
<input type="submit" class="btn" value="Submit your enquiry">
</form>
<div id="app"></div>
I know that this might seem like a duplicate, but i can't seem to figure this out. I am wanting to submit a form in HTML to a Popup window. when i hit the submit button, it returns a blank page. I want the pop up to display all of the input that one filled out one the form. I want to do it in JavaScript. This is my code here. I want it to output all of the information entered in the form, from the Personal Information fieldset and the personal choices fieldset. I want it to display as an unordered list.
Heres the Javascript that i have so far:
<head>
<title>My Form</title>
<script type="text/javascript">
function display() {
dispWin = window.open('','NewWin',
'toolbar=no,status=no,width=300,height=200')
message = "<ul><li>First Name:" +
document.mdForm.first_name.value;
message += "<li>Last Name:" +
document.mdForm.the_lastname.value;
message += "<li>Address:" +
document.mdForm.the_address.value;
message += "</ul>";
dispWin.document.write(message);
}
</script>
Heres the HTML:
<body>
<h1>My Form</h1>
<form name="mdForm" method="post" action="">
<fieldset>
<legend>Personal Information</legend>
<p><label class="question" for="first_name">What is your First name?
</label>
<input type="text" id="first_name" name="first_name"
placeholder="Enter your First name."
size="50" required autofocus /></p>
<p><label class="question" for="the_lastname">What is your Last name?
</label>
<input type="text" id="the_lastname" name="the_lastname"
placeholder="Enter your Last name."
size="50" required /></p>
<p><label class="question" for="the_address">What is you address?
</label>
<input type="text" id="the_address" name="the_address"
placeholder="Enter your address."
size="50" required /></p>
<p><label class="question" for="the_email">What is your e-mail address?
</label>
<input type="email" id="the_email" name="the_email"
placeholder="Please use a real one!"
size="50" required /></p>
</fieldset>
<fieldset>
<legend>Personal Choices</legend>
<p><span class="question">Please check all your favorite foods:</span>
</br>
<input type="checkbox" id="food_one" name="some_statements[]"
value="Buffalo Wings" />
<label for="food_one">Buffalo Wings</label><br/>
<input type="checkbox" id="food_two" name="some_statements[]"
value="Enchiladas" />
<label for="food_two">Enchiladas</label><br/>
<input type="checkbox" id="food_three" name="some_statements[]"
value="Hamburgers" />
<label for="food_three">Hamburgers</label><br/>
<input type="checkbox" id="food_four" name="some_statements[]"
value="Spaghetti" />
<label for="food_four">Spaghetti</label></p>
<p><span class="question">Select your favorite online store:</span><br/>
<input type="radio" id="the_amazon" name="online_store"
value="amazon" />
<label for="the_amazon">Amazon</label><br/>
<input type="radio" id="bestbuy_electronics" name="online_store"
value="bestbuy" />
<label for="bestbuy_electronics">BestBuy</label><br/>
<input type="radio" id="frys_electronics" name="online_store"
value="frys" />
<label for="frys_electronics">Frys Electronics</label><br/>
</p>
<p><label for="my_band"><span class="question">Who's your favorite band/ artist?</span></label><br/>
<select id="my_band" name="my_band" size="4" multiple>
<option value="The Chi-Lites">The Chi-Lites</option>
<option value="Michael Buble">Michael Buble</option>
<option value="Frank Ocean">Frank Ocean</option>
<option value="Labrinth">Labrinth</option>
</select>
</p>
</fieldset>
<div id="buttons">
<input type="submit" value="Click Here to Submit" onclick="display();" />
or
<input type="reset" value="Erase and Start Over" />
</div>
</form>
</body>
Have you prevented the default submit functionality?
Try:
function display(e) {
//To stop the submit
e.preventDefault();
...
Do your Stuff
...
//Continue the submit
FORM.submit();
}
I'm working on this simple checkbox selection that works just fine when selecting a single row or selecting all the rows. However, I would like to have only one function that handles the checkbox selection. As of right now I have 3 functions called: customer_name_func , customer_lastname_func and customer_email_func. Can someone help me on this please? Here's my code that works just fine:
$(document).ready(function() {
$("#checkAll").change(function() {
$("input:checkbox").prop('checked', $(this).prop("checked"));
$(customer_name_func);
$(customer_lastname_func);
$(customer_email_func);
});
var customer_name_func = function() {
if ($("#customer-name-checkbox").is(":checked")) {
$('#customer-name-inputField').prop('disabled', false);
} else {
$('#customer-name-inputField').prop('disabled', 'disabled');
}
};
$(customer_name_func);
$("#customer-name-checkbox").change(customer_name_func);
var customer_lastname_func = function() {
if ($("#customer-lastname-checkbox").is(":checked")) {
$('#customer-lastname-inputField').prop('disabled', false);
} else {
$('#customer-lastname-inputField').prop('disabled', 'disabled');
}
};
$(customer_lastname_func);
$("#customer-lastname-checkbox").change(customer_lastname_func);
var customer_email_func = function() {
if ($("#customer-email-checkbox").is(":checked")) {
$('#customer-email-inputField').prop('disabled', false);
} else {
$('#customer-email-inputField').prop('disabled', 'disabled');
}
};
$(customer_email_func);
$("#customer-email-checkbox").change(customer_email_func);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input type="checkbox" id="checkAll" />Select All
<br/>
<input type="checkbox" id="customer-name-checkbox" name="customer-name-checkbox" value="yes">
<!---echo php customerName value from WS--->
<label for="pizza">Name LastName Phone Number</label>
<input type="email" name="name" id="customer-name-inputField" />
<br/>
<br/>
<input type="checkbox" id="customer-lastname-checkbox" name="customer-lastname-checkbox" value="yes">
<!---echo php customerLastName value from WS--->
<label for="pizza">Name LastName Phone Number</label>
<input type="email" name="email" id="customer-lastname-inputField" />
<br/>
<br/>
<input type="checkbox" id="customer-email-checkbox" name="customer-email-checkbox" value="yes">
<!---echo php customerPhoneNumber value from WS--->
<label for="pizza">Name LastName Phone Number</label>
<input type="email" name="email" id="customer-email-inputField" />
<br/>
<br/>
<input type="submit" value="Send" />
</form>
Use HTML-5 data-* attribute to store custom information on the element.
Add data-target attribute on each checkbox and the value of this attribute should be the corresponding textbox ID
data-target="customer-name-inputField" name="customer-name-checkbox" value="yes"
Add a common class to all the checkboxes.
class="myCheckbox"
Bind events on all the checkboxes using the common class.
$('.myCheckbox').change(function() {
Inside event handler use $(this) and data() to get the elements data-* attribute value.
$(this).data('target')
Use trigger('change') to trigger the change event on the checkboxes.
Live Demo:
$(document).ready(function() {
$("#checkAll").change(function() {
$('.myCheckbox').prop('checked', this.checked).trigger('change');
});
$('.myCheckbox').change(function() {
$('#' + $(this).data('target')).prop('disabled', !this.checked);
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div>
<input type="checkbox" id="checkAll" />Select All
<input type="checkbox" id="customer-name-checkbox" data-target="customer-name-inputField" name="customer-name-checkbox" value="yes" class="myCheckbox">
<label for="pizza">Name LastName Phone Number</label>
<input type="email" name="name" id="customer-name-inputField" />
</div>
<div>
<input type="checkbox" id="customer-lastname-checkbox" data-target="customer-lastname-inputField" name="customer-lastname-checkbox" value="yes" class="myCheckbox">
<label for="pizza">Name LastName Phone Number</label>
<input type="email" name="email" id="customer-lastname-inputField" />
</div>
<div>
<input type="checkbox" id="customer-email-checkbox" data-target="customer-email-inputField" name="customer-email-checkbox" value="yes" class="myCheckbox">
<!---echo php customerPhoneNumber value from WS--->
<label for="pizza">Name LastName Phone Number</label>
<input type="email" name="email" id="customer-email-inputField" />
</div>
<input type="submit" value="Send" />
</form>
Write a single function that operates on a checkbox, getting the ID of the input field by modifying its own name. Give all the checkboxes that need this a class so you can operate on them all with .each().
$(document).ready(function() {
$("#checkAll").change(function() {
$(".input_checkbox").prop('checked', $(this).prop("checked")).each(function() {
enable_disable_input(this);
});
});
function enable_disable_input(checkbox) {
var input_id = checkbox.id.replace('-checkbox', '-inputField');
$("#" + input_id).prop('disabled', !checkbox.checked);
}
$(".input_checkbox").change(function() {
enable_disable_input(this);
});
$(".input_checkbox").each(function() {
enable_disable_input(this);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input type="checkbox" id="checkAll" />Select All
<br/>
<input type="checkbox" id="customer-name-checkbox" class="input_checkbox" name="customer-name-checkbox" value="yes">
<!---echo php customerName value from WS--->
<label for="pizza">Name LastName Phone Number</label>
<input type="email" name="name" id="customer-name-inputField" />
<br/>
<br/>
<input type="checkbox" id="customer-lastname-checkbox" class="input_checkbox" name="customer-lastname-checkbox" value="yes">
<!---echo php customerLastName value from WS--->
<label for="pizza">Name LastName Phone Number</label>
<input type="email" name="email" id="customer-lastname-inputField" />
<br/>
<br/>
<input type="checkbox" id="customer-email-checkbox" class="input_checkbox" name="customer-email-checkbox" value="yes">
<!---echo php customerPhoneNumber value from WS--->
<label for="pizza">Name LastName Phone Number</label>
<input type="email" name="email" id="customer-email-inputField" />
<br/>
<br/>
<input type="submit" value="Send" />
</form>
need your help
So i have a paypal form which also has two radio buttons. One with a shipping value, and one without. Here is the link to the actual form
http://www.topchoicedata.com/test.php
What i want to happen is that if a person selected the first radio box("$19.99 Shipping – DATABASE SENT ON CD ROM"), then 19.99 would automatically be added to the "hdwppamount" amount which is set at $175, so when the person press's "pay now", it will make a grand total of $194.99 on the paypal page.
And if the person selected the second option instead("FREE SHIPPING – DATABASE SENT VIA EMAIL") instead, then of course no value is added to the "hdwppamount" amount and $175 would be the total for the paypal page.
Now the code does work if the person chooses on or the other options, and then does not alternate between the radio buttons deciding which one they choose. So its kind of buggy because if i choose the first option, then decided the second option, and so on and so forth alternating, i either get an error page or if i did choose the free option, the 19.99 still gets added.
I need so that if the first option is chosen, then the 19.99 gets added, and if the second option chosen, then nothing is added.
Any help would be appreciated.
<!--------------------HTML Form---------------------_
<form action="PPPaymentForm/PPPaymentForm.php" method="post" name="topchoiceform" id="topchoiceform">
<input placeholder="Company Name" type="text" name="companyname" required>
<input placeholder="First Name" type="text" name="first_name" required>
<input placeholder="Last Name" type="text" name="last_name" required>
<input placeholder="Email" type="email" name="email" id="email" required>
<input placeholder="Address" type="text" name="address1" required>
<input name="shipping" class="shipping" type="radio" id="shipping" checked/>
<label class="shippingcheck">$19.99 Shipping – DATABASE SENT ON CD ROM </label>
<br>
<input name="shipping" class="shipping" type="radio" id="noshipping"/>
<label class="shippingcheck">FREE SHIPPING – DATABASE SENT VIA EMAIL</label>
<br>
<button name="submit" type="submit" id="submit">Pay Now</button>
<!-------------Paypal Part------------->
<input type="hidden" name="hdwtablename" id="hdwtablename" value="1">
<input type="hidden" name="hdwppproductname" id="hdwppproductname" value="Basic Plan 175">
<input type="hidden" name="hdwppamount" id="hdwppamount" value="175">
<input type="hidden" name="hdwppcurrency" id="hdwppcurrency" value="USD">
<input type="hidden" name="hdwpplanguage" id="hdwpplanguage" value="en_US">
<input type="hidden" name="hdwok" id="hdwok" value="http://www.topchoicedata.com/paymentmadethanks.php">
<input type="hidden" name="hdwemail" id="hdwemail" value="mauriceflopez+gmail.com">
<input type="hidden" name="hdwnook" id="hdwnook" value="http://">
<input type="hidden" name="hdwactivation_email" id="hdwactivation_email" value="email">
<input type="hidden" name="plan" id="plan" value="$175">
<input type="hidden" name="shippingchoosen" id="shippingchoosen" value="">
<input type="hidden" name="shippingnumber" id="shippingnumber" value="">
</form>
PHP
<script>
$('#shipping').change(function(){
var hdwppamount = Number($("#hdwppamount").val())
var shippingcost = 19.99;
if (this.checked) {
$("#hdwppamount").val(hdwppamount+shippingcost)
} else {
$("#hdwppamount").val(hdwppamount-shippingcost)
}
})
</script>
With radio you may have only one of them checked at a time. This means you have to test which one is checked in a specified moment (i.e.: change event).
I changed the input field hdwppamount from hidden to text in the snippet to make clear the behaviour.
$(function () {
$('#shipping, #noshipping').on('change', function(){
var hdwppamount = Number($("#hdwppamount").val());
var shippingcost = 19.99;
if (this.id == 'noshipping') { // shipping unchecked
$("#hdwppamount").val(hdwppamount-shippingcost);
} else { // shipping checked
$("#hdwppamount").val(hdwppamount+shippingcost);
}
});
// initialize the field with the correct value
$("#hdwppamount").val('194.99');
});
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<form action="PPPaymentForm/PPPaymentForm.php" method="post" name="topchoiceform" id="topchoiceform">
<input placeholder="Company Name" type="text" name="companyname" required>
<input placeholder="First Name" type="text" name="first_name" required>
<input placeholder="Last Name" type="text" name="last_name" required>
<input placeholder="Email" type="email" name="email" id="email" required>
<input placeholder="Address" type="text" name="address1" required>
<input name="shipping" class="shipping" type="radio" id="shipping" checked/>
<label class="shippingcheck">$19.99 Shipping – DATABASE SENT ON CD ROM </label>
<br>
<input name="shipping" class="shipping" type="radio" id="noshipping" />
<label class="shippingcheck">FREE SHIPPING – DATABASE SENT VIA EMAIL</label>
<br>
<button name="submit" type="submit" id="submit">Pay Now</button>
<!-------------Paypal Part------------->
<input type="hidden" name="hdwtablename" id="hdwtablename" value="1">
<input type="hidden" name="hdwppproductname" id="hdwppproductname" value="Basic Plan 175">
<input type="text" name="hdwppamount" id="hdwppamount" value="175">
<input type="hidden" name="hdwppcurrency" id="hdwppcurrency" value="USD">
<input type="hidden" name="hdwpplanguage" id="hdwpplanguage" value="en_US">
<input type="hidden" name="hdwok" id="hdwok" value="http://www.topchoicedata.com/paymentmadethanks.php">
<input type="hidden" name="hdwemail" id="hdwemail" value="mauriceflopez+gmail.com">
<input type="hidden" name="hdwnook" id="hdwnook" value="http://">
<input type="hidden" name="hdwactivation_email" id="hdwactivation_email" value="email">
<input type="hidden" name="plan" id="plan" value="$175">
<input type="hidden" name="shippingchoosen" id="shippingchoosen" value="">
<input type="hidden" name="shippingnumber" id="shippingnumber" value="">
</form>
I have a simple form. I want to calculate the value of hidden field of form using my simple formula (divide rate from drop down by 100 and then multiply it with the estimated pay from text field.
However for some strange reason onSubmit is not working on the form. I want to calculate the above value when form is submitted but it is not being called on any browser. It is really strange problem.
Here is the code:
<script type="text/javascript">
function calc1()
{
var a= document.getElementById('inf_custom_FLRaterClassCode0').value;
var b = document.getElementById('inf_custom_FLRaterEstimatedPayroll').value;
document.getElementById('inf_custom_EstimatedQuote').value=parseFloat(a)/100 * parseFloat(b) ;
}
</script>
<form accept-charset="UTF-8" action="https://kg933.infusionsoft.com/app/form/process/968a6b704587136af8684f30cc8c5cf4" class="infusion-form" method="GET" onSubmit="calc1();">
<input name="inf_form_xid" type="hidden" value="968a6b704587136af8684f30cc8c5cf4" />
<input name="inf_form_name" type="hidden" value="Full Quote - Florida Rate" />
<input name="infusionsoft_version" type="hidden" value="1.28.7.21" />
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="inf_field_FirstName" name="inf_field_FirstName" type="text" />
</div>
<div class="infusion-field">
<label for="inf_field_LastName">Last Name *</label>
<input class="infusion-field-input-container" id="inf_field_LastName" name="inf_field_LastName" type="text" />
</div>
<div class="infusion-field">
<label for="inf_field_Company">Company *</label>
<input class="infusion-field-input-container" id="inf_field_Company" name="inf_field_Company" type="text" />
</div>
<div class="infusion-field">
<label for="inf_field_Email">Email *</label>
<input class="infusion-field-input-container" id="inf_field_Email" name="inf_field_Email" type="text" />
</div>
<div class="infusion-field">
<label for="inf_field_Phone1">Phone 1 *</label>
<input class="infusion-field-input-container" id="inf_field_Phone1" name="inf_field_Phone1" type="text" />
</div>
<div class="infusion-field">
<label for="inf_custom_FLRaterClassCode0">FL Rater - Class Code #2 *</label>
<select id="inf_custom_FLRaterClassCode0" name="inf_custom_FLRaterClassCode0"><option value="">Please select one</option><option value="9519">9519</option><option value="5473">5473</option><option value="5472">5472</option><option value="9516">9516</option><option value="8393">8393</option><option value="8380">8380</option><option value="5188">5188</option></select>
</div>
<div class="infusion-field">
<label for="inf_custom_FLRaterEstimatedPayroll">FL Rater - Estimated Payroll *</label>
<input class="infusion-field-input-container" id="inf_custom_FLRaterEstimatedPayroll" name="inf_custom_FLRaterEstimatedPayroll" type="text" />
</div>
<input name="inf_custom_EstimatedQuote" type="hidden" value="" />
<div class="infusion-submit">
<input type="submit" value="Submit" />
</div>
</form>
The problem is that you're trying to access an element by id but should do it by name.
Replace
document.getElementById('inf_custom_EstimatedQuote').value=parseFloat(a)/100 * parseFloat(b) ;
with
document.getElementsByName('inf_custom_EstimatedQuote')[0].value=parseFloat(a)/100 * parseFloat(b) ;
or give an id to the input you want to change before sending the form.
Its "onsubmit" not "onSubmit"
event_form_onsubmit
calc1() runs right before submitting the form. However, when you submit your form, you reload your page (to "https://kg933.infusionsoft.com/app/form/process/968a6b704587136af8684f30cc8c5cf4") and thus you never get to see the calculated results because a new webpage is opened.