Hijacking from submit to redirect page (Javascript) - javascript

So we're using an online service to handle webinars on our site.
I have full control of the HTML for the registration page but don't have control of the PHP file used in the registration. Currently, the registration form looks like this:
<form accept-charset="UTF-8" name="regform" id="regform" action="http://www.onlinemeetingnow.com/register/notify.php" class="infusion-form" method="POST">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="name" name="name" type="text" value="Your First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Best Email *</label>
<input class="infusion-field-input-container" id="email" name="email" type="text" value="Your Best Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-submit">
<input type="submit" name="go" value="Sign Up for Webinar!" />
</div>
</form>
This submits the values from the form to "notify.php". notify.php apparently has code to force the iframe this code is hosted inside of, to redirect to another page. I don't want this to happen.
I want the form to submit, but then I want to send the user to my own ThankYou page. I'm thinking that the best way to do this is by "hijacking" the submission and sending them to the page I want.
I thought that maybe calling a custom javascript function using onsubmit might work. Here's what I have right now:
<form accept-charset="UTF-8" name="regform" id="regform" action="http://www.onlinemeetingnow.com/register/notify.php" class="infusion-form" method="POST" onsubmit="return doRedirect();">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="name" name="name" type="text" value="Your First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Best Email *</label>
<input class="infusion-field-input-container" id="email" name="email" type="text" value="Your Best Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-submit">
<input type="submit" name="go" value="Sign Up for Webinar!" />
</div>
</form>
<script language="javascript" type="text/javascript">
function doRedirect()
{
window.location.replace("http://stackoverflow.com");
return true;
}
</script>
For some reason it's not working though. The iframe continues to redirect to the page I don't want, and the window itself isn't being redirected.
Am I doing this right or is there a better way of achieving this?
Thank you in advance for your help!
Jason
UPDATE: I've confirmed that the javascript is never executing. I added: window.alert("JAVASCRIPT EXECUTED"); and the pop-up never happens so this appears to be an issue with onSubmit rather than the javascript itself. Why won't the javascript execute in onSubmit? I tried changing it to onSubmit="JavaScript:doRedirect();" and that didn't work either.

This should do the trick:
<input type="submit" name="go" onclick="doRedirect();" value="Sign Up for Webinar!" />
If you are looking to completely remove the interaction with the php form, remove the action from the <form> tag
<form accept-charset="UTF-8" name="regform" id="regform" class="infusion-form" method="POST">

If you are willing to try AJAX:
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
jQuery(function($) {
$('#regform').submit( function(e){
$.ajax({
type: 'post',
data: $(this).serialize(),
url: $(this).attr("action")
})
.done(function (data){
$(location).attr('href', 'http://stackoverflow.com');
});
e.preventDefault();
});
});
</script>
<form accept-charset="UTF-8" name="regform" id="regform" action="http://www.onlinemeetingnow.com/register/notify.php" class="infusion-form" method="POST">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="name" name="name" type="text" value="Your First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Best Email *</label>
<input class="infusion-field-input-container" id="email" name="email" type="text" value="Your Best Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-submit">
<input type="submit" name="go" value="Sign Up for Webinar!" />
</div>
</form>

Related

On submit and o'clock not working together

I have read previous posts on this and have tried to apply the onsubmit on my form element in HTML but still doesn't seem to work. I have it as follows:
<form class="button" id="arrow" onsubmit='return hotelList()'>
<input type='submit' value='Submit'/>
</form>
and js:
const hotelList = () => window.location.href = './ochome.html';
Any suggestions? Thank you
Full code:
New Question: my required field does not seem to be working, and the sends me to the other page regardless....
enter code here
<form action="/user-details.html" class='login'>
<!-- is this GET or POST?? -->
<label for="username" >Username</label><br>
<input class="whitebox" type="text" id='username' required/>
<label for="pass" id='pass'>Password</label><br>
<input class="whitebox" type='password' id='passBox' required/>
<input type="submit" id='arrow' value="> Submit">
</form>
the form contains all the input you want to submit and the action is like: action="/file.js" and it has to be a file which handles the data
the code:
<form action="/user-details.html">
<label for="fname">First name:</label><br>
<input class="whitebox" type="text" id='username' required/>
<label for="lname">Last name:</label><br>
<input class="whitebox" type='password' id='passBox' required/>
<input type="submit" value="Submit"/>
</form>

Disable submit button once the user submits the form

I am using the PHP & MySQL to submit a form with following code and using isset function in PHP to submit the value to database.
<div class="display">
<form action="" method="POST">
<div>
<input type="text" name="name" placeholder="Your Name" required="required">
</div>
<div>
<input type="text" name="phone" id="phone" placeholder="Mobile" required="required" onblur="check();">
<br/>
<span id="e_mobile"></span>
<?php if(isset($_GET["r"])){ ?><p>Invalid number; must be ten digits. Please submit your query again</p><?php } ?>
</div>
<div>
<input type="text" name="landline" id="landline" placeholder="Alternate Number" required="required" onblur="check1();">
<br/>
<span id="e_landline"></span>
</div>
<div>
<input type="email" name="email" placeholder="Email" required="required">
</div>
<div>
<input type="text" name="address" placeholder="Your Address" required="required">
</div>
<div>
<input type="hidden" value="0" name="salesid"/>
</div>
<input type="submit" name="submit" value="Submit">
</form>
</div>
Now I want once the user click submit button once the button should freeze; as of now if the user clicks the submit button more than once(by intentionally or by mistake) the same information is getting submitted in the database more than once.
What to do in this circumstance?
Try with JQuery:
First add an ID to your form
<form action="" method="POST" id="form">
After that add script:
<script type="text/javascript">
$(document).ready(function() {
$("#form").submit(function(e){
$("input[type='submit']").attr("disabled","disabled");
});
});
</script>
You can add PHP Captcha to prevent user click again.
Please review below two urls which includes demo too.
http://www.w3schools.in/php/captcha/
http://99webtools.com/blog/php-simple-captcha-script/

Two forms with submit buttons two different functions. One button to run a javascript

Form1 has the action to link to an external .aspx file. But once I added Form2 and the javascript file, contact-us/js/app.js, to the page. The javascript now controlls both form submit buttons. How do I link the javascript file to only run when Form2 button is submitted?
Form1
<div id="guestLogin">
<form id="frmguestlogin" name="frmguestlogin" method="post" action="AutoLogin.aspx" >
<input type="hidden" name="username" class="text" id="username" onfocus="this.value='';" tabindex="30" value="guest" />
<input type="hidden" name="password" class="text" id="password" onfocus="this.value='';" tabindex="40" value="guest" />
<input type="submit" width="80" height="20" border="0" name="submit" id="submit" value="Guest Login" tabindex="50" />
</form>
</div>
Form2 code. The last script is controlling both submit buttons on the page. How do I only have it control Form2 submit button?
Form2
<div id="form-wrapper">
<div class="inner cover">
<form class="form-signin" id="form-signin" >
<h4 class="sendMsg">Send us a message</h4>
<input type="text" id="first" class="form-control" placeholder="First Name" required>
<input type="text" id="last" class="form-control" placeholder="Last Name" required >
<input type="text" id="company" class="form-control" placeholder="Company" required >
<input type="text" id="phone" class="form-control" placeholder="Phone" required >
<input type="email" id="email" class="form-control" placeholder="Email" required >
<p> Tell us how we can help you</p>
<textarea id="comments" style="font-family: Arial, Helvetica, sans-serif" class="form-control" cols="45" rows="5" required ></textarea>
<button class="btn btn-lg btn-primary btn-block" type="submit">Send Your Message</button>
<input id="subject" name="subject" type="hidden" value="Contact Us" />
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="contact-us/js/bootstrap.min.js"></script>
<script src="contact-us/js/ie10-viewport-bug-workaround.js"></script>
<script src="contact-us/js/app.js"></script>
app.js code to control form2 only:
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault();
//Submit Form
var first = $("input#first").val();
var last = $("input#last").val();
var company = $("input#company").val();
var phone = $("input#phone").val();
var email = $("input#email").val();
var comments = $("textarea#comments").val();
var subject = $("input#subject").val();
$.ajax({
type: "POST",
url: "contact-us.asp",
data: { first : first,
last : last,
company : company,
phone : phone,
email : email,
comments : comments,
subject : subject },
cache : false,
contentType:"application/x-www-form-urlencoded; charset=UTF-8",
success: function() {
$('.form-signin').hide();
$('.cover').fadeIn('slow').html('<h2>Thank You, '+first+' '+last+'</h2>');
}
});
});
});
To route it with a certain script (without a form submit) I would use a normal button type.
<input type="button" value="Submit" onclick="myFunction()">
The onclick calls the JavaScript function that contains what you want it to do.
Edited - Added notes:
Also this calls just a form in general
$("form").submit
It doesn't specify what form it is, use an ID to find the 2nd form
Code:
$(document).ready(function(){
$("#form2").submit(function(){
alert("Submitted");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Form 1</h1>
Form one goes to aspx.
<form action="AutoLogin.aspx">
First name: <input type="text" name="FirstName"><br>
Last name: <input type="text" name="LastName"><br>
<input type="submit" value="Submit">
</form>
<h1>Form 2</h1>
Form two goes to the JQuery based off of the form ID (this works with external files as well)
<form id="form2">
First name: <input type="text" name="FirstName"><br>
Last name: <input type="text" name="LastName"><br>
<input type="submit" value="Submit">
</form>

Passing form data from one page to another html mobile page

I'm new to mobile development and I am trying to pass information from a form and I want to display it on another page. I have tried passing the info using cookies but with no success..
Here is my code for the form:
function submit_jobs_post(){
$.cookie('job_title', $('#job_title').val());
$.cookie('job_des', $('#job_des').val());
$.cookie('company_name', $('#company_name').val());
$.cookie('company_address', $('#company_address').val());
$.cookie('company_phone', $('#company_phone').val());
$.cookie('company_email', $('#company_email').val());
}
<form method="post" action="jobs_page.html" id="post_ads">
<label for="job_title">Job Title:</label>
<input type="text" name="job_title" id="job_title">
<label for="job_des">Job Description:</label>
<textarea name="job_des" id="job_des"></textarea>
<label for="company_name">Company Name:</label>
<input type="text" name="company_name" id="company_name">
<label for="company_address">Address:</label>
<input type="text" name="company_address" id="company_address">
<label for="company_phone">Phone:</label>
<input type="text" name="company_phone" id="company_phone">
<label for="company_email">Email:</label>
<input type="email" name="company_email" id="company_email" placeholder="Your email..">
<input type="submit" data-inline="true" value="Post Job" onClick='submit_jobs_post()'>
</form>
And here is my code for the page to receive the information. When I submit the form the data does not appear on this page.
window.onload = function()
{
$('#job_title_got').val($.cookie('job_title'));
$('#job_des_got').val($.cookie('job_des'));
$('#company_name_got').val($.cookie('company_name'));
$('#company_address_got').val($.cookie('company_address'));
$('#company_phone_got').val($.cookie('company_phone'));
$('#company_email_got').val($.cookie('company_email'));
};
<input type="text" name="job_title_got" id="job_title_got">
<textarea name="job_des_got" id="job_des_got"></textarea>
<input type="text" name="company_name_got" id="company_name_got">
<input type="text" name="company_address_got" id="company_address_got">
<input type="text" name="company_phone_got" id="company_phone_got">
<input type="email" name="company_email_got" id="company_email_got" >
Any help would be great, thanks in advance...

send mail form not sending mail

I have a form that pops up when the user clicks a link and then sends an email to the address of their choice. The form looks great, but the email isn't getting sent...
<div id="tellfriend" class="contact_form">
<a class="close" href="#close" >Close</a>
<form id='tellafriend_form' method="post" action="http://naturesfootprintinc.com/sendmail.php">
<label for="name">Your Name: </label>
<input class="std_input" type="text" id="name" name="name" size="40" maxlength="35" value="" />
<label for="to">Friend's email: </label>
<input class="std_input" type="text" id="to" name="to" size="40" maxlength="35" />
<label for="subject">Subject: </label>
<input class="std_input" type="text" id="subject" name="subject" size="40" value="Check this out!!" />
<label for="message">Message: </label>
<textarea id="message" name="message" readonly="readonly" rows="18" cols="40">Custom message</textarea>
<input type="submit" name="submit" class="form_but" value="Submit"/>
</form>
</div><!-- #tellfriend -->
Scripts used:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
$('#tellfriend').hide();
$('#sendMessage').click(function(e) {
$("#tellfriend").fadeToggle('fast');
});
});
</script>
Sendmail.php:
<body>
<div id="thankyou">
<h1><strong>Thanks for sharing!</strong></h1>
<p>Back to homepage</p>
</div>
</body>
Yeah, I'm a novice here. Thanks for your help and patience.
You need some server side code to send the mail. Just having a form doesn't do anything for you
So to send it on that click:
$('#sendMessage').click(function(e) {
var $form = $('#tellafriend_form');
$.post($form.get(0).action, $form.serialize(), function(data){
//something on success
})
$("#tellfriend").fadeToggle('fast');
});

Categories

Resources