|
JavaScript - Stop Form Resubmitting Data On Refresh And Live Cropping
Hey guys, I'm working on a user website and have got the upload form working and the cropping working, also got the image in my profile, all works great.
A few things I need tho and wondering if you could help. I need to stop the form from resubmitting the image when I refresh the upload.php page below upload.php PHP Code: <?php define('INCLUDE_CHECK',true); require 'connect.php'; session_start(); $session_id ='1'; $username = $_SESSION['user']; $upload = $_POST['upload']; $new_name = "small".$username.".jpg"; $path = "uploads/"; ?> <html> <head> <title>My Network</title> </head> <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script> <script type="text/javascript"> function getSizes(im,obj) { var x_axis = obj.x1; var x2_axis = obj.x2; var y_axis = obj.y1; var y2_axis = obj.y2; var thumb_width = obj.width; var thumb_height = obj.height; if(thumb_width > 0) { if(confirm("Do you want to save image..!")) { $.ajax({ type:"GET", url:"ajax_image.php?t=ajax&img="+$("#image_name").val()+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis, cache:false, success:function(rsponse) { $("#cropimage").hide(); $("#thumbs").html(""); $("#thumbs").html("<img src='uploads/"+rsponse+"' />"); } }); } } else alert("Please select portion..!"); } $(document).ready(function () { $('img#photo').imgAreaSelect({ aspectRatio: '1:1', onSelectEnd: getSizes }); }); </script> <?php $valid_formats = array("jpg", "png", "gif", "bmp"); if(isset($_POST['submit'])) { $name = $_FILES['photoimg']['name']; $size = $_FILES['photoimg']['size']; if(strlen($name)) { list($txt, $ext) = explode(".", $name); if(in_array($ext,$valid_formats) && $size<(1024*1024)) { $actual_image_name = time().substr($txt, 5).".".$ext; $tmp = $_FILES['photoimg']['tmp_name']; if(move_uploaded_file($tmp, $path.$actual_image_name)) { mysql_query("UPDATE user SET profile_image='$actual_image_name' WHERE id='$username'"); $image="<h1>Please drag on the image</h1><img src='uploads/".$actual_image_name."' id=\"photo\" style='max-width:500px' >"; $profile_image="<img src='uploads/".$new_name."' style='max-width:500px' >"; } else echo "failed"; } else echo "Invalid file formats..!"; } else echo "Please select image..!"; } ?> <body> <div style="margin:0 auto; width:600px"> <?php echo $image; ?> <div style="padding:5px; width:600px"> <?php echo $profile_image; ?> </div> <div style="width:600px"> <form id="cropimage" method="post" enctype="multipart/form-data"> Upload your image <input type="file" name="photoimg" id="photoimg" /> <input type="hidden" name="image_name" id="image_name" value="<?php echo($actual_image_name)?>" /> <input type="submit" name="submit" value="Submit" /> </form> </div> </div> </body> </html> ajax_image.php PHP Code: <?php define('INCLUDE_CHECK',true); require 'connect.php'; session_start(); $username = $_SESSION['user']; $upload = $_POST['upload']; $t_width = 100; // Maximum thumbnail width $t_height = 100; // Maximum thumbnail height $new_name = "small".$username.".jpg"; // Thumbnail image name $path = "uploads/"; if(isset($_GET['t']) and $_GET['t'] == "ajax") { extract($_GET); $ratio = ($t_width/$w); $nw = ceil($w * $ratio); $nh = ceil($h * $ratio); $nimg = imagecreatetruecolor($nw,$nh); $im_src = imagecreatefromjpeg($path.$img); imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w,$h); imagejpeg($nimg,$path.$new_name,90); mysql_query("UPDATE user SET profile_image_small='$new_name' WHERE username='$username'"); echo $new_name."?".time(); exit; } ?> And I also need a live preview of cropping. So when the user is selecting what area of the Large image they want as there final thumb image, they can see the thumb change to that selection at the same time. The thumb is below the uploaded image, and without refreshing, which I cannot yet do because of the form resubmit, you can't see the final image until you go back to your profile. If I didn't make the above clear enough, please tell me. Thanks for any help and suggestions. Similar TutorialsHello Friends In my jsp,Struts project i am using the javascript calendar control for selecting the date and by using function calcage() i am calculating the age of the user but problem occurs when the page refreshes OR when user updated the other values such as name ,contact no. Then the value of the age is set as 0 in the textfield as 0 So can you please tell me why this problem occurs And please give me solution Thanks when i click on submit button, all the data in form will be inserted into my db. but when i click on refresh the form will be submitted again .. how can i prevent this?
I'm attaching my php test file but this is a JS problem. When I scroll down in the web page and the meta refresh hits, in Windows Safari and IE6/7/8 browsers, the web page re-positions back to the top. In Opera and FF the page refreshes but it stays where it is. Can someone look at my test script and see why it is not working in IE and Win Safari? My goal is to have the web page not re-position to the top on the auto refresh. Thanks... I am building a webpage to make my life easier at work. In the page i am simply loading 3 different web pages that i use 100% of the time between each other, and since they are little tools and i can fit them all nicely in one. However, i'm having a problem doing it with the most important one. I've included all 3 pages via iframes, but the third page doesn't work and becomes the topmost every time. This is because this web page uses the Javascript code snipset below in their page: ---------------------------------------- if (top.location != self.location) { top.location = self.location.href; } ---------------------------------------- Please advise me if you have any solution for that. Many thanks, Arch, Hey, I have two iframes like this: iframe1 = chat window iframe2 = form to enter text to chat Now currently i have iframe1 with a meta refresh on every 1 second. But i've seen live chats before with JS which are not refreshing the page all the time or so it appears...what i mean by this as the meta refreshes the first iframe my browser shows a status bar and loading symbol on firefox, but an old js chat i saw which wasn't free script didn't do this it was pure smooth and didn't look like it was refreshing all the time even if it was it hid it well. How was that done because my method sucks incomparison with make a live chat look "live". Hope you can help me. Hi all, I'm looking for an image cropping tool script that I can provide on my website for users to crop their uploaded photo on my site and I can store them directly on my host. (instead of having to go to another page, or open up photoshop etc, crop their photo, save, and then upload to my site) I see some websites providing this service, does anyone know any scripts that allows me to do this? Thanks in advance! HI I have a form that has some fields and inputs . I wrote some javascript code that if there was any problem with entered values , it shows the errors but when the user press submit button , the form submited before it had shown the problems . How can halt it and showing the problems ? TNX All, I'm trying to have a user upload a photo and then crop the image if they so desire. I want them to be able to select the selected area and then basically use PHP to create the new image. I found a script like this: http://www.dhtmlgoodies.com/index.ht...ipt=image-crop I was just wondering if anyone has any other recommendations or a better way to go about doing this? Thanks in advance for any help. I need to do image cropping through javascript(without jquery) my requirement is just to get the coordinates through some callback function whenever user crop the image and click an ok button please help me with some javascript code here Hi. I have a form and if a field is blank a message pops up. This doesnt stop my php from running though and takes the user to another page. Is there a line to keep them on that page untill all fields are filled out? code so far is simple. <script type="text/javascript" language="JavaScript"> function nameempty() { if ( document.form.subject1.value == '' ) { alert('No name was entered!') return false; } } </script> //then down the bottom I have a small bit that implements that code Hello, I need to know that is there any script available which allows me to upload an image and after uploading it will allow me to crop an image like we do in photoshop via pen tool. In photoshop when we use pen tool, it apply nodes against the images and user can easily change nodes via mouse to change the position of cropping. Is there any type of script available which provides this functionality? Thanks I am very new to javascript and cannot find any info anywhere regarding the following problem: On my website I have around 100 pages containing an action form. Occasionally it is necessary to cancel the action throughout the 100 pages which is very time-consuming. Then the action has to be reinstated once again for all the 100+ pages. I thought the solution would be to use javascript to change the action from a .js file which would mean only one page, the .js file, would require alteration: The action that appears on all 100+ pages several times that I am trying to change or stop happening by overwriting the "form action": <form action="http://www.changenamecart.com/" method="post"> <input type="hidden" name="userid" value="1234567"> <input type="hidden" name="return" value="http://www.thehomepage.co.uk/index.htm"> <input type="image" src="http://www.changenamecart.com/images/pic.gif"> </form> My efforts to date a The change .js file: function change() { var myChange = form action; if(myChange == form action){ document.write("form xction"); } } The html file in the header: <script src="change.js" type="text/javascript"></script> I am afraid that my knowledge of programming is very small and I would welcome any help to solve this problem. I have created a small file where I check if the passwords entered in the code match or not, if they do not match, the button that links to the next webpage should not work(allow them to go to the next wepage). ive tried various websites to help me try and solve this but I just dodont understand what they are doing. I'm very new to programming btw here is some example code: Code: !doctypeHTML
<html>
<script>
//lets just pretend that ive already done all the .getelement by id stuff to get the code things
//suppose the person did not write anything in the form, an error will get pushed(alerted basically)
if(!form['password'].value)
error.push('Missing Password');
<form>
<label>Password<br><input type="password" name="password"></label>
<label>Confirm Password<br><input type="password" name="confirm"</label>
</form>
</html>
now how would I make the submit button not submit if there are errors? please be as simple as possible, I am new to this! Is there a way to stop a form submit after hitting submit? Refresh wouldn't realy be an option. Is abort() what I'm looking for?
Hi guys im trying to give users a warning message with javascript when the submit my login form without inserting any new data. But I can't seem to find out how to stop the form from going to the login.php here is my code. Code: <form name="te" onsubmit='login();' action='login.php' method='post'>
<input name='username' maxlength='14' value='Username' type='text' />
<input name='password' maxlength='20' value='Password' type='password' />
<input type="submit" name="login" value="Login" />
</form>
javascript: Code: <script type="text/javascript">
function login() {
var username = document.te.username.value;
var password = document.te.password.value;
if (username == 'Username' || username == '') {
alert('empty username!');
return false;
}
else {
if (password == 'Password' || password == '') {
alert('empty pass');
return false;
}
}
return true;
}
</script>
hi dears, I'm trying to do simple form validation. But the form submits right after validated! at FireFox only. as i tried it at IE it works fine. condition: if return false the event must be stop, killed submitting the form value's. my form is: Code: <form action="index.php" id="cat_form" method="post" name="cat_form" onsubmit="return cats();"> my js is: Code: function cats()
{
if (document.cat_form.txttitle.value=="")
{
alert ("Sorry, Don't keep it blank!!")
cat_form.txttitle.focus();
return false;
}
else if (document.farticle.txtperpg.value==0)
{
alert("Sorry, Value must be grater than Zero");
cat_form.txtperpg.focus();
return false;
}
else
{
return true;
}
}
Any Idea ? All my parameters will not work after my first form submission unless I refresh my page. Is there a way to refresh the page after the page loads without a continuous loop of refreshes?
I'm trying to submit a form without refreshing the page and I'm not having much luck. The form just resets and nothing is added to the database. The php script works fine as when I use form action - everything is added to the db. Here's the html form: Code: <div id="form">
<form method="post" action="" id="form">
<label for="sections" id="wybierz">Wybierz sekcje</label>
<select id="sections" name="sections">
<option value="sekcjaA">Sekcja A</option>
<option value="sekcjaB">Sekcja B</option>
</select>
<!-- Chose font & background color -->
<label for="fontcolor1" id="colorsLabel">Wybierz kolor czcionki/ tla </label>
<input class="color" id="fontcolor" name="fontColor" value="F0000F" /> <input class="color" id="bgcolor" name="bgcolor" value="ebebeb" />
<!-- Chose font -->
<label for="font" id="choseFontLabel">Wybierz typ/ rozmiar czcionki<abbr title="Wybierz typ oraz rozmiar czcionki">(?)</abbr></label>
<select id="font" name="font">
<option value="Arial" id="arial">Arial</option>
<option value="Comic Sans Ms">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Georgia">Georgia</option>
<option value="Impact" id="impact">Impact</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
<option value="Geneva">Geneva</option>
<option value="Trebuchet MS">Trebuchet MS</option>
</select>
<!-- End chose font -->
<!-- Chose font size -->
<select id="fontSize" name="fontSize">
<option value="9">9px</option>
<option value="10">10px</option>
<option value="11">11px</option>
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="17">17px</option>
<option value="18">18px</option>
<option value="19">19px</option>
<option value="20">20px</option>
</select>
<!-- End chose font size -->
<!-- Chose line height -->
<label for="lineHeight" id="lineHeightLabel">Wybierz wysokosc interlini/ odstep miedzy znakami</label>
<select id="lineHeight" name="lineHeight">
<option value="8">8px</option>
<option value="10">10px</option>
<option value="11">11px</option>
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="17">17px</option>
<option value="18">18px</option>
<option value="19">19px</option>
<option value="20">20px</option>
<option value="21">21px</option>
<option value="22">22px</option>
<option value="23">23px</option>
<option value="24">24px</option>
<option value="25">25px</option>
<option value="26">26px</option>
<option value="27">27px</option>
<option value="28">28px</option>
<option value="29">29px</option>
<option value="30">30px</option>
</select>
<!-- End chose line height -->
<!-- Chose letter spacing -->
<select id="letterSpacing" name="letterSpacing">
<option value="1">1px</option>
<option value="2">2px</option>
<option value="3">3px</option>
<option value="4">4px</option>
<option value="5">5px</option>
<option value="6">6px</option>
<option value="7">7px</option>
<option value="8">8px</option>
<option value="9">9px</option>
<option value="10">10px</option>
</select>
<!-- End chose letter spacing -->
<select id="fontStyle" name="fontStyle">
<option value="Normal">Normal</option>
<option value="Italic">Italic</option>
<option value="Bold">Bold</option>
</select>
<label for="tekst" id="wprowadz">Wprowadz tekst</label>
<input type="button" value="PL" id="PL" onclick="readyTextPL();" />
<input type="button" value="ENG" id="ENG" onclick="readyTextENG();" />
<input type="button" value="Lorem..." id="lorem" onclick="readyTextLorem();" />
<textarea cols="45" rows="5" name="tekst" id="tekst" onclick="clearTextarea();"></textarea>
<label for="add" id="addLabel">Dopisz <abbr title="Dopisz do wybranej sekcji">(?)</abbr></label>
<input type="checkbox" value="Dodaj" id="add" />
<input type="button" value="Wykonaj" id="wykonaj" onclick="copyText();" />
<input type="button" value="Wyczysc Formularz" id="clear" onclick="clearAll();" />
<input type="submit" value="Zapisz" id="save" class="save" /> <span class="success" style="display:none"> Registration Successfully</span>
</form>
here's the script file I'm using: Code: // JavaScript Document
$('.save').click(function(){
var sections = $('#sections').val();
var fontColor = $('#fontcolor').val();
var bgcolor = $('#bgcolor').val();
var font = $('#font').val();
var fontSize = $('#fontSize').val();
var lineHeight = $('#lineHeight').val();
var letterSpacing = $('#letterSpacing').val();
var fontStyle = $('#fontStyle').val();
//Datastring to pass through
var dataString = 'sections=' + sections + '&fontColor' + fontColor + '&bgcolor' + bgcolor + '&font' + font + '&fontSize' + fontSize + '&lineHeight' + lineHeight + '&letterSpacing' + letterSpacing + '&fontStyle' + fontStyle;
$.ajax({
type: "POST",
url: "update.php",
data: dataString,
success: function(){
$('#success').fadeIn(200).show();}
});
});
any ideas what's wrong? Hey everyone, I am trying to create a form that changes depending on the selection from a drop down. I found this thread: http://codingforums.com/showthread.php?t=20516 but rather then hiding all other options it just shows a certain amount of options. I am looking for a drop down that has (for example) 10 options and each option displays a different form while hiding all other forms. I am also wondering if the form can change automatically when the user selects the option without reloading the page. Thanks for everyones help. I am running into a problem, that no one else in the world seems to have. When I make a form and submit the page is refreshed, or rather redirected to a state with the values filled after the ? (i.e. http://localhost/comp-267/lab15.html -> http://localhost/comp-267/lab15.html?cardNUm=). I have found solutions that have worked for other people, none of them work for me. I have tested my forms on multiple browsers on multiple systems and the problem persists. Here is one example of my code where this happens. Code: <script type="text/javascript">
function checkCC(myForm)
{
var ccType;
var ccLength;
var ccNum = myForm.cardNum.value;
if (myForm.cardType.selectedIndex == 0)
{
ccType = "Visa";
}
else if (myForm.cardType.selectedIndex == 1)
{
ccType = "MasterCard"
}
else if (myForm.cardType.selectedIndex == 2)
{
ccType = "AmericanExpress"
}
switch(ccType)
{
case "Visa":
valid = /^4[0-9]{12}(?:[0-9]{3})?$/;
if (valid.test(myForm.cardNum.value))
{
alert("This is a Valid Visa Card");
return true;
}
else
{
alert("This Card Number is Invalid For Visa");
return false;
}
break;
case "MasterCard":
valid = /^5[1-5][0-9]{14}$/;
if (valid.test(myForm.cardNum.value))
{
alert("This is a Valid MasterCard Card");
}
else
{
alert("This Card Number is Invalid For MasterCard");
}
break;
case "AmericanExpress":
valid = /^3[47][0-9]{13}$/;
if (!valid.test(myForm.cardNum.value))
{
alert("This is a Valid American Express Card");
return true;
}
else
{
alert("This Card Number is Invalid For American Express");
return false;
}
break;
default:
valid = /^$/;
alert("Card type not found");
return false;
}
}
</script>
</head>
<body>
<h1>Credit Card Validator</h1>
<form name="creditCard" onsubmit="return checkCC(this)">
<span class="labels">Card Type:</span>
<select name="cardType" size="3">
<option name="visa">Visa</option>
<option name="mc">Master Card</option>
<option name="amex">American Express</option>
</select>
<br />
<span class="labels">Card Number:</span>
<input name="cardNUm" type="text" size=30 value="" />
<br />
<br />
<input type="submit" value="Death to All"
style="background-color:#666666 !important; border:thick groove !important; border-color:#333333 !important"
onclick="javascript:return checkCC(this.form)" />
</form>
</body>
</html>
you can find the page he Form Example How do I get this to not happen? I've tried almost every fix I could find that worked for other people none have worked for me. |
|||||||