I want to write a simple Greasemonkey script, to complete and submit this form every time the page loads.
Enter a predefined email address (email#gmail.com) into the script, then submit it each time
<div class="col-md-4">
<label for="Content_C001_LI_02_txtEmail">Send proof of delivery email to:</label>
</div>
<div class="col-md-5">
<input name="ctl00$Content$C001$LI_02_txtEmail" type="text" value="email#gmail.com" id="Content_C001_LI_02_txtEmail" class="form-control" onkeypress="return clickButton(event,'Content_C001_LI_02_btnSend')"><span id="Content_C001_ctl23" style="display:none;"></span>
</div>
<div class="col-md-3">
<button onclick="if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate('LI_02'); __doPostBack('ctl00$Content$C001$LI_02_btnSend','')" id="Content_C001_LI_02_btnSend" type="button" class="btn btn-primary btn-inline-label" validationgroup="LI_02">Send</button>
</div>
Once the form has been submitted, this piece of code changes.
So I will need to figure out how to only run the script if it hasn't already been submitted before.
<div id="Content_C001_ctl00" class="alert alert-success" style="display:none;">
to
<div id="Content_C001_ctl00" class="alert alert-success">
Proof of delivery has been successfully emailed to email#gmail.com <br>
Your help is much appreciated! :)
Something like this maybe?
document.addEventListener ("DOMContentLoaded", checkSubmitEmail);
function checkSubmitEmail(){
var myEmail = 'vns#gmail.com';
// 1- check if email has been submitted
var submitted = document.getElementById('Content_C001_ctl00').innerHTML.startsWith('\nProof of delivery has been successfully emailed to ' + myEmail);
// 2- if not continue
if (!submitted){
// 3- fill in email
document.getElementById('Content_C001_LI_02_txtEmail').value='' + myEmail;
// 4- click button
document.getElementById('Content_C001_LI_02_btnSend').click();
}
}
It's hard to tell precisely, but a cookie may be what you are looking for here.
MDN's documentation on the JS Cookie interface
Related
UPDATE: See, The form is getting submitted but at the wrong URL! If you are here to teach how to set attributes according to user's action, please don't try to help because I know that sheet!
I am working on Laravel and I have One form with Two submit buttons. I want to submit form according to the button clicked by the user.
I already tried editing Button tag and did almost everything that is given on other answers but nothing seems to work!
Here is the Form code.
<form method="POST" class="form-material" id="form1">
{{ csrf_field() }}
<div class="form-group">
<input type="email" id="email" name="email" class="form-control" placeholder="E-mail Address" required/>
</div>
<div class="form-group">
<input name="password" id="password" type="password" class="form-control" placeholder="Password" required/>
</div>
<div class="form-group actionButtons">
<p data-action="form1Register" class="btn btn-md btn-info actionButton">Create Account</p>
<p data-action="form1Login" class="btn btn-md btn-outline-info hidden-md-down actionButton">Login</p><br>
<small>By Signing up, You agree to Terms of Service.</small>
</div>
</form>
And Yeah, here is the bit of Jquery I am trying to implement.
$(".actionButton").click(function() {
if($(this).data('action') == 'form1Login'){
$('#form1').attr('action','{{ action("SessionController#store") }}');
$('#form1').submit();
} else if($(this).data('action') == 'form1Register') {
$('#form1').attr('action','{{ action("UserController#store") }}');
$('#form1').submit();
} else {
alert('Oops! Something went really wrong!');
}
});
I am not using <button> tags because it submits the form and there is no way to stop it I think. I already tried giving it a type='button' attribute but it is not working too! It still submits the freaking form!
Is there anything I am missing? Because I am using the same thing on one of the other systems but it is working fine there!
$(".actionButton").click(function(e) {
e.preventDefault();
if($(this).data('action') == 'form1Login'){
$('#form1').attr('action','{{ action("SessionController#store") }}');
$('#form1').submit();
} else if($(this).data('action') == 'form1Register') {
$('#form1').attr('action','{{ action("UserController#store") }}');
$('#form1').submit();
} else {
alert('Oops! Something went really wrong!');
}
});
//you should prevent the default action of action button
Solved!
Special Note for Laravel Users!
The form was getting submitted to the right URL. But as I was using the laravel's Default validator, It was redirecting me back to the URL from where the form was located.
So, If you are laravel user and want to submit a form to the different URL the make your own custom Validator so that you can redirect back to some different URL.
Thanks everyone for helping me solve the Issue!
I'm creating a new website for my company using mobirise. The mobirise templates come with predesigned email forms that were created using formoid. When a user uses the email form to send an email the information is sent to formoid and then formoid sends the information to me at my email address. All of the coding in the email form is behind the scenes, so I can't actually see what it's doing.
On one of my forms I need to have the page redirect to another page where users will be able to upload a file to my server using another script. I have contacted mobirise to ask them if they could tell me how to redirect after the user clicks the submit button, but they said I had to contact formoid. So far I haven't gotten a response back from formoid so I thought I would try to look for a solution on my own.
I have tried adding javascript code to the coding on the page, but as I said, most of the coding of the form is somewhere behind the scenes and I can't figure out exactly which coding is performing the form's submit action.
What I was hoping for is a suggestion about how I could add some additional JavaScript coding that would watch for the submit button in the form being clicked and then redirect the page. I'm not positive this is even possible, but I figured that if anyone would be helpful it would be the people who post solutions here. I'm rather new to JavaScript, so I'm not sure where to start and I don't want to experiment for hours and hours and get frustrated because nothing is working.
So, if anyone can give me an idea here I would greatly appreciate it. Below is the coding for the form in case it helps:
<div data-form-alert="true">
<div hidden="" data-form-alert-success="true" class="alert alert-form alert-success text-xs-center">Thanks for uploading your audio file!</div>
</div>
<form action="https://mobirise.com/" method="post" data-form-title="FTP Upload">
<input type="hidden" value="NTcF3QgiRzQHgm5xv+UnYlBBGPR27Q6NZwj5EPuecwUNxuL8vndMlaaoM2PpzlkXlNaFBrtr2mU+CfZxfef01mKMpaQkezUMhyWXZgieem0/pt/V/nU0iUetLNqsEpj7" data-form-email="true">
<div class="row row-sm-offset">
<div class="col-xs-12 col-md-4">
<div class="form-group">
<label class="form-control-label" for="form1-3o-name">Name<span class="form-asterisk">*</span></label>
<input type="text" class="form-control" name="name" required="" data-form-field="Name" id="form1-3o-name">
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="form-group">
<label class="form-control-label" for="form1-3o-email">Email<span class="form-asterisk">*</span></label>
<input type="email" class="form-control" name="email" required="" data-form-field="Email" id="form1-3o-email">
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="form-group">
<label class="form-control-label" for="form1-3o-phone">Phone</label>
<input type="tel" class="form-control" name="phone" data-form-field="Phone" id="form1-3o-phone">
</div>
</div>
</div>
<div class="form-group">
<label class="form-control-label" for="form1-3o-message">One or more files are being uploaded to the WORDsmart server. </label>
<textarea class="form-control" name="message" rows="7" data-form-field="Message" id="form1-3o-message"></textarea>
</div>
<div><button type="submit" class="btn btn-info">CONTACT US</button></div>
</form>
in this case, I would recommend you to use another form. As far as I know form wouldn't work if you would bring any changes to form of Mobirise. Just use another form creator and implement it manually to Mobirise's project after publication to the local folder (the project of Mobirise).
You can read tutorial about publishing here: https://mobirise.com/help/local-host-369.html
Just change the action field in the first line of the form, to the page were you would like to send the data.
The next hidden input line with the public key may be deleted also.
We have a custom registration form on our wordpress website. we are using google recaptcha and input Human question field to stop spam registrations but still the spam registrations won't stop.
Could anyone suggest what exactly needs to be done?
The Registration form code is as follows.
The JS code has 2 functions one for Recaptcha and another for Validate the "Question field".
The register submit button is by default disabled and gets enabled only when the recaptcha call backs the function.
function recaptchaCallback() {
$('#submitBtn').removeAttr('disabled');
}
function validateForm() {
var a = document.forms["registerform"]["question"].value;
var b = document.forms["registerform"]["user_login"].value;
var c = document.forms["registerform"]["user_email"].value;
if (a == null || a != "5") {
alert("Bitte fülle alle Felder richtig aus");
return false;
}
}
<script src="https://www.google.com/recaptcha/api.js"></script>
<form name="registerform" onsubmit="return validateForm()" method="post">
<div class="form-group">
<label style="font-size:18px;">Register</label>
</div>
<div class="input-group input-group-md">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" name="user_login" class=" form-control" placeholder="Username">
</div>
<br>
<div class="input-group input-group-md">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="email" name="user_email" class="form-control" placeholder="E-Mail">
</div>
<br>
<input type="hidden" name="redirect_to" value="Redirect_URL">
<div class="input-group input-group-md">
<span class="input-group-addon"><span class="glyphicon glyphicon-question-sign"></span></span>
<input type="number" name="question" class="form-control" placeholder="2+3 = ?">
</div>
<br>
<div id="captcha" class="form-group">
<div class="g-recaptcha" data-sitekey="6LdOGg4TAAAAAJsTt_ZGoK67cyF277uIYwWRxJPW" data-callback="recaptchaCallback"></div>
</div>
<div id="pass-info" class="clearfix"></div>
<button class="btn_full" id="submitBtn" disabled>Register</button>
</form>
The whole thing works fine, Recaptcha and Human question field. When we manually test registerform, we can't register without accepting the Recaptcha and inserting exactly the value to process the form.
But this is not preventing automatic spam bots which registers on our site.
Is there any other way through which these spam bots are registering ?
Also we disabled "MEMBERS CAN REGISTER" in the admin dashboard.
Are we doing anything wrong?
Thanks in advance for the feedback and suggestions.
you need to do validate it in the backend, in the front end, validation can be bypassed.
store the ip address for each registration.dont allow registeration from the same ip within some period of time, but user can use some proxy tool which changes the ip address every second.
validate the email, foreach email send the validation email to registered email address, and if the user click on the activation click, activate the account, otherwise no.
You probably forgot the server-side part of recaptcha.
A robot should not be able to pass it multiple times,
See this complete tutorial from google : https://developers.google.com/recaptcha/intro
You must configure a key on the server, as explained, that is secret, and which google will send to you if the captcha is valid.
I have PHP written for the form submit:
if($_POST['submit']) {
$recipient="test#gmail.com";
$subject="A Hooray moment has been shared with you";
$sender=$_POST["sender"];
$senderEmail=$_POST["senderEmail"];
$message=$_POST["message"];
$mailBody="Name: $sender\nEmail: $senderEmail\n\n$message";
mail($recipient, $subject, $mailBody, "From: $sender <$senderEmail>");
?>
Originally the javascript was written just for revealing on the click rather than including a bit to set the original setting to 'hide' the .done div. At that time there was also a CSS code to set the default .done display to none. That original javascript is below.
$( ".button" ).click(function(ev) {
ev.preventDefault();
$(".done").fadeIn('slow');
});
I now have javascript written to reveal the DIV after clicking the submit button, without a CSS display:none setting. This is the current Javascript:
$('document').ready(function() {
$('.done').hide();
$('.button').click(function(e) {
$('.done').show();
//e.preventDefault();
});
});
When I fill out the forms and hit the submit button the PHP will load but the div won't appear. I get a confirmation email (like I want) but no div. When I manage to get the div to appear the PHP portion stops working (hitting the submit button will reveal the hidden div but the form doesn't actually submit and I receive no email). When the PHP portion works and I get a confirmation email I then the .done div never reveals. Below is my html for reference.
I'm looking for a way to make the div appear and the form submit (both events) after the submit button is clicked. It makes sense to write it all in PHP (or JS) but I'm not familiar enough with PHP to figure that out. Thanks in advance for any help.
<div class="col-md-6 col-md-offset-3">
<div class="done">
<h2>HOORAY!!!</h2>
<img src="http://usatftw.files.wordpress.com/2013/11/824607200.gif?w=1000" alt="Touchdown dance" style="width:500px;height:400px; margin-top:0px; padding-top:0px;"></img>
</div>
<div class="form-group col-md-6 col-md-offset-3">
<input type="radio" class="form-control radio" id="radio1"/>OMG! The greatest thing happened today...<br />
<input type="radio" class="form-control radio" id="radio2"/>You wouldn't believe what happened...<br />
<input type="radio" class="form-control radio" id="radio3"/>No s*** you'll never guess what happened...<br />
</div>
<form method="post" action="testemailform.php" id="form">
<div class="container1">
<input name="sender" placeholder="Name (Optional)">
</div>
<div class="container2">
<input name="senderEmail" placeholder="Your Email (Optional)">
</div>
<div class="container3">
<textarea rows="5" cols="50" name="message" placeholder="Tell me what happened!"></textarea>
</div>
<div class="button">
<input type="submit" name="submit">
</div>
</form>
</div>
instead of javascript, use php to show div when form is submitted.
so create new php variable $css that hold stylesheet code.
<?php
//keep variable blank when page is loaded first time
$css = "";
if($_POST['submit']) {
//add css to variable when form is posted
$css = "display: none;";
...your email code goes here...
}
?>
Now in html, print $css variable.
<div class="done" style="<?php echo $css; ?>" >
When you submit a form (as you are doing) the page reloads.. ..so any JS functionality before this is pointless, as you are expecting Javascript to remember that on the last page, you clicked a button...
Use PHP to set a variable 'after' the form has submitted, that can then be used to determine if the extra <div> gets displayed ot not.
My landing page has two steps (one for selecting an option from a dropdown menu and pressing 'send', and one for entering your email and pressing 'send'). These steps appear to be controlled either by javascript or html5, something I am not used to. I need to add a third "step" to the system.
Here is the site link: you will see that after selecting an answer and entering something in the email field you are back to the first selection.
the section of code in index.html appears like this:
'<!-- Step 1 -->
<div class="steps step-1">
<p>STEP 1: Answer this question</p>
<form action="#" method="post">
<div class="select-holder">
<label>Who is giving this away the awesome thing that you're about to download?</label>
<div class="select-wrap">
<select name="" >
<option selected="selected" value="Select Your Answer">Select Your Answer</option>
<option value="LeadBrite, Duh!">LeadBrite, Duh!</option>
<option value="Lady Gaga">Lady Gaga</option>
<option value="Santa Claus">Santa Claus</option>
</select>
</div>
</div>
<input type="submit" value="Submit Answer" class="submit-button" />
</form>
<div class="contest-ends">
<p><span>Contest Ends</span></p>
<p>Month 00, 00:00 AAA</p>
</div>
</div>
<!-- END Step 1 -->
<!-- Step 2 -->
<div class="steps step-2">
<p>STEP 2: Your details</p>
<form action="#" method="post">
<input type="text" class="field" value="Enter your email address" title="Enter your email address" />
<input type="submit" value="Send" class="send" />
</form>
<div class="contest-ends">
<p><span>Contest Ends</span></p>
<p>Month 00, 00:00 AAA</p>
</div>
</div>
<!-- END Step 2 -->'
As I said, I want to add a step three but I do not know how to move forward. The source files include an HTML5 file and others that I believe I'd have to connect step-3 to in order for it to function properly.
I appreciate any help. Thanks.
Hoping to simplify this by creating a sample to work with. If you check out http://jsfiddle.net/fgAUQ/, you can see the form listening for the submit during the email question.
$(document).on('submit', 'form', function (e) {
// Check email address
// if email address ok
$('.step-2').hide();
$('.step-3').fadeIn(800);
e.preventDefault();
// else
// alert
// e.preventDefault();
// end if
});
You'll still need to follow this through with storing / processing the email and handling the form upload.