I've got a request to figure out if it's possible to send excisting HTML forms to an external service without losing the current form handling on the website.
Basically the idea is:
Visitor fills in form
Form data is send to external webapplication which does it's own form handling
Form continues to execute it's own POST data on the website itself (sending emails to visitor etc)
I'm looking for some input on step 2. I'm requested to build a simple dashboard that saves all the form data with an export functionality but they want to keep all the current form handling on the website as well.
I'm hoping someone can give me some input on what to look for as in keywords to google or some techniques to check out.
Thanks in advance
Maybe the following code is helpfull
<html>
<head>
<script language="Javascript">
<!--
function OnButton1()
{
document.Form1.action = "response1.php"
// document.Form1.target = "_blank"; // Open in a new window
document.Form1.submit(); // Submit the page
return true;
}
function OnButton2()
{
document.Form1.action = ""
document.Form1.submit(); // Submit the page
return true;
}
-->
</script>
<noscript>You need Javascript enabled for this to work</noscript>
</head>
<body>
<!-- create the form -->
<form name="Form1" method="post">
<!-- Add the data entry bits -->
Your Name <input type="text" name="name" size="10" /><br />
<!-- Add some buttons -->
<INPUT type="button" value="Button1" name=name onclick="OnButton1(); OnButton2();">
<!-- close the form -->
</form>
</body>
</html>
Found it here
Idea is to read the data that is needed to post and to the external and local site first then post it with help of AJAX request that would be much better (as shown below).
Or have two forms once user click submit populate both forms and the submit request programatically.
<div>
<form action="" id="helloForm">
Enter Text: <input type="text" id="txt" />
<input type="button" value="submit" id="submitButton"/>
</form>
</div>
$("#submitButton").click(function(e){
//extract data
var data = {
text: $("#txt").val()
};
alert(JSON.stringify(data));
//make external request one
$.post( "externalpage.php", data);
//make external request two
$.post( "ownserverpage.php", data);
});
Related
I'm working with an embedded app on our dev site and when I click the submit button inside the iframe, I am triggering a manual submission event on another form (not in an iframe) on that page. If I manually click the submit button for the form, my data posts and everything works correctly. However, I want to eliminate an extra user click and submit the external form automatically when a user submits the other form inside the iframe.
I've got everything working correctly on a base level. When a user clicks the submit button in the iframe, I am using JQuery to grab values from inside the iframe and set values in this external form. Using the jquery 'submit()' event, I am then able to submit that external form. The problem is, the page refreshes and the data doesn't go anywhere. If I remove the 'submit()' event and manually click the submit button, the form posts and in this case, adds a product with custom data to the product cart.
As a proof of concept, this is my 'iframed' HTML.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Proof of Concept</h1>
<p>Total cost: $<span id="cust_price">222.22</span> plus shipping.</p>
<p>Quote number: <span id="quot_num">1546751962211</p>
<form method="POST" enctype="multipart/form-data" id="newQuoteForm">
<button type="submit" class="btn btn-primary" name="new-app-btn">Add to Cart</button>
</form>
</body>
<footer>
</footer>
</html>
Here is my on-page form that is OUTSIDE the iFrame.
<form method="POST" enctype="multipart/form-data" id="outer-quote-form" action="/checkout/">
<label class="quote_number">Quote Number:
<input type="text" id="quote_number" name="quote_number" value="">
</label>
<label class="custom_price">price:
<input type="text" id="custom_price" name="custom_price" value="">
</label>
<button type="submit" class="btn btn-primary" name="ws-add-to-cart">Add to Cart</button>
</form>
Then, I have JQuery working to grab the iframed values and puts them in the exterior form. Afterwards, it fires a 'submit()' event on that form.
<script>
jQuery('#newQuoteApp').load(function() {
var iFrameDOM = jQuery("iframe#newQuoteApp").contents();
jQuery('#newQuoteApp').contents().find('#newQuoteForm').submit(function() {
jQuery("input#custom_price").val(jQuery('#newQuoteApp').contents().find('#cust_price').text()); // updated
jQuery("input#quote_number").val(jQuery('#newQuoteApp').contents().find('#quot_num').text());
jQuery("#outer-quote-form").submit();
return true; //return false prevents submit
});
});
</script>
Except when the jquery submit() event fires, the form appears to submit and the page refreshes but no data is posting as it does when I manually submit the form. Is there an extra step here or a better way to fire the form submit with post data?
Edit: Adding the PHP function that isn't firing on jquery submit() for context.
if (isset($_POST['ws-add-to-cart'])) {
add_action( 'init', 'add_product_to_cart' );
function add_product_to_cart() {
global $woocommerce;
global $product;
$product_id = 138;
$woocommerce->cart->add_to_cart($product_id);
}
header("Location:https://www.devsite.com/checkout/");
}
The reason for the form not submitting because you are submitting the whole form without the submit button which is <button type="submit" class="btn btn-primary" name="ws-add-to-cart">Add to Cart</button> which you have declared in php to get a post request like this
if (isset($_POST['ws-add-to-cart'])) {...
When you call submit(); on the form via the get method, you see '/new-quote/?quote_number=1546751962211&custom_price=222.22'
but where's ws-add-to-cart, it's not submitting and that's the reason why php isn't getting your request
The fix will be to add .click() on the submit button instead of submitting the form
<script>
function enterVals($val){
var price = $val.price;
document.getElementById("quote_number").value = $val.num
document.getElementById("custom_price").value = $val.price
document.getElementsByName("ws-add-to-cart").click();
}
</script>
Or in your script in case you want to use jquery, this is the fix
<script>
jQuery('#newQuoteApp').load(function() {
var iFrameDOM = jQuery("iframe#newQuoteApp").contents();
jQuery('#newQuoteApp').contents().find('#newQuoteForm').submit(function() {
jQuery("input#custom_price").val(jQuery('#newQuoteApp').contents().find('#cust_price').text()); // updated
jQuery("input#quote_number").val(jQuery('#newQuoteApp').contents().find('#quot_num').text());
jQuery("button[name=ws-add-to-cart]").click();
return true; //return false prevents submit
});
});
</script>
This is definitely the answer and sorry for my stupidity, i didn't pay required attention before
try removing return true from your js code
if that doesn't work, try changing the <form method="POST" to <form method="GET" to debug the values in the url just for checking that the form actually fires up with values
Alternative method: Old school method
code for page OUTSIDE the Iframe
<script>
function enterVals($val){
var price = $val.price;
document.getElementById("quote_number").value = $val.num
document.getElementById("custom_price").value = $val.price
document.getElementById("outer-quote-form").submit();
}
</script>
code for the Iframe file
<script type="text/javascript">
$('#newQuoteForm').on('submit', function(event) {
var Page = window.parent;
var allVals = {
price:$('#cust_price').text(),
num:$('#quot_num').text()
}
Page.enterVals(allVals);
event.preventDefault();
});
</script>
Explanation
window.parent refers to the parent window where the iframe is loaded on, with reference to this we can trigger functions that are in the parent window so by this, we created a variable and added the information which is sent by the function enterVals() to the window
The enterVals() function just puts the values and submits the form without any jQuery.
What is the proper way to submit a form with JS?
This might not be the 'best' way to submit a form with js but is cross-browser which is good
Working through a problem, I have managed to identify and write an SQL injection, send that injection to a site but I need to automate clicking the login button.
Is it possible (through JavaScript, html, etc) to load a webpage fill in a bunch of data fields and click a button?
I'm trying to automate something and I can do everything but click the button on the webpage.
The process is:
Get user data on your webpage (he will click a button to finish)
Send that data to a different webpage
Fill data fields on second webpage
Click a submit button on the second webpage
I am stuck on the last part.
Here is the code I have so far
<!DOCTYPE html>
<html>
<head>
<script>
function func()
{
var str1 = document.getElementById("name").value;
var str2 = "SQL ADDED EXPLOIT STRING";
document.getElementById("name").value = str1.concat(str2);
return true;
}
</script>
</head>
<body>
<form action="website.com" method="POST">
<input name="login" id="name" value="username" />
<button id="button" onclick="func()">press button</button>
</form>
</body>
</html>
I have a form that when I submit it I want to load the result page into a div on the original page. When I click the submit button of the form however it is sending a get requst to the original page eg: http://localhost/hr/index_admin_test.php?posteddate=01-10-2015 rather than a post request to http://localhost/hr/attendanceform2.php
In the original page I have the following script:
<script>
$('#timesheetsearch form').submit(function(){
var data=$(this).serialize();
// post data
$.post('attendanceform2.php', data , function(returnData){
$('#timesheets').html( returnData)
})
return false; // stops browser from doing default submit process
});
</script>
And in the body of the page I have the following form and div:
<div class="content_text" id="timesheetsearch">
<p> Select the date you wish to view time sheets for:</p>
<p><form name="timesheetsearch"> <br><input name="posteddate" value="01-10-2015" id="datepicker" />
<div id="timesheets"></div>
<input type="submit"> </form> </p>
Place the script after the form like this
<div class="content_text" id="timesheetsearch">
<p> Select the date you wish to view time sheets for:</p>
<p><form name="timesheetsearch"> <br><input name="posteddate" value="01-10-2015" id="datepicker" />
<div id="timesheets"></div>
<input type="submit"> </form> </p>
<script>
$('#timesheetsearch form').submit(function(){
var data=$(this).serialize();
// post data
$.post('attendanceform2.php', data , function(returnData){
$('#timesheets').html( returnData)
})
return false; // stops browser from doing default submit process
});
</script>
If you run your script before loading the form it will not work since script didn't find any form. You can also write your script inside
$(document).ready(function(){
})
If you really want your script to place before the form. Hope your script is working correctly now.
1st you can try
<form method="post" action="attendanceform2.php" name="timesheetsearch">
2nd try
$(document).on('submit','#timesheetsearch form',function(e){
e.preventDefault();
3rd check your attendanceform2.php file path
4th use it with 1st
<script>
$(document).ready(function(){
$('#timesheetsearch form').submit(function(){
//or you can use this instead>> $(document).on('submit','#timesheetsearch form',function(e){
e.preventDefault();
var data=$(this).serialize();
// post data
$.post('attendanceform2.php', data , function(returnData){
$('#timesheets').html( returnData);
});
return false; // stops browser from doing default submit process
});
});
</script>
Let me Clear what title means:
In my code for a validation purpose of one field dependent on field "t1" I need to auto submit my form once (Just Once). But my below code is submitting it infinite times and I know the reason why its happening.
I guess Reason is everytime the form submits again JS in header runs. Please help me avoid this. Following is my code:
<html>
<head>
<script>
window.onload = function()
{
var f = document.getElementById("CheckForm");
var temp = document.getElementById("CheckForm.t1");
if(f.name == "CheckForm")
{
var temp1 = document.getElementById("t1");
temp1.value = "Task";
}
document.CheckForm.submit();
}
</script>
</head>
<body>
<form name="CheckForm" id="CheckForm" method="Post">
<input type="text" id="t1" name="t1"/>
</form>
</body>
</html>
I tried stopping it using variable like flag and static variables like arguments.callee.count = ++arguments.callee.count || 1 and placing my CheckForm.submit() line in if clause. But nothing worked. Any advice or help is appreciable.
<html>
<head>
<script>
window.onload = function()
{
var f = document.getElementById("t1");
var temp = document.getElementById("CheckForm.t1");
if(f.name == "CheckForm")
{
var temp1 = document.getElementById("CheckForm.t1");
temp1.value = "Task";
}
if(window.location.search=="")document.CheckForm.submit();
}
</script>
</head>
<body>
<form name="CheckForm">
<input type="text" id="t1"/>
</form>
</body>
</html>
Surely your form is more complex than:
<form name="CheckForm">
<input type="text" id="t1">
</form>
That will not submit anything to the server since there are no successful controls (the only control doesn't have a name).
Since the form is just submitting to the same page, you can submit a hidden value like:
<form name="CheckForm">
<input type="text" id="t1">
<input type="hidden" name="hasBeenSubmitted" value="yes">
</form>
Now when the form submits the URL of the new page will include ...?hasBeenSubmitted=yes so you can look for that value in the URL, e.g.
if (/hasBeenSubmitted=yes/.test(window.location.search)) {
// this page loaded because the form was submitted
}
If it exists, don't submit the form again.
So since you are using a post method the easiest way's to handle this is to ubmitted to a new url , however you seem set on keeping the form submitted to the same url in which case is you are using php (or really any other language) you can check if the http request has a post attribute with a value t1
<?php
if(isset($_POST['t1']){
$your_text=$_POST['t1'];
/*do some string checking to make safe and the throw into your database or mdo whatever you please with data
if you wanted to include the ip address of the user you can get a basic and most likely client ip address like so
$ip_address= $_SERVER['REMOTE_ADDR'];
if you are handing a mulitpage form look into php session or similar tech ... cookies is kind of over kill for this scenario
then include a succes page as the form has been submitted
or you could end php with this tag ?> and then have your html and start again with <?
*/
include 'form_submitted.php';
}else{
//this would be the html page that you included in your question and can be handle in same ways as form submitted
include 'my_form.php'
}
?>
Ip address may not be best included as it would stop 2 user from filling out the form if they are in the same LAN for eg. 2 people in same office or same house (if your page is acttual on the worldwide web).
I would take a look at #RobG answer as it he is basically suggesting the same type of thing with a get instead of post
ANyways hope this helps
I have a form that after submitting goes to page "http://qwertyasdfgh.rozblog.com/New_Post" ( the action value )
I don't want to change the action but I want to redirect to another page after submitting.
I tried to redirect to "http://qwerty.rozblog.com/page/success" after submitting but it doesn't work .
here is the code I tried :
(html)
<form method="post" action="http://qwertyasdfgh.rozblog.com/New_Post" id="f1">
<input type="text" name="title" style="width:300px"><br />
<input type="text" name="pimg" style="width:300px" maxlength="3072"><br />
<textarea dir="rtl" id="post" name="post" style="width:300px;" aria-hidden="true"></textarea><br />
<input type="submit" name="postsubmit" value=" submit " style="background:#333;" onclick="location()">
</form>
(js)
function location() {
window.location.replace("http://qwerty.rozblog.com/page/success");
}
and here is the fiddle
You can submit the form using jquery and AJAX (or I misunderstood you):
$('#f1').submit(function(e)
{
e.preventDefault();
$.post('http://qwertyasdfgh.rozblog.com/New_Post',
formDataAsJSON, //use eg. jquery form plugin
function(data)
{
window.location = 'somewhere';
}
);
});
You have two choices.
1) Submit that form using AJAX and after recieving response from server redirect browser to your desired page. You can use for example jQuery with Ajax form plugin. The code would look like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'f1' form and provide a simple callback function
$('#f1').ajaxForm(function() {
window.location = "/page/success"
});
});
</script>
OR
2) You can leave your form and js as is, and use for example php to redirect user after doing some stuff.
New_post.php
<?php
// some stuff without printing (you cant change headers if you print something)
Header("Location: /page/success");
If possible, you can configure /New_Post to redirect to /page/success using meta refreshing in head:
<meta http-equiv="refresh" content="0; url=http://qwerty.rozblog.com/page/success">