Have been using the following on a form's Thankyou page to redirect back to the form in 5 seconds and neatly pre-fill the name fields with values:
<script> setTimeout(function() {location.href = '<?php echo $var3['returnurl'] ?>?fullName[first]=<?php echo $var1['first'] ?>&fullName[last]=<?php echo $var2['last'] ?>'}, 5000); </script>
Works great until the returnurl field is a https:// url.
Then it stays on the thankyou page in a loop trying to do the redirect.
There are no iframes involved .... have tried top.location.href ... no good ... even tried location.replace
Can anyone see any limitations with the code that may be impacting the redirect to an https:// url.
Code in the php file ...
<!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" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="width">
<title>Thankyou</title>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
background: #fff;
font-family: Arial;
}
#message
{
position: absolute;
left: 50%;
width: 320px;
margin-left: -160px;
}
</style>
<?php
$answers = $_POST;
$var1 = array("first" => $answers[fullname][0]);
$var2 = array("last" => $answers[fullname][1]);
$var3 = array("returnurl" => $answers[returnurl]);
?>
</head>
<body>
<script>
setTimeout(function() {location.href = '<?php echo $var3['returnurl'] ?>?fullName[first]=<?php echo $var1['first'] ?>&fullName[last]=<?php echo $var2['last'] ?>'}, 5000); // this duration is in millisecs
</script>
<div id="message">
<p> </p>
<div style="text-align: center;"><h1>Thank You!</h1></div>
<div style="text-align: center;">Your submission has been received.</div>
<div style="text-align: center;">We're most grateful</div>
<div style="text-align: center;"> </div>
<div style="text-align: center;"><img src="http://www.mazeguy.net/bigsmilies/thumbsup.gif"></img></div>
<div style="text-align: center;"> </div>
<div style="text-align: center;">You will return in 5 seconds</div><br />
</body>
</html>
Here's the result of a submission ... the Thankyou Page source shows ... yeah the secure page url is not being passed through ....
<script>
setTimeout(function() {location.href = '?fullName[first]=&fullName[last]='}, 5000); // this duration is in millisecs
</script>
Have you considered submitting the form via Ajax? The user would never leave the form submission page. You could simply display a modal with the confirmation message. That seems simpler than redirecting the user. It may be a nicer user experience as well.
Let's assume your form has a submit button with a class of 'submit'. You could so something like this in jQuery:
$(function() {
$('body').on('click', '.submit', function(event) {
event.preventDefault();
var target = event.currenTarget;
var form = $(target).closest('form');
var action = $(form).attr('action');
$.post(action, form.serialize())
.done(function() {
alert('Thanks for your submission!');
})
.fail(function() {
alert('Oops! Something went wrong... PLease try again.');
});
});
});
Check out Bootstrap. They have some nifty looking modals you can use.
Related
I am working on a signature capturing plugin named "jsignature" in my project.
I want to add it as one of the fields in my form as below.
But I don't want to use a click function in the form as well as a textarea in the form. Only changing the signature and submitting the data should save in the post. I want to customise this with javascript unfortunately, I am failing in trying to figure this out.
My code looks like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<!-- jQuery -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/jsignature#2.1.2/libs/jSignature.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="libs/flashcanvas.js"></script>
<![endif]-->
<!-- jSignature -->
<style>
#signature {
width: 100%;
height: auto;
border: 1px solid black;
}
</style>
<form method="post" action="test.php">
<!-- Signature area -->
<div id="signature"></div>
<br /> <input type='button' id='click' value='click'>
<textarea id='output' name='sig'></textarea>
<br />
<!-- Preview image -->
<img src='' id='sign_prev' style='display: none;' /> <input
type="submit" name="submit">
</form>
<!-- Script -->
<script>
$(document).ready(function() {
// Initialize jSignature
var $sigdiv = $("#signature").jSignature({
'UndoButton' : true
});
true
$('#click').click(function() {
// Get response of type image
var data = $sigdiv.jSignature('getData', 'image');
// Storing in textarea
$('#output').val(data);
// Alter image source
$('#sign_prev').attr('src', "data:" + data);
$('#sign_prev').show();
});
});
</script>
</html>
I do not know where to change the code. I want to save the data in a database after submitting the form without having any textareas and click buttons. Can someone suggest me a post, tutorial or some help?
i guess this is what you are looking for
<script>
$(document).ready(function() {
// Initialize jSignature
var $sigdiv = $("#signature").jSignature({
'UndoButton' : true
});
true
$('#signature').change(function() {
var data = $sigdiv.jSignature('getData', 'image');
// Storing in textarea
$('#output').val(data);
// Alter image source
$('#sign_prev').attr('src', "data:" + data);
$('#sign_prev').show();
});
});
</script>
How to open a link from the same page, or should I say display the content of that link on the same page where the link is, I haven't tried anything yet cause I really don't know what this sort of thing is called, I'm new at web developing I really need this one cause it can make the website that I'm working on right now look more professional
here is an accurate picture/explanation for what I want:
Picture of what I want to do
You could do it using some jquery:
Take the code below as a reference:
$('#link1').on('click',function(){
$('#content1').css('display', 'inline');
$('#content2').css('display', 'none');
});
$('#link2').on('click',function(){
$('#content1').css('display', 'none');
$('#content2').css('display', 'inline');
});
.wrapper {
background: #cacaca;
width: 350px;
height: 150px;
}
.container {
display: relative;
float: left;
background: #9A9ACA;
width: 200px;
height: 150px;
}
#content1, #content2 {
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div id="content1">
Some content
</div>
<div id="content2">
Other stuff
</div>
</div>
<div>Link1</div>
<div>Link2</div>
</div>
Hope it helps
Use a browser side application like jQuery to change the CSS class or id from hidden to shown 'onmousedown'. Place your div style as hidden initially, then write jQuery to show the div on press of your mouse button.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">THE AWESOME SAUCE!</p>
<script>
$( "button" ).click(function() {
$( "p" ).toggle();
});
</script>
</body>
</html>
You need to do some studying up on JQuery for this purpose, luckily there are a lot of examples of this very topic out there for you to research, I suggest starting here:
http://api.jquery.com/toggle/
you can redirect the page by simply typing .....
header("Location: file_name");
or you can give the HTML content by simply giving
<a href ="localhost/8000/file_name">
How to change the alert box size?
I use the following coding.
In Firefox the alert box resize automatically but it not change in chrome?
Kindly give a solution.
window.alert("You answered all questions. Press OK to continue.");
You can't change the size/formatting/title (default settings) of the Javascript Alert Box. Instead you should check out JQuery Alert Box.
The Resizable JQuery Alert Box
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
To clarify: When you use window.alert() you are using resources of your browser, not of your web page. It's the browser then who is responsible for creating the alert box, and thus you cannot influence its properties (like size etc.)
I placed a single space in a new line at the end of my string which increased the length to a standard Windows message box.
Alert ("Hello World\n ");
Using the php sample that ABBYY provides http://pastebin.com/SeN8mdya I've been able to convert an image to text. Works like a charm. Now I'm trying to use an web interface to take a picture on a mobile device and send that to the ABBYY ocr service and return the resulting text. My code that takes the picture:
<!doctype html>
<html>
<head>
<title>Camera access on mobile web!</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
#container {
margin:0 auto;
padding:0;
width:200px;
}
div.message {
background-color:green;
border-radius:4px;
color:white;
display:none;
padding:5px 0;
text-align:center;
width:100%;
}
</style>
</head>
<body>
<div id="container">
<img src="logo-mobile.png" id="lunchbox-logo" />
<div class="message"><strong>Thanks for the submission!</strong></div>
<p>Submit your receipt straight from your web browser!!</p>
<form method="POST" enctype="multipart/form-data" action="http://cloud.ocrsdk.com/processImage?language=english&exportFormat=txt">
<input type="file" accept="image/*" name="receipt[data]">
<input type="button" onClick="submitReceipt();" value="Submit">
</form>
</div>
<script type="text/javascript">
function submitReceipt(){
var token = 'NEVER-COMMIT-TOKENS :)';
var file = document.getElementsByName('receipt[data]')[0].files[0];
fd = new FormData();
fd.append('access_token', token);
fd.append('receipt[data]', file);
req = new XMLHttpRequest();
req.open('POST', 'http://cloud.ocrsdk.com/processImage?language=english&exportFormat=txt');
req.send(fd);
document.getElementsByClassName('message')[0].style.display = "block";
}
</script>
</body>
</html>
Both work independently of each other. I'd like the camera page to submit the picture to ABBYY and wait for the returning result and then display it. All my attempts have broken it. Thanks again.
What you're ending up inadvertently doing here is submitting the filename of the uploaded file, rather than the file content. There are fancy ways to get the content of the file nowadays, but it'll be much simpler to just skip all the fancy AJAX stuff you're doing, remove the onClick handler, and submit the form normally.
I need help getting an ajax function to work properly. I have a page that does a simulated search of a person's zip code. It shows a Google map of their location and an ajax loader.gif. After a 3000 MS timeout, the ajax function is called to load more content in a <div id="content"></div>
The problem I am having is that the content that is loaded in the div doesn't seems to be getting any of the CSS styles I need and a few php includes. If I load the page that is called via the ajax function directly in the browser, everything displays fine. But when loaded in the ajax, I am missing the CSS and the PHP includes. Need someone ASAP to help me figure this out! Please respond.
Here's my code:
<?php
include($_SERVER['DOCUMENT_ROOT'] .'/inc/tokens.php');
?>
<!DOCTYPE HTML>
<html lang="en" xml:lang="en">
<!--head code-->
<head>
<link type="text/css" rel="stylesheet" href="../css/v1.css" />
<style type="text/css">
#quotebtn {
position:relative;
margin: 5px 0 1px 0;
left:45px;
float:left;
width: 200px;
height:50px;
border: 0px;
border-radius: none;
}
#form
{
margin: 100px;
}
</style>
<!--start scripts-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script language="javascript">
function ajax_request() {
setTimeout('load_results()', 3000);
}
function load_results(url) {
$('#content').hide('fast');
/*$('#content').fadeIn('normal');*/
$('#content').slideDown('fast', function() {
// Animation complete.
});
$('#content').load('page2.php #content', "",
function(responseText, textStatus, XMLHttpRequest) {
if(textStatus == 'error') {
$('#content').html('<p>There was an error making the AJAX request</p>');
}
}
);
}
</script>
</head>
<body onload="ajax_request();">
<ul id="nav">
<li>welcome</li>
</ul>
<!--form-->
<div id="form">
<div id="top"><img src="<?php echo $imgpath;?>/step1_boxtop.png" width="365px" height="100px" border="0" /></div>
<!--content-->
<div id="content">
<div id="page2text_1"><?php echo $form_text1;?></div>
<div id="loader"><img src="<?php echo $imgpath;?>/ajax-loader.gif" width="128px" height="15px" border="0" /></div>
<div id="gmaps">
<?php include($_SERVER['DOCUMENT_ROOT'] .'/offer/v1/gmap.php');?>
</div>
<div id="page2text_2"><?php echo $form_text2;?></div>
</div>
<!--content-->
</div>
<!--form-->
</body>
</html>
Maybe you will have better luck with .ajax() instead:
Replace:
$('#content').load('page2.php #content', "",
function(responseText, textStatus, XMLHttpRequest) {
if(textStatus == 'error') {
$('#content').html('<p>There was an error making the AJAX request</p>');
}
}
);
With:
var jqxhr = $.ajax({ type: 'POST', cache: false, url: 'page2.php', data: {id: 'somedata'},
success: function(data) {
$('#content').html(data.find('#content').html());
}
})
.error(function() {
$('#content').html('<p>There was an error making the AJAX request</p>');
});