Form submit in $(document).ready(function(){. Is there a simple fix? - form-submit

This should be an easy fix for the right guru! Everything is working for me except that I can't get this form to submit without clicking the submit button. The data values are all valid. The action page, ...gdform.php, uses $_post to get the "redirect" value from the form and then uses php to do a header Location change. That works fine if I execute the form with the submit button. I just need it to happen without any click...
Take a look, please!
<?php session_start();
require_once('Connect.php') ;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Nitrofill Document</title>
<?php
//error_reporting(E_ALL);
$sn=$_GET['num'];
echo $sn;
mysql_connect($hostname,$username, $password) OR die('Unable to connect to database! Please try again later.');
mysql_select_db($dbname);
$selectSQL = "select * from `Presentations` where `serialnum` ='" . $sn ."'" ;
$result = mysql_query($selectSQL) or die(mysql_error());
$row = mysql_fetch_array($result, MYSQL_BOTH);
$thedoc = urldecode($row['docurl']);
$therecip=urldecode($row['recipient']);
$thetracker=urldecode($row['tracker']);
$lastacc=urldecode($row['last_accessed']);
?>
</head>
<body>
<form id="notice" action="http://m3sglobal.com/gdform.php" method="post">
<input name="subject" value="<?php echo $therecip . " has viewed the document you sent them.";?> " />
<input type="hidden" name="redirect" value="<?php echo $thedoc ; ?>"/>
<label>Email:</label><input type="text" name="email" value="<?php echo $thetracker ; ?>"/>
<label>Comments:</label><textarea name="comments" cols="40" rows="5">
Document Viewed:<?php echo $thedoc ; ?>
When Accessed:<?php echo $lastacc ; ?>
</textarea>
<input type="submit" name="submit"/>
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
myfunc
});
function myfunc () {
var frm = document.getElementById("notice");
frm.submit();
}
</script>

I might be wrong but shouldn't it be: (corrected typos)
$(document).ready(function(){
myfunc(); <--// with ();
});
function myfunc() { <--// without space
var frm = document.getElementById("notice");
frm.submit();
}
or better yet:
$(document).ready(function(){
$("form#notice").submit();
});
EDIT:
Prowla is right, you also didn't declare the jQuery library. Good catch Prowla, I missed that, just saw the typos.
EDIT #2:
Your code is pretty messy there, and you have that PHP generated string in the <head>. Also your submit had no value, you used name. I cleaned it up, here is working code (for me at least):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nitrofill Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("form#notice").submit();
});
</script>
</head>
<body>
<!--// ALL THE PHP SHOULD GO HERE TO MAKE THE URL BELOW //-->
qyO452ZKphttps://docs.google.com/presentation/pub?id=1chxqg-qjrfEvAR9_Jia7lt4ps2_Q7IfTiI41bQE7Q_4&start=true&loop=false&delayms=3000<br/>greg.mcgee#gmail.com<br/>greg.mcgee#advetel.com<br/>Thu, 23 Feb 2012 19:42:11 MST<br/>
<!--// END PHP //-->
<form id="notice" action="http://m3sglobal.com/gdform.php" method="post">
<input name="subject" value="greg.mcgee#gmail.com has viewed the document you sent them. " />
<input type="hidden" name="redirect" value="https://docs.google.com/presentation/pub?id=1chxqg-qjrfEvAR9_Jia7lt4ps2_Q7IfTiI41bQE7Q_4&start=true&loop=false&delayms=3000"/>
<label>Email:</label><input type="text" name="email" value="greg.mcgee#advetel.com"/>
<label>Comments:</label><textarea name="comments" cols="40" rows="5">
Document Viewed:https://docs.google.com/presentation/pub?id=1chxqg-qjrfEvAR9_Jia7lt4ps2_Q7IfTiI41bQE7Q_4&start=true&loop=false&delayms=3000
When Accessed:Thu, 23 Feb 2012 19:42:11 MST
</textarea>
<input type="submit" value="submit"/>
</form>
</body>
</html>
You might want to consider using firebug to help you troubleshoot your pages. Its how I figured this out. Also remember Prowla's advice, and protect your SQL.

Using jQuery: (Remember to put the jquery script in your <head> tags).
<head>
...
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
...
<head>
...
// submit form with id notice
$(document).ready(function(){
$('#notice').submit();
});
Also your SQL is subject to injection. Please look into using prepared statements.
Sample in PHP:
$mysqli = new mysqli('localhost', 'user', 'password', 'db');
$stmt = $mysqli->prepare('select * from `Presentations` where `serialnum` =?');
$stmt->bind_param('i',$sn);
$stmt->execute();
....

Related

can we call a ftl macro from javascript function

<html lang="en">
<head>
<meta charset="UTF-8">
<title> Java, Spring Boot, FreeMarker</title>
<link href="/css/main.css" rel="stylesheet">
</head>
<script>
function myFunction() {
<#test/>
}
</script>
<body>
<h2>Java, Spring Boot, FreeMarker</h2>
<form action="/search" method="post">
Search : <input type="text" name="firstName" onkeyup="myFunction()" id = "fname">
<input type="submit" value="Submit">
</form>
<div style="background-color:lightblue">
<#macro test>
<#list empList as emp>
<div id="emp-data">
<ul>
<li>${emp}</li>
</ul>
</#list>
</div>
</#macro>
<script src="/js/main.js"></script>
</div>
</body>
When I run this code I am getting some errors on the browser console:
(index):60 Uncaught ReferenceError: myFunction is not defined at HTMLInputElement.onkeyup ((index):60) onkeyup # (index):60 – PCS 1 hour ago
Is it possible in FreeMarker to do something like that?
In a sense you can... but it doesn't do what you apparently believe it does. First all FreeMarker instructions, like <#test/>, are resolved on the server, then later the resulting output runs in the browser. So as far as the browser sees, function myFunction() { ... } contains HTML div-s directly in inside the { ... }, which is invalid JavaScript.

Sagepay Direct 3D Secure Blank Page Issue

I'm trying to implement Omnipay with Sagepay Direct but am really struggling with the 3D Secure bit.
When I post the MD, PaReq and TermUrl to https://test.sagepay.com/mpitools/accesscontroler?action=pareq I just get a blank screen.
These previous SO answers suggest removing spaces from the PaReq field solves the issue, but I don't have any spaces in my data.
SagePay Direct 3DSecure checkout part returning blank page when redirecting out to bank
Sage Pay test server won't load 3D Secure page
The data returned from the Omnipay method $response->getRedirectData() is
"PaReq" => "eJxVUk1TwjAQvfsrGO52mza0lVnCoBxERqcqOuMxpqt0pB8mrRZ/vQkUweTy3svO2+xLcNoVm8EXaZNX5WTIPH84FWe4Wmui+SOpVpPAWzJGvtMgzybDwGcjn7OLmEc8CXnAgmQ0FJjOHuhTYG8krI/HEA7UOmi1lmUjUKrPy8Wd4DwKoxFCT7EgvZiLgPn7HfpuIexlLGVBYqZkRsV2RaZ5pjKrNMJOR1W1ZaO3IgkihAPBVm/EumlqMwaQdW08U1bfmur2dZMrT1Ve+wGGNm/nhvQXIbh6hONF09YhY/27PBNyef308zKLuuXdA0u71DC5DrItj2/uJwiuAjPZkLDxxH4SsgGLx2E85hxhp6Ms3MUEc1P1GGvXYnZycCqgzV5TqQ5zHRhSV1cl2YoA4Q9jRkaJR/dKqdwObtOFbewkhOMgV9cuf9XYSJmLfoecX24DYwnbGzqC4Gqhf1XoP4BF/z7GLxIJvBw="
"MD" => "20150419746483421285"
This is the HTML for the form I'm using
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<form action="https://test.sagepay.com/mpitools/accesscontroler?action=pareq" method="post">
<input name="MD" value="20150419746483421285" type="hidden">
<input name="PaReq" value="eJxVUk1TwjAQvfsrGO52mza0lVnCoBxERqcqOuMxpqt0pB8mrRZ/vQkUweTy3svO2+xLcNoVm8EXaZNX5WTIPH84FWe4Wmui+SOpVpPAWzJGvtMgzybDwGcjn7OLmEc8CXnAgmQ0FJjOHuhTYG8krI/HEA7UOmi1lmUjUKrPy8Wd4DwKoxFCT7EgvZiLgPn7HfpuIexlLGVBYqZkRsV2RaZ5pjKrNMJOR1W1ZaO3IgkihAPBVm/EumlqMwaQdW08U1bfmur2dZMrT1Ve+wGGNm/nhvQXIbh6hONF09YhY/27PBNyef308zKLuuXdA0u71DC5DrItj2/uJwiuAjPZkLDxxH4SsgGLx2E85hxhp6Ms3MUEc1P1GGvXYnZycCqgzV5TqQ5zHRhSV1cl2YoA4Q9jRkaJR/dKqdwObtOFbewkhOMgV9cuf9XYSJmLfoecX24DYwnbGzqC4Gqhf1XoP4BF/z7GLxIJvBw=" type="hidden">
<input name="TermUrl" value="https://www.example.com/payment/auth-return" type="hidden">
<center><p>Please click button below to Authenticate your card</p><input value="Go" type="submit"></center>
</form>
</body>
</html>
Do you know why I'm getting a blank page? Do I need to transform the data in some way before sending it to Sagepay?
I've tried everything I can think of but am getting nowhere.
ok, so it's magically working now....may have been a problem at Sagepay's end?
In case it's useful for someone else, here's my iFrame code...
<iframe src="secure-3d.php?acsURL=<?=$responseUrl?>&PaReq=<?=$responseData['PaReq']?>&MD=<?=$responseData['MD']?>&TermUrl=<?=$responseData['TermUrl']?>" name="secure-3d" id="secure-3d" width="100%" height="500" frameborder="0"></iframe>
...where 'secure-3d.php' is my self-submitting form as below....
<form id="cardToken" name="cardToken" action="<?=$_GET['acsURL']?>" method="post">
<input type="hidden" name="MD" value='<?=str_replace(' ','+',$_GET['MD'])?>' />
<input type="hidden" name="PaReq" value='<?=str_replace(' ','+',$_GET['PaReq'])?>' />
<input type="hidden" name="TermUrl" value='<?=str_replace(' ','+',$_GET['TermUrl'])?>' />
<noscript>
<center><p>Please click button below to Authenticate your card</p><input type="submit" value="Go"/></p></center>
</noscript>
</form>
<script language="Javascript">
var form = document.getElementById("cardToken");
form.submit();
</script>
I just pass the PaReq, MD and TermUrl data through to the form in the querystring, then you need to str_replace spaces to pluses when creating the hidden fields.
That should do it!
If anyone has any ideas on how to make this better, please comment

Updating div elements in Twitter Bootstrap

I tried to write an AJAX-type form with Twitter Bootstrap, but the updated div element disappears. Can I fix that?
<!DOCTYPE html>
<html>
<head><link href="bootstrap.min.css" rel="stylesheet" media="screen"></head>
<script>
function wordCloud(){document.getElementById("cloud").innerHTML = "WordCloud";}
</script>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap.min.js"></script>
<div id="cloud"></div>
<form onsubmit="wordCloud()">
<fieldset>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form></body>
</html>
Change as follows.
function wordCloud(){document.getElementById("cloud").innerHTML = "WordCloud";}
replace
function wordCloud(){document.getElementById("cloud").innerHTML = "WordCloud"; return false; }
and
<form onsubmit="wordCloud()">
replace
<form onsubmit="return wordCloud()">

Redirecting immediately with javascript

I have a problem redirecting a page with javascript. I want to redirect the page after clicking a button, but it is redirecting it automatically.
Why is that?
window.onload=initAll;
function initAll(){
if(window.addEventListener) {
document.getElementById('check').addEventListener("click",redirection,false);
} else if (window.attachEvent){
document.getElementById('check').attachEvent("onclick", redirection);
}
function redirection(){
window.location.href='http://www.google.com';
}
}
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="glavna.js"></script>
</head>
<body>
<div id="wrapper">
<form action="glavna.html">City:<input id="city" type="text"/>
Price: From:<input type="text" id="from"/> To:<input type="text" id="to"/>
Refresh in min :<input type="text" id="refresh"/>
<button id="check" >Search</button>
</form>
</div>
</body>
</html>
this can be done with window.location.href what it does
// similar behavior as clicking on a link
window.location.href = "you want to redirect";
window.location is location object. To redirect Use window.location.href instead

Unable to add events after AJAX load using jQuery

I have a web page on which I use jQuery's AJAX to load new elements into a div. This part of my page works fine.
I now want to add a similar event to these newly-added elements. To do this I planned to use jQuery's .live() method but nothing appears to happen.
So I initially start with this
<div id="change-agent-list" class="tooltip">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
Into .middle I asynchronously load markup that looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
</head>
<body>
<form name="main" method="post" action="/ils/agent-selector/" id="main">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ1MTc3ODM4NGRkg9mLyLiGNVcP/ppO9C/IbwpxdwI=" />
</div>
<ul id="content_0_agentsUL">
<li>
Agent 1
</li>
<li>
Agent 2
</li>
<li>
Agent 3
</li>
</ul>
<div id="agent-details"></div>
</form>
</body>
</html>
When the page initially loads I use this script - my intention is to add a click handler for each of the .agent-name elements that are asynchronously added later.
$j(document).ready(function () {
$j(".agent-name").live("click", function() {
var agentDetails = $j(".agent-details");
var loadingContent = '<div id="ajax-load"><img src="/sitecore/__/_images/global/ajax-load.gif" alt="AJAX content loading" /></div>';
agentDetails.show();
agentDetails.empty().html(loadingContent);
var modalURL = $j(".agent-name").attr("href");
agentDetails.load(modalURL);*/
return false;
});
});
The problem is that no events are being bound to the .agent-name elements. I've tried replacing all the inner script with a simple alert() so that I can see if any events are being bound to the .agent-name elements, and I can't get this alert() to display.
So in other words, no events are being bound to my .agent-name elements.
Even if I move the agent-name class to the list elements and change the jQuery to simply
$j(".agent-name").live("click", function() {
alert('1');
});
I still get nothing when I click on the elements.
Can anyone explain why, or how I fix this so that I can late-bind events to elements created in an AJAX callback?
I eventually solved this by using jQuery's on instead of "live".
You can only have one #agent-name because IDs are unique. You can just use $('#agents .link') since you already have a class on each anchor.
Not sure if this is helpful, but this works for me:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".agent-name").live("click", function() {
alert("click");
return false;
});
});
</script>
</head>
<body>
<form name="main" method="post" action="/ils/agent-selector/" id="main">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ1MTc3ODM4NGRkg9mLyLiGNVcP/ppO9C/IbwpxdwI=" />
</div>
<ul id="content_0_agentsUL">
<li>
Agent 1
</li>
<li>
Agent 2
</li>
<li>
Agent 3
</li>
</ul>
<div id="agent-details"></div>
</form>
</body>
</html>

Resources