Submit form in background and use information in background - javascript

Basically my user inputs code. I can't check whether this code is valid or not(algorithm is a secret). Therefore I send(with form submit) this code to website that checks it (as $_POST variable). I have managed to do that. But how do I:
-Not display this webpage (user must stay on my webpage!)
-Get part of html from the website, that should not show and use it to fill variables (I know exactly which part of html I am looking for)
Can anyone point in the right direction with this problem..

jQuery has a simple function to add an event handler for submition and a function for posts, if you use the preventDefault function for the submit event, the form's action doesn't get performed, i.e. the side doesn't get reloaded. the html code you want to receive has to be fetched on server side, and transmitted back to the client
$('form').submit(function(e){
e.preventDefault();
$.post("example.com/somefile.php", sentData, function(receivedData){
useTheResponseData(receivedData);
});
});

Related

Is it possible to know if the user pushed the back button to get to a page?

Preferably through PHP, I want to know if the user used the back button to get to a page so that I can save the state of the page that they were on when they left. It is a search page that uses AJAX, so there is nothing in the URL that would allow me to refill the inputs on the page to recreate the form that was previously submitted. Is there a way to use session data and knowledge of if the user pushed the browser back button to fill the input fields that the user filled in?
Yes, but I only know of how to do it in JavaScript. But if you're using AJAX, then you should be able to use this.
When you load your AJAX page, do this:
history.pushState(postData, "Search", pageURL);
Where above, the postData will be your form information you need, preferably as JSON.
Then this event will handle back button events
window.onpopstate =function(event) {
console.log(event); // log the event to the console to see what data you'll need
}
I use this on my personal website and it works fine for me.

Replicate f5 function to link

Is it possible to replicate f5 action to link using jquery? I need to refresh the page and resend data using this link, I have tried :
location.reload(true); or document.location.reload(); or $.f5();
But did not satisfy me.
Steps to reproduce using f5 key :
1. fill form then submit
2. press f5 - confirm box will appear
The page that you're looking for used information that you entered.
Returning to that page might cause any action you took to be repeated.
Do you want to continue?
try using
window.location.reload(true);
if it wont resubmit the form. you have two more options.
Submit the form using ajax after once submitted and resubmit the form and second time refresh the page or clear the form
Or you can keep the post data in some session or in the post array [server side code] and refill the form and resubmit,
Make sure you keep the track of numbers of submit you made since it will cause you trap in some recursion.
BUT why you want to resubmit the form you already have data you can perform both actions,
And if you have to post the form to some other action for second submit you can do the same may be using CURL at server side.
Try this:
window.location.reload(false);
// If we needed to pull the document from
// the web-server again (such as where the document contents
// change dynamically) we would pass the argument as 'true'.
source

Jquery val is not working when try to get a value from a form

I've tried to insert a form in woocommerce product page. I've inserted the form in the product page. When the form is submitted I'm trying to get the email (form input value) and validate it accordingly.
The problem is I'm not able to get the value in some theme using jQuery. I see the form and its elements in firebug. But jQuery is not even working for the click event in variable product (woocommerce product page). Here the form is inside their form (which enctype is multipart/form-data), this might be one reason or if I place the form above the variable product form jQuery it works but it returns empty string.
Even if there is some text inside the form input field, it returns empty string.
Here is the form
Here is the jQuery On submit click
jQuery(document).ready(function() {
jQuery('.mailsub').click(function() {
var subaddress = jQuery('.subemail').val();
console.log(subaddress);
if ( jQuery('.subemail').length > 0 ){
console.log('the element with element_id exists in the DOM');
}
//ajax goes here followed by validation for the email
return false;
});
});
I've tried to check whether it is in DOM or not, so I've used the code, it says the element with element_id exists in the DOM.
I'm able to get the form completely work on twentyeleven and defaults themes. It is working in wordpress defaults themes but not in some other third party themes.
What might be the problem? Any suggestion would be much helpful.
The HTML and code as given should mostly work. I'm guessing that there is another element with the class subemail earlier in the document. When you do jQuery(".subemail").val(), jQuery finds all of the matching elements, but then returns the value (if any) of only the first of them.
Side note: If you step through the code with the debugger built into your browser, rather than doing console.log statements, you can inspect variables as the code is running, which is dramatically more educational, usually.
Side note 2: Some browsers submit forms when the user presses Enter in a text field. In that case, the click event on the submit button may not be fired (since the button wasn't clicked). To reliably hook into the form submission process, use the submit event on the form, rather than the click event on the button.
Side note 3: You've said you're using ajax to validate the email address. By default, ajax calls are asynchronous, which means you cannot use the result from the server to decide whether to submit the form, because you don't get the result until after the submit event handler has returned and (probably) the form has already been submitted. You can make the ajax call synchronous, but that locks up the UI of most browsers while the call is in progress, leading to poor user experience. I suggest validating the email address via ajax when the field changes, and then again on the server when it receives the form (you can never rely on client-side validation). That lets you give the user proactive feedback (the on-change validation) without trying to validate it via ajax when submitting the form.

Where to do checks on form submit for redirection: onunload or in ajax function?

I've got this form, initialized from the data in a Mysql database entry. If the form is submitted, I want to check if the values (15 of them) in the form have been changed, I want to call a php script to update the database entry and then load the main page content in my div (redirection would be done in the php script). If no change was made, I want to directly load the main page content in my div.
My question is the following, what would be the best practice: doing the checks on unload of the form, or putting the check in the ajax function that would call the correct script in function of the check?
I'd rather call by click on the save button a function which checks the values for changes and then calls a php-file in AJAX. This is the siplest way to do that.
From your explanation, you said you are checking for change. If the form validations are simple ( data input error, checking for range, checking for change etc) it would be better to put it as javascript. So, you will have your code along with ajax function.
In your case, you will submit the data through ajax if the form is valid. Otherwise just load the content into div

How to submit form with data before logging someone out?

I'm using the document.form.submit() function for a rather large input form (hundreds of fields, it's an inventory application). I'm calling this after the user has been idle for a certain amount of time and I would like to save any data they've typed. When I try this the page reloads (the action is #) but any new text typed in the fields is not passed in the REQUEST, so I don't get to put it in the DB. Is there some fundamental reason why this happens or is my code just not playing nice together (I'm using the EXTJS grid view to show the form and a library for tracking idle time)?
Thanks,
Robert
I guess I put the answer here. What I found was that doing this:
setTimeout('frm.submit();', 2000);
caused the page to reload but didn't submit the form. When I did this:
frm.submit();
The form was submitted and the data was passed. I don't know why the first way didn't work, but I don't need to know that:)
Might the server be voiding out the input values. Say if your page on the server looks like this:
<form action="/page.cgi">
...
<input name="Fieldx" value=""/>
</form>
I think it'll void out the field. Or this the server action might be setting it indirectly. In JSF, something like this.
<input name="Fieldx" value="#{bean.nullProperty}"/>
What do you have on the server and what's your browser?
I would try to catch the HTML post request to see if the input fields are included. If they are then your server has problem.
But regarding what you said, I think it's because there's conflict in the way your browser handles JavaScript DOM. This may be the case if you leave out the submit button on your form and it works.
The submit method of HTMLFormElement objects should just submit the form, as if the user had clicked the submit button. So, if the action attribute of the form is set to #, it would just seem to refresh the page, because it’s sending the form data to the same page.
Strange that it still does it when you set the action attribute to another page though.
Is the method attribute of the form set to get or post?

Categories

Resources