I am facing a problem and I am already stuck for ages, hopefully one of you can help me.
The Problem:
- I created a form in HTML and I connected Jquery to it in order to validate whether input is correct (also to give the user feedback whether answer is correct). When individuals press the submit button the information is also send to my database in phpMyadmin (this works.
The problem is, how can I make sure that the information is only send to my phpMyadmin database when al the input is correct? I know with jquery when all the input is correct but how can i connect this information to my php code?
To be more specific i created a javascript/ jquery variable like correct_answers which is 13 when all questions are correct (as I have 13 questions), but how can I send this information (which is in correct_answers) to php?, so that I can create an if condition within php in order to send the info yes or no?
Thanks in advance!!
You can listen for the form submit event to wrap your validation logic with. If the form passes validation do nothing and it will submit normally, if not display a notice and prevent the form's submission:
$('#myFormId').submit(function(e){
var failed = false;
// logic for validatiom
// use event object to prevent submission
if (failed) {
alert('error in form');
e.preventDefault();
}
});
client side:
<input type="hidden" name="correct_answers" id="correct_answers" value="0">
<javascript>
checkForm = function(){
...
...
$('#correct_answers').val = 13;
form.submit(); //-- or ajax();
});
server side:
<?php
var_dump($_POST['correct_answers']);die('nice!');
Related
I have a php form that works perfectly. However, when the form submits, I want to display a modal and take the user back to the homepage. I have looked this past two hours online but have found no conclusive evidence. My current code is;
if($sentMail) //output success or failure messages
{
?><script>
$(function() {
$("#thankyouModal").modal();
});
</script>
<?php
}else{
die('Could not send mail!');
}
The form collects data then sends all data as an email. I have tried using only php, jquery, amongst everything else. I simply want a modal that says a brief thank you, your form has submitted whilst re-directing the user to the index.html page. Does anyone have any ideas?
Regards,
Michael
If you want to show the message while the form is posting (whether or not it will succeed), use jquery to swallow the onSubmit() event.
$('form').on('submit', function(e){
e.preventDefault();
$("#thankyouModal").modal();
$('form').submit();
});
If you care about if the email is successful, pass a variable back to the view and conditionally show the modal, but this will be serverside validation (will only know after form submission and re-rendering of the view). Otherwise look into doing an asynchronous post with $.ajax
UPDATE 2
Looks like I am having trouble accessing document elements (including form) from within the callback (onSubmit function) registered with invisible reCAPTCHA. Updated code below.
In browser console, I get the error message below when JS reaches "document.getElementById("info_form").submit()" call in JS:
10:26:47.556 TypeError: document.getElementById(...).submit is not a function 1 selector.php:13:9
The image CAPTCHA when it comes up is solved correctly and alert dialog displays it correctly. But, I can't submit form explicitly within callback to my backend. Please note that as per Google instructions in link below in message, I need to call preventDefault() as specified below. If I delete it, the reCAPTCHA flow is interrupted.
UPDATE
So, it looks like the "event.preventDefault();" is the key line here. If I have it, the reCAPTCHA (i.e. the image selection grid) gets displayed and I can interact with the widget. However, the POST parameters don't get sent. If I comment out the preventDefault(), the POST goes through correctly - BUT the reCAPTCHA flow does not start. This means, that while the other POST params get sent, the important reCAPTCHA data does not get sent since that flow is not executed at all.
So, how do I go about this? Looks like I need to call "preventDefault" before "grecaptcha.execute()" to enable reCAPTCHA flow (as Google also shows in their snippet). But doing so, messes up the POST data somehow. I am also explicitly calling "document.getElementById("info_form").submit()", but not helping. Any ideas would be great. Thx!
Also, Google's invisible reCAPTCHA is a relatively new construct and still in beta. Could be some core issues re: that. What we are all regularly used to is their regular reCAPTCHA where we see the "I am not a robot" checkbox. Invisible reCAPTCHA does not have that first line UI widget - and only steps you up to image CAPTCHA if nedeeded.
ORIGINAL POST
I need your help in figuring out why my 1) button onclick = validate function and 2) my form POST cannot co-exist.
Specifically, if I comment out the "document.getElementById('submit').onclick = validate" below, my form POST goes through successfully. However, if I register the validate function, the form POST does not work. Google tells me (Google link provided below) that if I want to validate input before performing invisible reCAPTCHA, I need to call "grecaptcha.execute();" during button onclick event.
So, my general question is, after executing (or within) the button onclick = validate function, how I can make sure that the info_form is submitted normally via POST so I can see it in my backend PHP? Not necessarily that the POST "itself" isn't working - but the parameters that would get submitted via POST may be getting messed up somehow - just a thought.
Source code and further code specific comments below. Also, please note that I already have the other two forms of reCAPTCHA binding working in the Google link. The "grecaptcha.execute()" variant is the only one I am having trouble with.
<?php
include 'msg_recaptcha.php'; // use the debugMessage output
?>
<html>
<head>
<script>
function onSubmit(callbackInput)
{
var message = "g-recaptcha-response token successfully received.\n";
message += "Token = ";
message += callbackInput;
alert(message);
document.getElementById("info_form").submit();
}
function validate(event) {
event.preventDefault();
if (!document.getElementById('firstname').value) {
alert("Please enter name");
} else {
grecaptcha.execute();
}
}
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form id='info_form' action="invisible_recaptcha_form.php" method="post">
First name: <input id="firstname" name="firstname">
Second name: <input id="secondname" name="secondname">
<div id='recaptcha' class="g-recaptcha"
data-sitekey="<Site key (public) from Google>"
data-callback="onSubmit"
data-size="invisible">
</div>
<button id='submit'>submit</button>
If I comment out the "onclick = validate" line below, my server PHP will receive the form details via POST - including first name. However, I can't comment it out in final solution, since I need to run the recaptcha "execute" function in validate() function as per Google's instructions https://developers.google.com/recaptcha/docs/invisible. The problem with Google's instructions is that, they don't show how to do the POST along with their grecaptcha.execute() requirements - and I would need both to ensure the payload from the reCAPTCHA operation gets sent in the POST to my backend, so that my backend can talk to Google server's to validate the reCAPTCHA payload.
<script>
document.getElementById('submit').onclick = validate;
</script>
<div id="debugmessage"><?=$debugMessage?> </div>
Thanks everyone!
You have to change your onSubmit JS function to execute form submit after recaptcha validation.
function onSubmit(token) {
alert('thanks ' + document.getElementById('firstname').value);
document.getElementById("info_form").submit();
}
UPDATE
When you call event.preventDefault() at your onsubmit eventHandler, you say to the browser to not execute form submit by default and that YOU will do it when you need.
I can see you are accepting parameter into validate function
function validate(event) {
event.preventDefault();
if (!document.getElementById('firstname').value) {
alert("Please enter name");
} else {
grecaptcha.execute();
}
but you are not passing any parameter to validate
document.getElementById('submit').onclick = validate
that is the reason its giving you error.
modify your validate function to take no argument. I'm thinking why you need to take argument into validate function when you are not using it anywhere?
I'm using a HTML form to allow a user to upload some files to a java servlet and start some analysis. When the user clicks submit I use a javascript function to do some quick validation on the form i.e. have they selected the right options, entered a valid email etc.
The form data is then passed to the doPost() method in my servlet where I do some more complex checking for errors in the input data. After this the user is either forwarded to an error page or notified that the job has been started.
What I would like to do is display a progress page while the error checking is taking place in the servlet. It seems I can't forward the user to the progress page in the servlet as this commits the response and I can't carry on the checking and then later forward the user to the relevant page. This is explained here.
I think the answer might be to display the progress page when the user clicks the submit button and before the form data is sent to the servlet. This could be done in the javascript validation in the form. So far my attempts at this have failed. I think I'm misunderstanding something!
I've tried the advice listed here to use window.location.replace(...) but it doesn't seem to work. I've also tried using a button instead of a submit input type and defining the form action in the javascript as shown here.
My javascript validation function is
<script language="JavaScript">
<!-- // ignore if non JS browser
function Validator(form) {
var error = "";
if (form.family.value == "") {
error += "Please upload a family file\n";
}
if (error != "") {
alert(error);
return (false);
} else {
window.location.replace("http://stackoverflow.com");
return (true);
}
}
and my form is submitted using <form method="POST" enctype="multipart/form-data" action="runDupliPHY.do" onsubmit="return Validator(this);"> from a submit input.
Any examples of how to show a progress page before submitting the form so the user sees the progress page while the servlet processes the form data would be great.
I am trying to add some elaborate javascript validation to a django admin form. When the user clicks any of the three types of save buttons (save, save and continue, or save and add another) my javascript will run. Part of what it does is make an ajax call to provide special checks before posting. When I capture the click event using jquery of the add and continue button, sometimes I stop the form being submitted and sometimes I allow it to be submitted. Sometimes, only warnings are thrown, rather than errors, and then the user can decide that the form should continue to be submitted.
When it is finally submitted in the end, it needs to be submitted using the process dictated by the button they clicked originally. I found that adding JS of form.submit(); only submitted according to the save button, taking the user back to the model list, even if the user originally clicked the save and continue button.
I changed my JS from form.submit(); to capture the button itself and to trigger a click of it that bypasses the validation if the user has chosen to disregard the warnings. But still it returns to the model list after saving, even if the clicked button was save and continue.
What is the Django admin doing client side to dictate a save and continue instead of a plain old save when the user pushes that button?
So here is the short, summarized version of my question...
How can I, using Javascript (including jQuery), force a Django admin form submission that will:
save and continue
save and add another
Thanks in advance for any assistance.
I figured this out. I had to create a hidden field with the name of the button that had been clicked and the value of the button that had been clicked and submit that field along with the form. Worked great!
EDIT (From 02/2020)
So I originally posted this Q&A years ago and haven't been working with Django for the last few months, but I see that someone wanted my code. Working from memory and a few pieces of code I still have around, it was something like this (which is untested)...
var frm = $('form');
var chosenBtn = frm.find('[name="_save"]');
var btns = frm.find('[name="_save"], [name="_addanother"], [name="_continue"]');
btns.unbind('click.btnAssign').bind('click.btnAssign', function(e)
{
chosenBtn = $(this);
});
frm.unbind('submit.saveStuff').bind('submit.saveStuff', function(e)
{
// Add your own validation here. If the validation fails, you can call:
// e.preventDefault();
// But if it works, no need for that line. If everything works...
frm.append(
[
'<input type="hidden" name="',
chosenBtn.attr('name'),
'" value="',
chosenBtn.attr('value'), // or maybe chosenBtn.text()
'" />'
].join(''));
});
We have a booking form that POSTs to the parent company website. Because this is a different domain we need to implement the GA _linkByPost to pass the GA tracking cookie info across domains.
As the booking form is in a .NET user control it does a postback. On postback we validate, wrap up the booking info, and write a form back to the client with hidden elements required by the target booking engine and add line of javascript to submit the form.
Below is the javascript function I'm using to submit the form:
function postBookingForm() {
var thisForm = document.getElementById('PostForm');
_gaq.push(['_linkByPost', thisForm]);
thisForm.submit();
}
And the relevant form info:
<form id="PostForm" name="PostForm" action="ClientBookingEngineUrl" method="post" >
booking form info in here
</form>
The result is that we fill in the form, hit submit which does a round trip to the server generates a new form and POSTs the info. This all works fine apart from the URL loses the GA cookie info from the query string. If I comment out the form submit line and look at source code I can see the GA cookie info on the querystring - but when posting, I do not see the querystring (using Fiddler).
To clarify:
The above technique works and does what we want with regards to POSTing form data to the booking engine and taking the user there.
If the submit line is commented out you can see the form with the modified action that has the GA stuff appended (using Firebug).
If the form is submitted with the submit line, the querystring info is removed (confirmed by Fiddler).
Am I missing something obvious? Are there some gotchas regarding JS submit, form POSTs and querystrings? Or is there a simple trick I'm missing?
Cheers
EDIT 1
An oddity has occured.
If I alert the form action before and after the _gaqPush then we can see the URL in its before and after state and it's as expected.
alert('1 form action = ' + thisForm.action);
_gaq.push(['_linkByPost', thisForm]);
alert('2 form action = ' + thisForm.action);
Alert 1 shows the pre-modified action and alert 2 shows the action with the GA info.
With the alerts in place it submits WITH the GA info in the query string.
If I comment out the alerts the GA info is NOT in the query string...
I'm starting to think the form or something is not ready so I'm trying it with JQuery's document ready.
EDIT 2
Wrapping the method call in document ready doesn't help. I'm confused as to why action URL is correct AFTER displaying it in an alert but incorrect if I don't alert it.
Answering this for posterity.
The problem is the _qaq (Google Analytics Queue) hasn't had time to modify the form before the call to submit() the form.
The solution is to push a function onto the _gaq object that submits the form so it will happen directly after the form modification is done.
function postBookingForm() {
var thisForm = document.getElementById('PostForm');
_gaq.push(['_linkByPost', thisForm]);
_gaq.push(function() { thisForm.submit(); });
}
I tried a simple HTML page that calls _gaqPush and submits immediately. This also fails.
Adding a 1000ms delay works (for the most part) so I suspect the alerts just gave the GA script time to modify the form.
I'm closing/accepting this as it seems down to submitting the form too quickly after the GA call.