Using JavaScript to Open iFrame form success in parent window

Using JavaScript to Open iFrame form success in parent window - javascript

We are currently using JavaScript to process our forms, but the form is contained in an iFrame, which opens the success result URL in the iFrame. We would like the success result (once form is filled in) to point to the parent frame...
Script for form:
<script>try
{
var lastSubmission = null;
var ContactId = 0; var _wow;
var CaptureId = 12;
var PageId = 0;
var EmailId = 0;
var CampaignName = '';
var IsNewContact = false;
var IsTest = false;
var IsUserValid;
var gatorLeadsTrackingOptions = 0;
}catch(e){}
errorMessage.innerHTML ='';
successMessage.innerHTML ='';
function GatorTrim(x) { return x.replace(/^\s+|\s+$/gm,'');};function CaptureFormData()
{
if(lastSubmission != null){
secondsSinceLastSubmission = (new Date().getTime() - lastSubmission) / 1000
if(secondsSinceLastSubmission < 1) {
return;
}
}
var Value;
var CheckSelection = false;
var result;
var ButtonId = 6;
var submissionData = {
captureId: CaptureId,
buttonId: ButtonId,
pageId: PageId,
emailId: EmailId,
campaignName: CampaignName,
contactId: ContactId,
isTest: IsTest,
sendNotificationEmail: false,
passGatorLeadsTrackingDataInRedirectUrl: true,
onlyOneEntry: false,
displayName: 'Volo Not got a code',
emailAddress: '',
values: [],
gatorLeadsTrackingOptions: gatorLeadsTrackingOptions
};
document.getElementById('CaptureControlButton_6_').disabled = true;
document.getElementById('CaptureControlButton_6_').value = 'Submitting, please wait';
setTimeout(function() {try{errorMessage.innerHTML = '';
successMessage.innerHTML = '';
Value = getObject('CaptureControl_4_').value;
if(Value==''){errorMessage.innerHTML += 'The email address field is missing<br>';
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
}
Value = getObject('CaptureControl_5_').value;
if(Value==''){errorMessage.innerHTML += 'Mandatory fields missing<br>';
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
}
Value = getObject('CaptureControl_3_').value;
if(Value==''){errorMessage.innerHTML += 'The field name company name is missing<br>';
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
}
if(errorMessage.innerHTML != ''){return;}
Value = GatorTrim(getObject('CaptureControl_4_').value);
submissionData.emailAddress = Value;
Value = GatorTrim(getObject('CaptureControl_5_').value);
if (Value != undefined) {submissionData.values.push({controlId: 5, value: Value });
}
Value = GatorTrim(getObject('CaptureControl_6_').value);
if (Value != undefined) {submissionData.values.push({controlId: 6, value: Value });
}
Value = GatorTrim(getObject('CaptureControl_3_').value);
if (Value != undefined) {submissionData.values.push({controlId: 3, value: Value });
}
var result = WebCapture.Submit(JSON.stringify(submissionData));
var response = JSON.parse(result.value);
if(response.success==false){errorMessage.innerHTML = 'You have already submitted.';
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
return;}
trackingData = response.trackingData;
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
successMessage.innerHTML = 'Thank you for submitting ';
if(typeof _wow != 'undefined' && response.trackWowSubmit){
trackUrlInWow(response.wowUrl);}
var submitRedirectUrl = 'http://takeflight.volocommerce.com/multichannel-selling/'
if(submitRedirectUrl.indexOf('?') == -1){
submitRedirectUrl = submitRedirectUrl + '?';
}else{
submitRedirectUrl = submitRedirectUrl + '&';
}
submitRedirectUrl += 'gator_td=' + trackingData;
window.location.href=submitRedirectUrl;
}catch(e){if(IsTest) { alert(e.message); } else { alert('An error has occurred submitting the data. Please try again.'); }
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
}
lastSubmission = new Date().getTime();
}, 100);
}</script>
The form (contained in an iframe on our page)
<style>
body {
background: #fff;
color:#000;
font-family: ‘open sans’, sans-serif;
}
input[type=text], input[type=button] {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 5px;
height: 40px;
border: 1px solid #f1f1f1;
}
input[type=button] {
background-color: #F04D1D;
height: 45px;
font-weight: bold;
color: #FFF;
font-size: 16px;
}
</style>
<table style="width: 300px; background-color: rgb(255, 255, 255);"><base target="_parent" />
<tbody>
<tr>
<td style="text-align: center;"><font color="#f04d1d"><strong><span style="font-family: '‘open sans’', sans-serif, ';'; font-size: 24px;">GET YOUR CODE </span></strong></font></td>
</tr>
<tr>
<td><span style="color: rgb(242, 242, 242);"> </span></td>
</tr>
<tr>
<td><br>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>First Name* </td>
<td><span style="color: rgb(0, 0, 0);">Last Name*</span></td>
</tr>
<tr>
<td><input name="First Name" id="CaptureControl_5_" type="text" value=""></td>
<td><input name="Last Name" id="CaptureControl_6_" type="text" value=""></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td><br>
</td>
</tr>
<tr>
<td><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">Company Name*</span></td>
</tr>
<tr>
<td><input name="Company Name" id="CaptureControl_3_" type="text" value="" style="width: 300px;"></td>
</tr>
<tr>
<td><br>
</td>
</tr>
<tr>
<td><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">Your Email*</span></td>
</tr>
<tr>
<td><input name="Email Address" id="CaptureControl_4_" type="text" value="" style="width: 300px;"><br>
</td>
</tr>
<tr>
<td><span style="color: rgb(242, 242, 242);"> </span></td>
</tr>
<tr>
<td><input id="CaptureControlButton_6_" type="button" value="Send" onclick="try{CaptureFormData(0);}catch(e){}" style="width: 300px;"><br>
<div id="errorMessage" style="width:135;height:10;font-family:Verdana;font-size:8pt;color:red;">Error Message Area</div>
<div id="successMessage" style="width:135;height:10;font-family:Verdana;font-size:8pt;color:#000000;">Success Message Area</div>
</td>
</tr>
<tr>
<td><span style="color: rgb(0, 0, 0); font-size: 10px;"><em>*Required field</em></span></td>
</tr>
</tbody>
</table>
<br>
<br>
Note The form is on a different URL/domain to our main website, where the content is held.

Just use window.top.location to change whole page not only iframe part.

Related

Calculating GPA and Credit Hours

<script type="text/javascript">
<!--Hide from old browsers
function gpacalc() {
var grade = new Array(9);
var credit = new Array(9);
var getGrade = new Array(5);
var getCredit = new Array(5);
var gradeCount = 12;
grade[0] = "A+";
credit[0] = 4;
grade[1] = "A";
credit[1] = 4;
grade[2] = "A-";
credit[2] = 3.7;
grade[3] = "B+";
credit[3] = 3.3;
grade[4] = "B";
credit[4] = 3;
grade[5] = "B-";
credit[5] = 2.7;
grade[6] = "C+";
credit[6] = 2;
grade[7] = "C-";
credit[7] = 1.7;
grade[8] = "D+";
credit[8] = 1.3;
grade[9] = "D";
credit[9] = 1;
grade[10] = "D-";
credit[10] = 0.7;
grade[11] = "F";
credit[11] = 0.0;
getGrade[0] = document.calcGpaForm.grade1.value;
getGrade[0] = getGrade[0].toUpperCase();
getGrade[1] = document.calcGpaForm.grade2.value;
getGrade[1] = getGrade[1].toUpperCase();
getGrade[2] = document.calcGpaForm.grade3.value;
getGrade[2] = getGrade[2].toUpperCase();
getGrade[3] = document.calcGpaForm.grade4.value;
getGrade[3] = getGrade[3].toUpperCase();
getGrade[4] = document.calcGpaForm.grade5.value;
getGrade[4] = getGrade[4].toUpperCase();
getGrade[5] = document.calcGpaForm.grade6.value;
getGrade[5] = getGrade[5].toUpperCase();
getCredit[0] = document.calcGpaForm.credit1.value;
getCredit[1] = document.calcGpaForm.credit2.value;
getCredit[2] = document.calcGpaForm.credit3.value;
getCredit[3] = document.calcGpaForm.credit4.value;
getCredit[4] = document.calcGpaForm.credit5.value;
getCredit[5] = document.calcGpaForm.credit6.value;
var totalGrades =0;
var totalCredits = 0;
var GPA = 0;
var i = 0;
for (i; i < 6; i++) {
if (getGrade[i] == "") {
break;
}
else if (getGrade[i] == "c" || getGrade[i] == "C") {
alert("'C' is not a vaild letter grade. Course " +eval(i + 1)+ ".")
return;
}
else if (isNaN(getCredit[i])) {
alert("Enter a vaild number of credits for Course " +eval(i + 1)+ ".")
return;
}
else if (getCredit[i] == "") {
alert ("You left the number of credits blank for Course " +eval(i + 1)+ ".")
return;
}
var validgradecheck = 0;
var x = 0;
for (x; x < gradeCount; x++) {
if (getGrade[i] == grade[x]) {
totalGrades = totalGrades + (parseInt(getCredit[i],10) * credit[x]);
totalCredits = totalCredits + parseInt(getCredit[i],10);
validgradecheck = 1;
break;
}
}
if (validgradecheck == 0) {
alert("Could not recognize the grade entered for Course " +eval(i + 1)+ ".");
return;
}
}
if (totalCredits == 0) {
alert("Total credits cannot equal zero.");
return;
}
GPA = Math.round(( totalGrades / totalCredits ) * 100) / 100;
alert("GPA = " + eval(GPA));
return;
}
function copyRight() {
var lastModDate = document.lastModified;
var lastModDate = lastModDate.substring(0,10);
displayDateLast.innerHTML = "<h6>Copyright © Haiwook Choi. "+" <br /> This document was last modified "+lastModDate+".</h6>";
}
//-->
</script>
<style type="text/css">
<!--
.align-center {
text-align:center;
}
table {
margin-left: auto;
margin-right: auto;
width: 70%;
}
.block {
width: 50%;
margin-right: auto;
margin-left: auto;
}
.center-div {
width: 70%;
margin-right: auto;
margin-left: auto;
}
.header-text {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
text-align: center;
}
.center-items {
text-align: center;
}
.right-align {
text-align: right;
width: 50%;
}
.left-align {
text-align: left;
width: 50%;
}
#displayDateLast {
text-align: left;
width: 50%;
margin-right: auto;
margin-left: auto;
}
-->
</style>
I'm trying to make a webpage that allows the user to enter from 4 to 6 grades for any course. Next to the letter grade, I'm wanting to put a text-field that accepts the credit hours for the courses. Also when the Calculate GPA button is clicked I want it to verify that a letter grade has been entered and then accumulate the grade points as well as the credit hours and display the GPA. I'm having trouble getting the GPA to calculate though. As well as having an alert display when a user enters anything other than a letter grade? Can someone look over my code and tell me what I should fix or add? Thanks if you read this and attempt to help!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Chapter 10 Cases and Places: 2</title>
<script type="text/javascript">
<!--Hide from old browsers
function gpacalc() {
var grade = new Array(9);
var credit = new Array(9);
var getGrade = new Array(5);
var getCredit = new Array(5);
var gradeCount = 12;
grade[0] = "A+";
credit[0] = 4;
grade[1] = "A";
credit[1] = 4;
grade[2] = "A-";
credit[2] = 3.7;
grade[3] = "B+";
credit[3] = 3.3;
grade[4] = "B";
credit[4] = 3;
grade[5] = "B-";
credit[5] = 2.7;
grade[6] = "C+";
credit[6] = 2;
grade[7] = "C-";
credit[7] = 1.7;
grade[8] = "D+";
credit[8] = 1.3;
grade[9] = "D";
credit[9] = 1;
grade[10] = "D-";
credit[10] = 0.7;
grade[11] = "F";
credit[11] = 0.0;
getGrade[0] = document.calcGpaForm.grade1.value;
getGrade[0] = getGrade[0].toUpperCase();
getGrade[1] = document.calcGpaForm.grade2.value;
getGrade[1] = getGrade[1].toUpperCase();
getGrade[2] = document.calcGpaForm.grade3.value;
getGrade[2] = getGrade[2].toUpperCase();
getGrade[3] = document.calcGpaForm.grade4.value;
getGrade[3] = getGrade[3].toUpperCase();
getGrade[4] = document.calcGpaForm.grade5.value;
getGrade[4] = getGrade[4].toUpperCase();
getGrade[5] = document.calcGpaForm.grade6.value;
getGrade[5] = getGrade[5].toUpperCase();
getCredit[0] = document.calcGpaForm.credit1.value;
getCredit[1] = document.calcGpaForm.credit2.value;
getCredit[2] = document.calcGpaForm.credit3.value;
getCredit[3] = document.calcGpaForm.credit4.value;
getCredit[4] = document.calcGpaForm.credit5.value;
getCredit[5] = document.calcGpaForm.credit6.value;
var totalGrades =0;
var totalCredits = 0;
var GPA = 0;
var i = 0;
for (i; i < 6; i++) {
if (getGrade[i] == "") {
break;
}
else if (getGrade[i] == "c" || getGrade[i] == "C") {
alert("'C' is not a vaild letter grade. Course " +eval(i + 1)+ ".")
return;
}
else if (isNaN(getCredit[i])) {
alert("Enter a vaild number of credits for Course " +eval(i + 1)+ ".")
return;
}
else if (getCredit[i] == "") {
alert ("You left the number of credits blank for Course " +eval(i + 1)+ ".")
return;
}
var validgradecheck = 0;
var x = 0;
for (x; x < gradeCount; x++) {
if (getGrade[i] == grade[x]) {
totalGrades = totalGrades + (parseInt(getCredit[i],10) * credit[x]);
totalCredits = totalCredits + parseInt(getCredit[i],10);
validgradecheck = 1;
break;
}
}
if (validgradecheck == 0) {
alert("Could not recognize the grade entered for Course " +eval(i + 1)+ ".");
return;
}
}
if (totalCredits == 0) {
alert("Total credits cannot equal zero.");
return;
}
GPA = Math.round(( totalGrades / totalCredits ) * 100) / 100;
alert("GPA = " + eval(GPA));
return;
}
function copyRight() {
var lastModDate = document.lastModified;
var lastModDate = lastModDate.substring(0,10);
displayDateLast.innerHTML = "<h6>Copyright © Hannah. "+" <br /> This document was last modified "+lastModDate+".</h6>";
}
//-->
</script>
<style type="text/css">
<!--
.align-center {
text-align:center;
}
table {
margin-left: auto;
margin-right: auto;
width: 70%;
}
.block {
width: 50%;
margin-right: auto;
margin-left: auto;
}
.center-div {
width: 70%;
margin-right: auto;
margin-left: auto;
}
.header-text {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
text-align: center;
}
.center-items {
text-align: center;
}
.right-align {
text-align: right;
width: 50%;
}
.left-align {
text-align: left;
width: 50%;
}
#displayDateLast {
text-align: left;
width: 50%;
margin-right: auto;
margin-left: auto;
}
-->
</style>
</head>
<body onLoad="gpacalc(); copyRight()">
<div class="center-div">
<p style="font-family:Arial, Helvetica, sans-serif; font-size:xx-large; font-weight:bold; text-align: center; color:blue">Calculating Your GPA</p>
<p class="block"><strong>Directions: </strong>Enter your letter grade for your courses. In the boxes to the right enter the credit hours per course. Then Click the Calculate GPA button to have your GPA calculated as well as your total credit hours.</p>
<form name="calcGpaForm" method="post">
<table>
<tr>
<h4 style="text-align: center">Letter Grade:</h4>
<th class="right-align">
<span style="color:#cc0000;"></span>Course 1:
</th>
<td class="align-left"><input type="text" name="grade1" type="text" id="grade1" size="10" onBlur="validgradecheck" /></td>
<td class="margin-left: auto"><input type="text" name="credit1" id="credit1" size="10" /></td>
</tr>
<tr>
<th class="right-align">
<span style="color:#cc0000;"></span>Course 2:
</th>
<td class="align-left"><input name="grade2" type="text" id="grade2" size="10" onBlur="validgradecheck" /></td>
<td class="align-left"><input type="text" name="credit2" id="credit2" size="10" /></td>
</tr>
<tr>
<th class="right-align">
<span style="color:#cc0000;"></span>Course 3:
</th>
<td class="align-left"><input name="grade3" type="text" id="grade3" size="10" onBlur="validgradecheck" /></td>
<td class="align-left"><input type="text" name="credit3" id="credit3" size="10" /></td>
</tr>
<tr>
<th class="right-align">
<span style="color:#cc0000;"></span>Course 4:
</th>
<td class="align-left"><input name="grade4" type="text" id="grade4" size="10" onBlur="validgradecheck" /> </td>
<td class="align-left"><input type="text" name="credit4" id="credit4" size="10" /></td>
</tr>
<tr>
<th class="right-align">
<span style="color:#cc0000;"></span>Course 5:
</th>
<td class="align-left"><input type="text" name="grade5" id="grade5" size="10" onBlur="validgradecheck" /></td>
<td class="align-left"><input type="text" name="credit5" id="credit5" size="10" /></td>
</tr>
<tr>
<th class="right-align">
<span style="color:#cc0000;"></span>Course 6:
</th>
<td class="align-left"><input type="text" name="grade6" id="grade6" size="10" onBlur="validgradecheck"/></td>
<td class="align-left"><input type="text" name="credit6" id="credit6" size="10" /></td>
</tr>
<tr>
<td class="right-align">
<input name="button" type="button" value="Calculate GPA" onClick="gpacalc()"/>
</td>
<td class="align-left">
<input name="Reset" type="reset" />
</td>
</tr>
<tr>
<td class="right-align">
<span style="font-weight:bolder;">GPA:</span>
</td>
<td><input type="text" name="gpacalc" id="gpacalc" value=" " size="10" /></td>
</tr>
</table>
</form>
</div>
<div id="displayDateLast">
</div>
</body>
</html>

Few remarks:
I don't think you need to worry about old browsers as no one should be using them nowadays. Therefore, <!--Hide from old browsers --> not needed.
What's the point of calculating the GPA when the page loads i.e. onload? There are no grades when the page loads up, so you'll always get an error. It is probably better to only calculate when the user clicks the button.
Do not repeat yourself.
Do not write for yourself to only read but for others, so comment your code.
Check this answer on the difference between dot notation and square brack notation when it comes to accessing an object property.
eval() is evil and not needed in your code.
Here's how I would do it (hopefully it answers all your questions):
// an object is a better data structure for storing grading scale
var gradingScale = {
'A+': 4,
'A': 4,
'A-': 3.7,
'B+': 3.3,
'B': 3,
'B-': 2.7,
'C+': 2.3,
'C-': 1.7,
'D+': 1.3,
'D': 1,
'D-': 0.7,
'F': 0.0
};
// note in JS, you can reference an element by their ID
// attaching onclick event handler to your button with ID "gpacalc"
gpacalc.onclick = function() {
var totalGradePoints = 0;
var totalCredits = 0;
// easier to just start at 1
for (var i = 1; i <= 6; i++) {
// you can access an object's property using [] notation; useful in this situation
// good idea to normalize your values e.g. trim, uppercase, etc
var grade = document.calcGpaForm['grade' + i].value.trim().toUpperCase();
var credit = document.calcGpaForm['credit' + i].value.trim();
// skip if no grade is entered
if (grade == "") {
break;
}
// check if grade is invalid i.e. not in the grading scale
if (!gradingScale.hasOwnProperty(grade)) {
alert("'" + grade + "' is not a valid letter grade. Course " + i + ".");
return;
// check if credit is empty
} else if (credit == "") {
alert("You left the number of credits blank for Course " + i + ".");
return;
// check if credit is not a number
} else if (isNaN(credit)) {
alert("Enter a valid number of credits for Course " + i + ".");
return;
}
// at this point, the grade and credit should both be valid...
credit = parseInt(credit, 10);
// so let's add them to the tally
totalGradePoints += gradingScale[grade] * credit;
totalCredits += credit;
}
// check if total credits is greater than zero
if (totalCredits == 0) {
alert("Total credits cannot equal zero.");
return;
}
// show total
gpa.value = Math.round((totalGradePoints / totalCredits) * 10) / 10;
}
<form name="calcGpaForm" method="post">
<table>
<tr>
<h4 style="text-align: center">Letter Grade:</h4>
<th class="right-align">
<span style="color:#cc0000;"></span>Course 1:
</th>
<td class="align-left"><input type="text" name="grade1" type="text" id="grade1" size="10"></td>
<td class="margin-left: auto"><input type="text" name="credit1" id="credit1" size="10"></td>
</tr>
<tr>
<th class="right-align">
<span style="color:#cc0000;"></span>Course 2:
</th>
<td class="align-left"><input name="grade2" type="text" id="grade2" size="10"></td>
<td class="align-left"><input type="text" name="credit2" id="credit2" size="10"></td>
</tr>
<tr>
<th class="right-align">
<span style="color:#cc0000;"></span>Course 3:
</th>
<td class="align-left"><input name="grade3" type="text" id="grade3" size="10"></td>
<td class="align-left"><input type="text" name="credit3" id="credit3" size="10"></td>
</tr>
<tr>
<th class="right-align">
<span style="color:#cc0000;"></span>Course 4:
</th>
<td class="align-left"><input name="grade4" type="text" id="grade4" size="10"></td>
<td class="align-left"><input type="text" name="credit4" id="credit4" size="10"></td>
</tr>
<tr>
<th class="right-align">
<span style="color:#cc0000;"></span>Course 5:
</th>
<td class="align-left"><input type="text" name="grade5" id="grade5" size="10"></td>
<td class="align-left"><input type="text" name="credit5" id="credit5" size="10"></td>
</tr>
<tr>
<th class="right-align">
<span style="color:#cc0000;"></span>Course 6:
</th>
<td class="align-left"><input type="text" name="grade6" id="grade6" size="10"></td>
<td class="align-left"><input type="text" name="credit6" id="credit6" size="10"></td>
</tr>
<tr>
<td class="right-align">
<input type="button" value="Calculate GPA" id="gpacalc">
</td>
<td class="align-left">
<input name="Reset" type="reset">
</td>
</tr>
<tr>
<td class="right-align">
<span style="font-weight:bolder;">GPA:</span>
</td>
<td><input type="text" id="gpa" value="" size="10"></td>
</tr>
</table>
</form>
(Note: the sample attaches an onclick event handler to your button in the JS and not by using an onclick attribute. Though, the latter way should work.)

How to check the table whether the same roll number exists or not using javascript

Can we can check the roll number already exists or not.
with javascript
can we validate this
Showing with a alert message that the roll number exists if it is
already in the table
.
window.onload = function() {
document.getElementById('new').style.display = 'none';
};
function addtable(){
document.getElementById('new').style.display = 'block';
Rollno = document.getElementById("roll_number");
Name = document.getElementById("student_name");
Class = document.getElementById("class");
var Gender = null;
var inputElements = document.getElementsByClassName('gender');
for (var i = 0; inputElements[i]; ++i) {
if(inputElements[i].checked){
Gender = inputElements[i].value;
break;
}
};
Age = document.getElementById("age");
Phone = document.getElementById("phone_number");
var Result = null;
var inputElements = document.getElementsByClassName('result');
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
Result = inputElements[i].value;
break;
}
};
var table = document.getElementById("new");
rowCount = table.rows.length;
row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= Rollno.value;
row.insertCell(1).innerHTML= Name.value;
row.insertCell(2).innerHTML= Class.value;
row.insertCell(3).innerHTML= Gender;
row.insertCell(4).innerHTML= Age.value;
row.insertCell(5).innerHTML= Phone.value;
row.insertCell(6).innerHTML= Result;
row.insertCell(7).innerHTML='<input type="submit" value = "Delete" onclick="deleteRow(this)">';
var roll = document.forms["student_detail"]["roll_number"].value;
if (roll == "") {
alert("Rollno must be filled out");
return false;
}
var name = document.forms["student_detail"]["student_name"].value;
if (name == ""){
alert("Name must be filled out");
return false;
}
var clas = document.forms["student_detail"]["class"].value;
if (clas == "") {
alert("select the class");
return false;
}
var age = document.forms["student_detail"]["age"].value;
if (age == ""){
alert("Age must be filled out");
return false;
}
var phone = document.forms["student_detail"]["phone_number"].value;
if (phone == "") {
alert("Phone number must be filled out");
return false;
}
if (document.student_detail.result1.checked == true && document.student_detail.result2.checked == true){
alert('Select any one result');
return false ;
}
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("new");
table.deleteRow(index);
}
function myFunction() {
var x = document.getElementById('myTable');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
var change = document.getElementById("toggle");
if (change.innerHTML === "Hide Form")
{
change.innerHTML = "Show Form";
}
else {
change.innerHTML = "Hide Form";
}
}
function hideElem(){
document.getElementById('new').style.visibility = "hidden";
}
function showElem(){
document.getElementById('new').style.visibility = "visible";
}
.abc table{
width: 100%;
border-collapse: collapse;
}
.abc table th{
border: 1px solid #000;
}
.abc table td{
border: 1px solid #000;
}
h2{
color: black;
text-shadow: 2px 2px 8px #FF0000
}
input[type=text],select,input[type=number]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 2px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=button] {
width: 50%;
background-color: #4CAF50;
color: white;
padding: 14px 10px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
<form name="student_detail" method="post" action="#" onsubmit="return addtable();">
<table id="myTable" >
<tr>
<td><h2>School Management Application</h2></td>
</tr>
<tr>
<td><label for="roll_number">Roll no</label></td>
<td><input type="text" id="roll_number" name="roll_number" placeholder="Roll Number"></td>
</tr>
<tr>
<td><label for="student_name">Student name</label></td>
<td><input type="text" id="student_name" name="student_name" placeholder="Student Name"></td>
</tr>
<tr>
<td><label for="class">Class</label></td>
<td><select name="class" id="class">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></td>
</tr>
<tr>
<td><label>Gender</label></td>
<td><input type="radio" class="gender" name="gender" value="male">Male
<input type="radio" class="gender" name="gender" value="female">Female</td>
</tr>
<tr>
<td><label for="age">Age</label></td>
<td><input type="number" id="age" name="age" placeholder="Age"></td>
</tr>
<tr>
<td><label for="phone_number">Phone number</label></td>
<td><input type="text" id="phone_number" name="phone_number" placeholder="Phone Number"></td>
</tr>
<tr>
<td><label>Result</label></td>
<td><input type="checkbox" class="result" name="result1" value="passed" >Passed
<input type="checkbox" class="result" name="result2" value="failed" />Failed</td>
</tr>
<tr>
<td><input type="button" value="Submit" onclick="addtable()"></td>
</tr>
</table>
</form>
<table>
<tr>
<td><input type="button" value="Hide Form" id="toggle" onclick="myFunction()">
<input type="button" value="Hide table" id="tab" onclick="hideElem()">
<input type="button" value="Show table" id="tab1" onclick="showElem()"></td>
</tr>
</table>
<div class="abc">
<table id="new">
<tr>
<th>Rollno</th>
<th>Student name</th>
<th>Class</th>
<th>Gender</th>
<th>Age</th>
<th>Phone number</th>
<th>Result</th>
</tr>
</table>
</div>
Need to get alert if the same roll number enters again.After
submiting And a alert message to be shown
Can any one help me to do this

Here's a function that checks for duplicates
checkDupes($("#someId"));
function checkDupes(itemArray) {
var isdupe = false;
for (var i = itemArray.length - 1; i >= 0; i--) {
var value = itemArray[i].value;
if (value == null || value == '' || value.trim().length == 0) {
itemArray[i].style.backgroundColor = 'red';
} else {
if (i > 0) {
for (var j = i - 1; j > -1 && i > 0; j--) {
if (value.trim().toLowerCase() == itemArray[j].value.trim().toLowerCase()) {
itemArray[i].style.backgroundColor = 'red';
isdupe = true;
}
}
if (!isdupe) {
itemArray[i].style.backgroundColor = 'transparent';
}
}
}
}
}

Calculating 0% Interest?

Good evening! I'm teaching myself to code. Right now, I'm making a JavaScript loan calculator, but I hit a snag. If I put 0% interest, it displays nothing in my output textboxes. Everything else is working perfectly though. Any help would be appreciated. Thanks!
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Loan Calculator</title>
<style type="text/css">
.auto-style1 {
text-align: left;
}
.auto-style2 {
font-size: larger;
color: #FFF;
font: Georgia;
}
.auto-style3 {
width: 82px;
text-align: center;
style="float: right;
}
table {
background-color: #F5F5F5;
width: 400px;
height: 300px;
padding-left: 20px;
padding-bottom: 20px;
padding-top: 20px;
}
body {
background-color: #d2691e;
}
</style>
</head>
<body>
<form name="loaninfo">
<div class="auto-style1">
<p><strong>
<span class="auto-style2"> </span></strong><strong><span class="auto-style2"><br />
</span></strong></p>
</div>
<table width="327">
<tr><td colspan="3"></td></tr>
<tr>
<td>Loan Amount:</td>
<td>
$
<input type="text" name="principal" size="12" title="textfield" pattern="([0-9]+\.)?[0-9]+" >
</td>
</tr>
<tr>
<td>Interest Rate:</td>
<td>
<input type="text" name="interest" size="12" title="textfield" pattern="([0-9]+\.)?[0-9]+" >
%
</td>
</tr>
<tr>
<td>Number of Years for Loan:</td>
<td>
<input type="text" name="years" size="12" title="textfield" pattern="([0-9]+\.)?[0-9]+" >
</td>
</tr>
<tr>
<td colspan="3"><input type="button" class="auto-style3" onClick="calculate();" value="Calculate">
<br />
<br />
</td>
</tr>
<tr>
<td colspan="3">
<b>Your Payment Information</b>
</td>
</tr>
<tr>
<td>Monthly Payment Amount:</td>
<td>$ <input type="text" name="payment" size="12" readonly /></td>
</tr>
<tr>
<td>Total Payment Amount:</td>
<td>$ <input type="text" name="total" size="12" readonly ></td>
</tr>
<tr>
<td>Total Interest Payments:</td>
<td>$ <input type="text" name="totalinterest" size="12" readonly /> </td>
</tr>
<tr>
<td colspan="3">
<input type="reset" class="auto-style3" />
</td>
</tr>
</table>
</form>
<script language="JavaScript">
function calculate() {
var principal = document.loaninfo.principal.value;
var months_in_year = 12
var interest = document.loaninfo.interest.value / 100 / months_in_year;
var payments = document.loaninfo.years.value * months_in_year;
var x = Math.pow(1 + interest, payments);
var monthval = (principal*x*interest)/(x-1);
if (!isNaN(monthval) &&
(monthval != Number.POSITIVE_INFINITY) &&
(monthval != Number.NEGATIVE_INFINITY)) {
document.loaninfo.payment.value = round(monthval);
document.loaninfo.total.value = round(monthval * payments);
document.loaninfo.totalinterest.value = round((monthval * payments) - principal);
}
else {
document.loaninfo.payment.value = "";
document.loaninfo.total.value = "";
document.loaninfo.totalinterest.value = "";
}
function round(x) {
return Math.round(x*100)/100;
}
function jsDecimals(e) {
var evt = (e) ? e : window.event;
var key = (evt.keyCode) ? evt.keyCode : evt.which;
if (key != null) {
key = parseInt(key, 10);
if ((key < 48 || key > 57) && (key < 96 || key > 105)) {
if (!jsIsUserFriendlyChar(key, "Decimals")) {
return false;
}
}
else {
if (evt.shiftKey) {
return false;
}
}
}
return true;
}
form.onsubmit = function () {
return textarea.value.match(/^\d+(\.\d+)?$/);
}
</script>

When you put 0 you are getting
var x = Math.pow(1 + interest, payments); // 1
var monthval = principal * x * interest / (x - 1); //NaN because 1-1 in fraction is 0 so it returns 0/0 and it's NaN
you can change you code to be like this:
if (interest===0){
var monthval = (principal)/(months_in_year);
} else {
var monthval = (principal*x*interest)/(x-1);
}
Working Version: http://codepen.io/mhadaily/pen/ZpypdA
feel free to change it to be like what you want.

It's because of this section of code.
else if (interest == 0) {
document.loaninfo.payment.value = "";
document.loaninfo.total.value = "";
document.loaninfo.totalinterest.value = "";
}
When the interest is 0, you are setting the values of all your output boxes to an empty string.
You should replace the RHS of the assignment.

External Javascript, CSS not working in Eclipse

I am a beginner in JS and I have checked that the external js files and css are linked. I have a form as shown below:
The html:
<form id="theForm" action="submitData">
<table>
<tr>
<td>Name:<span class="red">*</span></td>
<td><input style="color: black;" type="text" name="name" id ="name" class="Btn"></td>
<td id="nameError" class="red"> </td>
</tr>
<tr>
<td>Contact Number:<span class="red">*</span></td>
<td><input style="color: black;" type="text" name="phone" id = "phone" class="Btn"></td>
<td id="phoneError" class="red"> </td>
</tr>
<tr>
<td>Email:<span class="red">*</span></td>
<td><input style="color: black;" type="text" name="email" id = "email" class="Btn"></td>
<td id="emailError" class="red"> </td>
</tr>
<tr>
<td>Address:</td>
<td><input style="color: black;" type="text" name="address" class="Btn"></td>
<td>-</td>
</tr>
<tr>
<td>Password:</td>
<td><input style="color: black;" type="text" name="password" class="Btn">
<td>-</td>
</tr>
<tr>
<td></td>
<td>
<input style="color: black;" type="submit" value="SEND" id="submit"/>
</td>
</tr>
</table>
</form>
The CSS here only run a certain portion and not all. The class red does not run at all
The CSS:
//USER ACCOUNT CREATION VALIDATION CSS
.red span{ /* for error messages */
font-style: italic;
color: red;
}
input.error { /* for the error input text fields */
border: 1px red inset;
padding: 2px;
}
td {
margin: 0;
padding: 10px 10px 10px 3px;
}
The JS:
window.onload = init;
// The "onload" handler. Run after the page is fully loaded.
function init() {
// Attach "onsubmit" handler
document.getElementById("theForm").onsubmit = validateForm;
// Set initial focus
document.getElementById("name").focus();
}
function validateForm() {
return (isNotEmpty("name", "Please enter your name!")
&& isNotEmpty("address", "Please enter your address!")
&& isNotEmpty("phone", "Please enter a valid phone number!")
&& isNotEmpty("phone", "Enter 8 digits", 8, 8)
&& isNotEmpty("email", "Enter a valid email!")
);
}
// Return true if the input value is not empty
function isNotEmpty(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + "Error");
var inputValue = inputElement.value.trim();
var isValid = (inputValue.length !== 0); // boolean
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}
document.getElementById("theForm").submit();
In this JS, i want to check if all fields are filled an not empty, but the page does not validate at all. Why is this so?
I would like to find out why did the CSS not show as specified.
EDITED JS
<script>
function validateForm() {
var name = document.forms["myForm"]["name"].value;
var phone = document.forms["myForm"]["phone"].value;
var email = document.forms["myForm"]["email"].value;
var add = document.forms["myForm"]["address"].value;
var passwd = document.forms["myForm"]["password"].value;
if (name == null || name == "" || phone == null || phone == "" || email == null || email == "" || add == null || add == ""
|| passwd == null || passwd == "") {
alert("All must be filled out");
return false;
}
}</script>

Js- You Forgot to give Id's for everything, so nothing is actually being called. (You have names, not IDs)
With Regards to your CSS problem try the following:
span.red {
font-style: italic;
color: red;
}
input.error {
/* for the error input text fields */
border: 1px red inset;
padding: 2px;
}
td {
margin: 0;
padding: 10px 10px 10px 3px;
}
This isn't Javascript you can't comment with // only /**/. Also Note the span.red, this means select spans with the class red. You wrote select spans that are the children of .red
That should Fix it... Oh, one more thing, the action is being called before you are actually validating, You should some how submit that from JS.
Remove the submit from the input, change it to a button, and bind the click event the input[type=submit] becomes <button onclick="validateForm()">Submit</button>
At the end of all validation functions
add this document.getElementById("theForm").submit();
EDIT: Sorry, Looks like you found your JS mistake while I was writing this answer, hope the rest helps though...
EDIT 2: Updated Code
HTML
<form id="theForm" action="submitData">
<table>
<tr>
<td>Name:<span class="red">*</span></td>
<td><input style="color: black;" type="text" name="name" id ="name" class="Btn"></td>
<td id="nameError" class="red"> </td>
</tr>
<tr>
<td>Contact Number:<span class="red">*</span></td>
<td><input style="color: black;" type="text" name="phone" id = "phone" class="Btn"></td>
<td id="phoneError" class="red"> </td>
</tr>
<tr>
<td>Email:<span class="red">*</span></td>
<td><input style="color: black;" type="text" name="email" id = "email" class="Btn"></td>
<td id="emailError" class="red"> </td>
</tr>
<tr>
<td>Address:</td>
<td><input style="color: black;" type="text" name="address" class="Btn"></td>
<td>-</td>
</tr>
<tr>
<td>Password:</td>
<td><input style="color: black;" type="text" name="password" class="Btn">
<td>-</td>
</tr>
<tr>
<td></td>
<td>
<button id="submit" onclick="validateForm()">Submit</button>
</td>
</tr>
</table>
</form>
CSS:
span.red{ /* for error messages */
font-style: italic;
color: red;
}
input.error { /* for the error input text fields */
border: 1px red inset;
padding: 2px;
}
td {
margin: 0;
padding: 10px 10px 10px 3px;
}
The JS:
window.onload = init;
// The "onload" handler. Run after the page is fully loaded.
function init() {
// Set initial focus
document.getElementById("name").focus();
}
function validateForm() {
var valid = (isNotEmpty("name", "Please enter your name!") &&
isNotEmpty("address", "Please enter your address!") &&
isNotEmpty("phone", "Please enter a valid phone number!") &&
isNotEmpty("phone", "Enter 8 digits", 8, 8) && isNotEmpty(
"email", "Enter a valid email!"));
if (valid) {
document.getElementById("theForm").submit();
}
}
// Return true if the input value is not empty
function isNotEmpty(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + "Error");
var inputValue = inputElement.value.trim();
var isValid = (inputValue.length !== 0); // boolean
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}
EDIT 3: Try this perhaps?
function validateForm() {
var valid = true;
$("input").each(function(e) {
if (valid) {
var value=$(e.target).val();
if (value === undefined || value==="" ) {
valid = false;
alert("All Fields must be filled out");
}
}
});
return valid;
}
Edit 4:
function validateForm() {
var valid = true;
$("input").each(function() {
if (valid) {
var value=$(this).val();
if (value === undefined) {
valid = false;
alert("All Fields must be filled out");
}
}
});
return valid;
}
Edit 5:
function validateForm() {
var valid = true;
$("input").each(function() {
if (valid) {
var value=$(this).val();
if (value === undefined) {
valid = false;
alert("All Fields must be filled out");
}
}
});
return valid;
}
Edit 6:
function validateForm() {
var valid = true;
var ids = ["name", "phone", "email", "address", "password"];
for (var x in ids) {
var value = document.getElementById(ids[x]).value;
if (value === undefined || value === "") {
valid = false;
}
}
if (!valid) {
alert("All must be filled out");
}
}

I'm not sure about your JavaScript problem, but the error with the .red class is that you've set it to only color span elements inside the element with the .red class.It also looks like the input.error is incorrect. I think you want that to be just .error so when you apply that class to the input field it will change.
.red { /* for error messages */
font-style: italic;
color: red;
}
.error { /* for the error input text fields */
border: 1px red inset;
padding: 2px;
}
td {
margin: 0;
padding: 10px 10px 10px 3px;
}

onclick button needs to open in parent window

We have a form on our Marketing Automation (3rd party) software, which is being called on a microsite in an iframe... However, it's currently opening the link in the iframe and not the parent window... I think I know how to fix it, but I want to double check with you guys that the onclick code would work before I pass it over to the marketing company.
I'm using the following code:
<style>
body {
background: #fff;
color:#000;
font-family: ‘open sans’, sans-serif;
}
input[type=text], input[type=button] {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 5px;
height: 40px;
border: 1px solid #f1f1f1;
}
input[type=button] {
background-color: #F04D1D;
height: 45px;
font-weight: bold;
color: #FFF;
font-size: 16px;
}
</style>
<table style="width: 300px; background-color: rgb(255, 255, 255);">
<tbody>
<tr>
<td style="text-align: center;"><font color="#f04d1d"><strong><span style="font-family: '‘open sans’', sans-serif, ';'; font-size: 24px;">GET YOUR CODE </span></strong></font></td>
</tr>
<tr>
<td><span style="color: rgb(242, 242, 242);"> </span></td>
</tr>
<tr>
<td><br>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>First Name* </td>
<td><span style="color: rgb(0, 0, 0);">Last Name*</span></td>
</tr>
<tr>
<td><input name="First Name" id="CaptureControl_5_" type="text" value=""></td>
<td><input name="Last Name" id="CaptureControl_6_" type="text" value=""></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td><br>
</td>
</tr>
<tr>
<td><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">Company Name*</span></td>
</tr>
<tr>
<td><input name="Company Name" id="CaptureControl_3_" type="text" value="" style="width: 300px;"></td>
</tr>
<tr>
<td><br>
</td>
</tr>
<tr>
<td><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">Your Email*</span></td>
</tr>
<tr>
<td><input name="Email Address" id="CaptureControl_4_" type="text" value="" style="width: 300px;"><br>
</td>
</tr>
<tr>
<td><span style="color: rgb(242, 242, 242);"> </span></td>
</tr>
<tr>
<td><input id="CaptureControlButton_6_" type="button" value="Send" target="_parent" onclick="try{CaptureFormData(0);}catch(e){}" style="width: 300px;"><br>
<div id="errorMessage" style="width:135;height:10;font-family:Verdana;font-size:8pt;color:red;">Error Message Area</div>
<div id="successMessage" style="width:135;height:10;font-family:Verdana;font-size:8pt;color:#000000;">Success Message Area</div>
</td>
</tr>
<tr>
<td><span style="color: rgb(0, 0, 0); font-size: 10px;"><em>*Required field</em></span></td>
</tr>
</tbody>
</table>
<br>
<br>
This is the line of code which I want to trigger the successful result to open in the parent window:
<td><input id="CaptureControlButton_6_" type="button" value="Send" target="_parent" onclick="try{CaptureFormData(0);}catch(e){}" style="width: 300px;"><br>
I added Target="_parent" but this failed to open in the parent window... Which makes me think this bit:
onclick="try{CaptureFormData(0);}catch(e){}"
needs to contain something like:
onclick="parent.window.open(try{CaptureFormData(0);}catch(e){})"
Would this solve my problem?
Just to add - the Script for the form is here:
<script>try
{
var lastSubmission = null;
var ContactId = 0; var _wow;
var CaptureId = 12;
var PageId = 0;
var EmailId = 0;
var CampaignName = '';
var IsNewContact = false;
var IsTest = false;
var IsUserValid;
var gatorLeadsTrackingOptions = 0;
}catch(e){}
errorMessage.innerHTML ='';
successMessage.innerHTML ='';
function GatorTrim(x) { return x.replace(/^\s+|\s+$/gm,'');};function CaptureFormData()
{
if(lastSubmission != null){
secondsSinceLastSubmission = (new Date().getTime() - lastSubmission) / 1000
if(secondsSinceLastSubmission < 1) {
return;
}
}
var Value;
var CheckSelection = false;
var result;
var ButtonId = 6;
var submissionData = {
captureId: CaptureId,
buttonId: ButtonId,
pageId: PageId,
emailId: EmailId,
campaignName: CampaignName,
contactId: ContactId,
isTest: IsTest,
sendNotificationEmail: false,
passGatorLeadsTrackingDataInRedirectUrl: true,
onlyOneEntry: false,
displayName: 'Volo Not got a code',
emailAddress: '',
values: [],
gatorLeadsTrackingOptions: gatorLeadsTrackingOptions
};
document.getElementById('CaptureControlButton_6_').disabled = true;
document.getElementById('CaptureControlButton_6_').value = 'Submitting, please wait';
setTimeout(function() {try{errorMessage.innerHTML = '';
successMessage.innerHTML = '';
Value = getObject('CaptureControl_4_').value;
if(Value==''){errorMessage.innerHTML += 'The email address field is missing<br>';
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
}
Value = getObject('CaptureControl_5_').value;
if(Value==''){errorMessage.innerHTML += 'Mandatory fields missing<br>';
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
}
Value = getObject('CaptureControl_3_').value;
if(Value==''){errorMessage.innerHTML += 'The field name company name is missing<br>';
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
}
if(errorMessage.innerHTML != ''){return;}
Value = GatorTrim(getObject('CaptureControl_4_').value);
submissionData.emailAddress = Value;
Value = GatorTrim(getObject('CaptureControl_5_').value);
if (Value != undefined) {submissionData.values.push({controlId: 5, value: Value });
}
Value = GatorTrim(getObject('CaptureControl_6_').value);
if (Value != undefined) {submissionData.values.push({controlId: 6, value: Value });
}
Value = GatorTrim(getObject('CaptureControl_3_').value);
if (Value != undefined) {submissionData.values.push({controlId: 3, value: Value });
}
var result = WebCapture.Submit(JSON.stringify(submissionData));
var response = JSON.parse(result.value);
if(response.success==false){errorMessage.innerHTML = 'You have already submitted.';
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
return;}
trackingData = response.trackingData;
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
successMessage.innerHTML = 'Thank you for submitting ';
if(typeof _wow != 'undefined' && response.trackWowSubmit){
trackUrlInWow(response.wowUrl);}
var submitRedirectUrl = 'http://takeflight.volocommerce.com/multichannel-selling/'
if(submitRedirectUrl.indexOf('?') == -1){
submitRedirectUrl = submitRedirectUrl + '?';
}else{
submitRedirectUrl = submitRedirectUrl + '&';
}
submitRedirectUrl += 'gator_td=' + trackingData;
window.location.href=submitRedirectUrl;
}catch(e){if(IsTest) { alert(e.message); } else { alert('An error has occurred submitting the data. Please try again.'); }
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
}
lastSubmission = new Date().getTime();
}, 100);
}</script>

The actual change of the location happens inside your javascript, pretty much at the end:
window.location.href=submitRedirectUrl;
To do that in the topmost frame (i.e. the enveloping page) change it to
window.top.location.href = submitRedirectUrl;
Note that this will only work if both the parent page and the page inside the iframe come from the same domain, because of same-origin-policy

I got around this by redirecting the form to a php script on the same domain which then forwarded to the page intended (on the same domain) to open in the parent window.

We Keep Coding

JavaScript is the programming language of the Web.

Using JavaScript to Open iFrame form success in parent window - javascript

Just use window.top.location to change whole page not only iframe part.

Related

Calculating GPA and Credit Hours

How to check the table whether the same roll number exists or not using javascript

Calculating 0% Interest?

External Javascript, CSS not working in Eclipse

onclick button needs to open in parent window

Categories

Resources