I would like to auto-submit a form on my page after a short delay based on a variable value (which is present in the URL string, as well as declared by another JS script). Not sure what the best practice way to do this would be?
MY PAGE URL:
http://www.domain.com/mypageaddress?var_1=value1&var_2=value2&var_3=Returning%20Applicant&var_4=value4
So when var_3=Returning%20Applicant , the form should submit without user input (and I would love a 1-second delay built in before that auto submit). Another script on the page also declares a JS variable for that same condition that might be easier to work with than the query string - JS var/value pair returningapplicant=1 is the same as the URL string var_3=Returning%20Applicant that I'm trying to target. This is powered by a third party tool which I don't 100% understand, but they say that this JS variable can be referenced.
I would love some sample code that I could try for this function. Any help much appreciated and here's the extra info that will probably be needed for the JS script:
FORM ACTION URL
<form method="post" action="https://www.tfaforms.com/responses/processor" class="hintsSide labelsLeftAligned" id="tfa_0">
CURRENT FORM SUBMIT ELEMENT
<div class="actions" id="tfa_0-A"><input type="submit" class="primaryAction" value="Next"></div>
-in js
Wait for the window to load.
document.onload = function() {}
Evaluate the url with the condition/s you describe. /
If the condition/s are met submit the form after waiting one second.
if (window.location.href.match('var_3=Returning%20Applicant')) {
setTimeout(function() {
//submit form
document.forms["your-form"].submit();
},1000);
}
Are you doing anything if something doesn't pass the conditions?
Your asking a whole bunch of stuff at once but that's the gist of what you're looking to do. I'd probably parse the url params and evaluate them individually, validate the form, etc... if I were serious about this. Hopefully this can get you started. Good luck.
Related
Updating because I have changed the implementation to something (somewhat) more successful.
I'm trying to implement the Invisible Recaptcha in our system. We are using dynamically generated forms, so, I'm going the route of programmatically invoking the challenge. I have this code to get the API:
<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
Just before drawing my form, I inject the captcha div:
form.fields.push({
html: '<div id="g-recaptcha-div" class="g-recaptcha" data-sitekey="<mykey>" data-callback="myCallback" data-size="invisible"></div>',
type: 'html'
});
When my form is drawn, I then call the render function:
recaptcha_id = grecaptcha.render(
'g-recaptcha-div',
{
'data-callback': _settings.form.submit
}
);
When the form appears, he "protected by reCAPTCHA" logo box shows up over my submit button.
In my submit function, I do some form validation, and then 'execute' the reCaptcha:
grecaptcha.execute(recaptcha_id);
And then continue on with my submit. So far, exactly once I have seen the reCaptcha challenge ('pick out images with a storefront'), at which point the g-recaptcha-response value was inserted into my form submission, and I see it in the parameters passed to my PHP function.
But, most of the time I do not see the challenge, and there is nothing in the g-recaptcha-response parameter, so my PHP validation fails. A couple of questions:
1) My assumption about the challenge not showing up all the time is that the Google logic only requires it when "conditions are right". If that is the case, what am I to do when it doesn't show up, at which point the g-recaptcha-response parameter is there with no value - do I just ignore it at that point, assuming that no value means ok?
2) Is there any way to "force" the challenge to show up, if only to make me feel better about the whole thing working, and to test my handling of a response?
3) I have tried calling grecaptcha.getResponse(recaptcha_id) after grecaptcha.execute(recaptcha_id), but that doesn't return anything. It would be easier/better for me to process the reCaptcha in my client.
Any answers appreciated. I may resubmit this as a new 'Question' since this one has been around a while.
First question after starting with netbeans and wamp server 2 days ago. Only have some desktop vb background, so my jargon may be off. In vb I would want to set the focus on a control.
I have a long, as in a lot of scrolling, webpage form in html that displays the way I want it. There are about 300 controls, almost all checkboxes.
When the Submit button is clicked at the bottom of the form I want to find any incomplete data, scroll the page to that control and give the user a message so I don't insert unfinished records.
How do I do that?
I think you need to validate data with javascript and with a function to do scroll. Check this:
scroll to div ajax/javascript
In the form, add the 'required' attribute to each input tag.
EX:
<input type="text" required>
When the form is submitted, the first input tag with the 'required' attribute will be scrolled to, and the user will be notified.
What you are looking for is called validation. You should validate data on the server with PHP to make sure that the data meets your defined criteria (since the data could come from a manipulated form and users can deactivate javascript). You should also look into escaping data, for example with mysqli_real_escape_string to prevent SQL injection (an attack where a malicious user enters SQL statements in your form to alter/expose data in your database). And you should sanitize your data.
But that is all server-side. What you also want is to have a good user experience and not even send data to the server unless is is valid. This is done with javascript on the client side. The upside is: Immediate feedback without a page load. But it has little to do with security since it's easy to manipulate that or turn javascript off.
I would recommend using jQuery and then a plugin like jQuery Validation. And for the scrolling part you could use jQuery scrollto. You could combine those two with a callback from jquery validation. For example (just a quick and dirty example):
$(".form-selector").validate({
invalidHandler: function(event, validator) {
// 'this' refers to the form
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted'
: 'You missed ' + errors + ' fields. They have been highlighted';
$("div.error span").html(message);
$("div.error").show();
// Now scroll to the first error message
var first_element = validator.errorList[0].element;
$(window).scrollTo(first_element);
} else {
$("div.error").hide();
}
}
});
But the best thing would be to start with a jQuery tutorial and then dig into that.
I'm hoping there is a simple solution to this, or else its possible AJAX time!
I WAS using ClickBank. I had a simple button on my page. That sent the form data to a script, I processed the data, and then added a redirect at end of script to jump to the "pay" link. Nice n' easy
But now I'm switching to "Click2Sell" ... and they have a direct href to their site.
Now I COULD use javascript to read the form data, place it into their "cp_" prefix, and create a super long (about 400 chars) query string and send that to their server, then re-read the data at the IPN stage ...
?country=UK&area=essex&desc=This is the data entered by the user 'whatever'
(but that leads to a little fact that certain parts might need to be escaped(?) such as the spaces and the " ' " or whatever other symbol they enter)
So I devised this method:
<javascript>
function send_data(){
document.user.submit();
return true;
}
</javascript>
<div name="noshowdiv"><object name="noshow"></object></div>
<form method="post" target="noshow" name="user">
<input type="text" name="country">
<input type="text" name="area">
<textarea name="desc"></textarea>
</form>
<img src="xxx" onclick="return send_data();">
In a nutshell, when the button is clicked, it jumps to the function, and submits the form data to my script, and then returns to the hyperlink to submit the second form via the hyperlink.
Two problems: Firstly, the data returned by my script is opening in a new tab rather than the <div>, (I suspect 'cos the submit option loses track of the sending window) and also, I need to get a response from my script which I can then append to the href link.
For example, if the form records the user's data on line 5 on my server, the script will return "id=5" I would then make the hyperlink "click2sell.asp?cp_id=5"
As I've said, I suspect this is a job for Ajax and a HttpRequest ... which is a whole new area to me. Any advice?
For the first problem, it opens a new tab because you have target="no-show" on your form.
For the second problem, if you want to use Ajax, I recommend you use jQuery, it will simplify a lot of the code.
But the best option is probably that you completely remove the direct link to click2sell, and just add a submit button to your form. Post the form to your site, which will store whatever info it needs, assigns an ID, and builds the click2sell URL with the ID in one of the parameters, and redirect to it.
Now how you would do that depends on what server-side language you use.
(I think) I have managed to find a work around, which was using the first option to reconstruct the href link. I couldn't iterate through the form as there are values that don't need to be forwarded. First I get the value, load it into a variable, then use an encode function I discovered online, and then reassign to the form ...
var cp_cc=document.getElementById('cc').value;
var cp_cs=document.getElementById('cs').value; // plus 10 other values
var str='&cp_cc='+encodeURIComponent(cc)+'&cp_cs='+encodeURIComponent(cs)+ // etc
var send_str=document.getElementById('c2s_bn_lnk_36288').href;
document.getElementById('c2s_bn_lnk_36288').href=send_str+str;
The "no-show" was a slip up in my typing! Alas, the answer given above wouldn't work as the Click2sell button also includes two calls to external JS files - and they give you no idea what they do, but is something to do with initializing the button, (it passes the "36288" to the script to do ???). And whilst using "Location: ..\n\n" on my server would redirect to their site, it wouldn't action whatever those external files do. (OK, so I didn't give the full facts, but I didn't want to increase the post size with data I felt didn't relate to problem)
** Now got to amend the listening scripts such that rather than set the ID number up front then jump to C2S, it now waits for C2S to send the data back to me and then sets up the database!!
My page conisits of x amount of forms. One for each database entry. The user can change the data and save the individual item back to the database.
But where I am stuck is with a SAVE ALL button. Can you post multiple forms?? I am pretty certain you cannot with php, so I'm looking at javascript to solve my problems. Specifically:
document.forms.submit();
All that is going on is happening on the same page (i.e. when a form is submitted it puts a value at the end of the URL (foo?delete=true), and there is php at the top of the page which does something like: if delete is true -> delete field... else carry on as normal
My brain is saying I should do something like: (where $size is a count of how many forms there are)
<p onclick="saveAll('.$size.')">saveall</p>
and the javascript function:
function saveAll(size) {
for(i=0;i<size;i++)
{
document.forms[i].submit();
alert(i); // for testing purposes
}
}
The result of this was that the page started to refresh, then a popup with "0" came up, then the page refeshed and nothing else happend.
Is what I need to do even possible? If so, hoooww?
Thanks
I see 2 ways to escape this situation:
Put all your fields to one form
Submit your forms using AJAX and after last form submition is complete go to next page if needed.
But are all forms in the same page???
If yes I think the only way out is the ways suggested by Konstantin Likhter.
Otherwsie place each form in an IFRAME, then place all these IFRAMEs in the same main page, then using your code from the main page you can submit all the forms at once.
I am currently using a javascript code to make an entire row in my table clickable. Once the row is clicked a function is ran, I am wondering what I can use to redirect to a PHP page and preferably send a post variable along with it. My guess is AJAX but I am not sure how or if it would work.
Javascript
function DoNav(theUrl) {
document.location.href = theUrl;
};
HTML
<tr onclick="DoNav('myphpscript.php');">
I have access to jQuery so that is also an option. Any help is appreciated, Thanks!
If you need to POST the data (not use GET), One easy option is to create a form element on the fly, attach input elements with the values you need and submit it. You can do that like so if you use jQuery:
$(function() {
$('tr').click(function() {
var mail_id = /* get the mail id of this row... not sure where since I dont' have the HTML */
$('body').append('<form method="post" action="myphpscript.php" id="donavform" style="display:none;"></form>');
$('#donavform').append('<input type="hidden" name="mid" value="'+mail_id+'" />');
$('#donavform').submit();
});
});
Hope that makes sense. If not, let me know! It's, okay...
Explanation:
The very first line is a jQuery shortcut way of saying "when the document is done loading..." So, when the page is done loading, I'm going to attach an event listener to all elements in the document. When one of those elements is clicked, we can then extract the mail id (and whatever else you need) that is in relation to that particular table row. So, if you had HTML like this:
<!-- 8435 is the mail ID in this example. -->
<tr id="row3">8435</tr>
Then we could extract the mail_id variable like so:
var mail_id = $(this).html();
Now, we are going to attach a hidden form element to the end of the body of the HTML (it doesn't really matter where we put it since it is hidden... so, the end is fine). In this form element, we set the method to POST and the action to whatever php file you need to POST to. I also set an ID so it's easily referred to in the next step.
I'm now going to select the newly-created form element using its ID and I'm going to append a new hidden input element to it with the appropriate name value pair.
$('#donavform').append('<input type="hidden" name="mid" value="'+mail_id+'" />');
Finally, I'm going to use the jQuery JavaScript submit method to trigger the submit event on the form. This is basically equivalent to pressing the 'submit' button on a normal form.
Try it out, it should work flawlessly.
If you're going to a new page, just submit the form as usual. Put the data in form fields (hidden if required). No need to Ajax, jQuery or any other magic unless you want to stay on the same page and post in the background.
If the amount of data is not ridiculously large, use a query string...
<tr onclick="DoNav('myphpscript.php?key=value');">
Or if you need a natural HTTP post, you can programmatically submit the form with Javascript...
onclick="document.forms[0].submit();"
You could send the data along in a cookie. There's a nice jQuery plugin that helps with setting cookies in the jQuery namespace.
http://plugins.jquery.com/project/cookie