only jpg jpeg and .... photos should be uploaded - php

I've been trying to solve this problem for several hours, but it didn't work.
The problem is:
I only want to upload photos such as jpg png, but when I upload photos with this type, I get the error message that should only be displayed if the type of uploaded data is wrong.
I wrote all the code, and I also wrote some parts of the code where the problem might be, sSo that everything is clear for you.
<?php
//msg for the first name,
$msg='';
//msg2 for the last name
$msg2='';
//msg3 for the email
$msg3='';
//msg4 for the date
$msg4='';
//msg5 for the password
$msg5='';
//msg6 for the re Password
$msg6='';
//msg7 for the image
$msg7='';
//msg8 for the checkbox
$msg8='';
$msg9='';
$msg10='';
$firstname='';$lastname='';$email='';$date='';$password='';$c_password='';$image='';
include("includes\header.php");
include("includes\config.php");
/**isset: checks if a variable is set, which means that it has to be declared and is not NULL */
if(isset($_POST['submit']))
{
//mysqli not mysql`enter code here
$firstname=mysqli_real_escape_string($con, $_POST['fname']);
$lastname=mysqli_real_escape_string($con, $_POST['lname']);
$email=mysqli_real_escape_string($con, $_POST['mail']);
$date=$_POST['dob'];
$password=$_POST['pass'];
$c_password=$_POST['cpass'];
$image=$_FILES['image']['tmp_name'];
$checkbox=isset($_POST['check']);
// this two line was for testin, if all this is ok
//echo $firstname. "<br>".$lastname."<br>"."<br>".$email."<br>". "<br>".$date."<br>". "<br>".$password."<br>"
//."<br>".$c_password."<br>"."<br>".$image."<br>"."<br>".$checkbox."<br>";
//strlen is to returns the length of the string(firstname)
if(strlen($firstname) <3)
{
// This message must be displayed if the number of letters of the given name is less than 3
$msg="<div class='error'>First name must contain atleast 3 characters</div>";
}
else if(strlen($lastname) <3)
{
// This message must be displayed if the number of letters of the given lastname is less than 3
$msg2="<div class='error'>Last name must contain atleast 3 characters</div>";
}
//filter_var: filters the email with FVE.
else if(!filter_var($email,FILTER_VALIDATE_EMAIL))
{
// This message must be displayed if the number of letters of the given lastname is less than 3
$msg3="<div class='error'>Enter Vaild Email</div>";
}
else if (empty($date))
{
$msg4="<div class='error'> Please Enter Your Date of Birth</div>";
}
else if (empty($password))
{
$msg5="<div class='error'> Please Enter Your Password </div>";
}
else if (strlen($password) <5)
{
$msg5="<div class='error'>Password must contain atleast 5 Character</div>" ;
}
else if ($password!==$c_password)
{
$msg6="<div class='error'> Password is not same </div>";
}
else if ($image=='')
{
$msg7="<div class='error'> Please Upload Your Profile Image </div>";
}
else if($checkbox=='')
{
$msg8="<div class='error'> Please Agree Our Termas an Conditions </div>";
}
else
{
$img_ext=explode(".",$image);
$image_ext=$img_ext['1'];
if($image_ext=='jpg' || $image_ext=='png' || $image_ext=='PNG' || $image_ext=='JPG' || $image_ext=='jpeg' || $image_ext=='JPEG' )
{
// to conection to the database and gives the values
mysqli_query($con, "INSERT INTO users(first_name,last_name,mail,password,dob,img)
VALUES ('$firstname', '$lastname','$email','$date','$password','$image')");
$msg9="<div class='success'> You are Successfully Registered </div>";
$firstname='';$lastname='';$email='';$date='';$password='';$c_password='';$image='';
}
else
{
$msg7="<div class='error'> Please Upload an Image File</div>";
}
}
// this slash is from the if sumbmit
}
?>
//this part of code is from body
</head>
<style>
</style>
<body>
<!-- container: to set the content's margins dealing with the responsive behaviors of the layout.-->
<div class='container'>
<div class='login-form col-md-4 offset-md-4'>
<!--jumbotron: ndicates a big box for calling extra attention to.-->
<div class='jumbotron' style='margin-top:40px; padding-top:20px; background-color:00FF00; font-size: 20px; width:450px'>
<h3 align='center'>SignUp</h3><br>
<?php echo $msg9;?><br>
<!-- form: to creat form for user input
method=”POST” Specifying a value of POST means the browser will send the data to the web server to be processed.
enctype: specifies how the form-data should be encoded when submitting it to the server:
-->
<form method='post' enctype="multipart/form-data">
<div class="form-group">
<label> First Name: </label>
<!-- 1name: the name of th input
2. placeholder: specifies a short hint that describes the expected value of a input field / textarea.
3. All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.
-->
<input type='text' name='fname' placeholder="First Name" class='form-control' value='<?php echo $firstname;?>'>
<!--IF the type of information provided is not the required one, this message will be displayed-->
<?php echo $msg;?>
<!--the end of the div of First Name-->
</div>
<!--start div of the Last Name-->
<div class="form-group">
<label> Last Name: </label>
<input type='text' name='lname' placeholder="Last Name" class='form-control' value='<?php echo $lastname;?>'>
<!--IF the type of information provided is not the required one, this message will be displayed-->
<?php echo $msg2;?>
<!--the end of the div of the Last Name-->
</div>
<!--start div of the Email-->
<div class="form-group">
<label> Email: </label>
<input type='email' name='mail' placeholder="Your Email" class='form-control' value='<?php echo $email;?>'>
<!--IF the type of information provided is not the required one, this message will be displayed-->
<?php echo $msg3;?>
<!--the end of the div of the Email-->
</div>
<!--start div of the birth day-->
<div class="form-group">
<label> Date of Birth: </label>
<input type='date' name='dob' value='<?php echo $date;?>'>
<?php echo $msg4; ?>
<!--the end of the div of birth day-->
</div>
<!--start div of the Password-->
<div class="form-group">
<label> Password: </label>
<input type='password' name='pass' placeholder="Password" class='form-control' value='<?php echo $password;?>'>
<?php echo $msg5;?>
<!--the end of the div of the Password-->
</div>
<!--start div of the Re-enter Password-->
<div class="form-group">
<label> Re-enter Password: </label>
<input type='password' name='cpass' placeholder="Re-enter Password" class='form-control' value='<?php echo $c_password;?>'>
<?php echo $msg6;?>
<!--the end of the div of the Re-enter Password-->
</div>
<!--start div of the image profile -->
<div class="form-group">
<label> Profile Image: </label>
<input type='file' name='image' value='<?php echo $image;?>'/><br>
<?php echo $msg7;?>
<?php echo $msg10;?>
<!--the end of the div of the image profile -->
</div>
<!--start div of the checkbox -->
<div class="form-group">
<input type='checkbox' name='check' />
I Agree the terms and conditions
<?php echo $msg8;?>
<!--the end of the div of the checkbox -->
</div>
<!-- submit button-->
<br><input type='submit' value='submit' name='submit' class='btn btn-success' style="background-color:blue;"><br>
<!--the end of the form for the sign up icon-->
</form>
<!--the end of the jumbtorn class-->
</div>
</div>
</div>
</body>
</html>
I have rewritten the part of the code here where the problem could be.
// this part is from php
else
{
$img_ext=explode(".",$image);
$image_ext=$img_ext['1'];
if($image_ext=='jpg' || $image_ext=='png' || $image_ext=='PNG' || $image_ext=='JPG' || $image_ext=='jpeg' || $image_ext=='JPEG' )
{
// to conection to the database and gives the values
mysqli_query($con, "INSERT INTO users(first_name,last_name,mail,password,dob,img)
VALUES ('$firstname', '$lastname','$email','$date','$password','$image')");
$msg9="<div class='success'> You are Successfully Registered </div>";
$firstname='';$lastname='';$email='';$date='';$password='';$c_password='';$image='';
}
else
{
$msg7="<div class='error'> Please Upload an Image File</div>";
}
}
This part is from body.
I have rewritten the part of the code here where the problem could be.
<!--start div of the image profile -->
<div class="form-group">
<label> Profile Image: </label>
<input type='file' name='image' value='<?php echo
$image;?>'/><br>
<?php echo $msg7;?>
<?php echo $msg10;?>
<!--the end of the div of the image profile -->
</div>

You can add to your input accept parameter:
<input type="file" name="myImage" accept="image/jpeg" />
When user choosing image he will see only JPG files in own file manager. I don't remember is that worked in every browser. In Chrome must work. In Safari maybe not.
Also you can check your file extention before send to server side. Just write custom validator like this (JS code):
var file = "test.mp4";
var valid = (file.substring(file.lastIndexOf("."), file.length)).toLowerCase();
if (valid != '.jpg') {
console.log("Please Select Valid Image");
} else {
console.log("Is valid image");
}

Related

Submit JQuery form multiple times without reloading page

I am trying to get my jquery form to allow for multiple submissions, but it will not load after a selection.
I have a grid (let's say 2x2). I click on a cell and fill in my name from a jquery form. I click submit and my name will appear in the cell via php. However, when I go to click on another cell the pop-up window does not appear.
I have added a simplified version of my code to jsfiddle (https://jsfiddle.net/7j7wxrpu/).
You can see from there my form is a pop-up window after you click on a cell:
<table border=1>
<tr><td colspan="11"><center><h2>Away Team</h2></center></td></tr>
<tr><th class='header-cols'></th><th class='header-cols'><h1>0</h1></th><th class='header-cols'><h1>1</h1></th></tr><tr><th class='header-rows'><h1>0</h1></th><td class='grid-cells'>
<a href='#myPopup' data-rel='popup'>
<div id='cell' onclick='setCoords(0,0);'>
<div class='grid-num'>1</div>
<div class='grid-name'>justin9</div>
</div>
</a>
</td><td class='grid-cells'>
<a href='#myPopup' data-rel='popup'>
<div id='cell' onclick='setCoords(1,0);'>
<div class='grid-num'>2</div>
<div class='grid-name'>justin10</div>
</div>
</a>
</td></tr><tr><th class='header-rows'><h1>1</h1></th><td class='grid-cells'>
<a href='#myPopup' data-rel='popup'>
<div id='cell' onclick='setCoords(0,1);'>
<div class='grid-num'>3</div>
<div class='grid-name'></div>
</div>
</a>
</td><td class='grid-cells'>
<a href='#myPopup' data-rel='popup'>
<div id='cell' onclick='setCoords(1,1);'>
<div class='grid-num'>4</div>
<div class='grid-name'></div>
</div>
</a>
</td></tr></table>
<div data-role="popup" id="myPopup" class="ui-content" style="min-width:250px;">
<form method="post" action="">
<div>
<h3>Pick This Square:</h3>
<label for="name" class="ui-hidden-accessible">Name:</label>
<input type="text" name="name" id="name" placeholder="Name">
<label for="email" class="ui-hidden-accessible">Email:</label>
<input type="text" name="email" id="email" placeholder="Email">
<input type="submit" data-inline="true" value="Submit">
<!--<input type='hidden' name='row' value=''>
<input type='hidden' name='col' value=''>-->
<div id='row-div'></div>
<div id='col-div'></div>
</div>
</form>
</div>
And here is the php it calls from the file:
<?php
include_once 'connectmysql.php';
if(!isset($_POST['name']) || !isset($_POST['email'])){
//fail because one is blank
echo "Failed the POSt data: Name: " . $_POST['name'] . " | Email: " . $_POST['email'];
}
else{
$name = $_POST['name'];
$email = $_POST['email'];
$row = $_POST['row'];
$col = $_POST['col'];
$tstamp = date("Y-m-d_H:i:s");
//Write to the sql db
$conn = ConnectMySQL();
$sql = "INSERT INTO picks (name,email,paid,row,col,tstamp) VALUES('$name','$email',0,$row,$col,'$tstamp')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
?>
Besides the lack of security in my php is there anything I am missing? How come the pop-up box will only pop-up once until I refresh the page. I also notice when I refresh the page it tries to "Resend" the post data to the server. It looks like I have to clean the post data after a submit, is that a thing?
To do that without reloading the page you should use AJAX call to a PHP script that will insert the new data in the database and then query the database again and send the new values to your JavaScript and then with JavaScript to change the values of the cells.
Also, change names of the IDs - should have unique names: cell1, cell2.

How to debug errors in saving images in database from different inputs

I want to save images in mysql using PHP
but I keep getting an error saying Fatal error: Call to undefined function saveimage() in D:\xampp\htdocs\PHPv2.0\Clients\subreqv2.php on line 100
And this is my code:
<body>
<form method="post" enctype="multipart/form-data">
<br/>
<!-- img1 file browser -->
<div>
<input type="file" name="image1"/>
<br/>
</div>
<!-- img2 file browser -->
<div>
<input type="file" name="image2"/>
<br/>
</div>
<!-- img3 file browser -->
<div>
<input type="file" name="image3"/>
<br/>
</div>
<!-- img4 file browser -->
<div>
<input type="file" name="image4"/>
<br/>
</div>
<!-- img5 file browser -->
<div>
<input type="file" name="image5"/>
<br/>
</div>
<!-- img6 file browser -->
<div>
<input type="file" name="image6"/>
<br/>
</div>
<!-- img7 file browser -->
<div>
<input type="file" name="image7"/>
<br/>
</div>
<input type="submit" name="sumit" value="Upload">
</form>
<?php
if(isset($_POST['sumit']))
{
if(getimagesize($_FILES['image1']['tmp_name'])== FALSE)
{
echo "Please select an image.";
}
else
{
$image1=addslashes($_FILES['image1']['tmp_name']);
$name1=addslashes($_FILES['image1']['name']);
$image1=file_get_contents($image1);
$image1=base64_encode($image1);
$image2=addslashes($_FILES['image2']['tmp_name']);
$name2=addslashes($_FILES['image2']['name']);
$image2=file_get_contents($image2);
$image2=base64_encode($image2);
$image3=addslashes($_FILES['image3']['tmp_name']);
$name3=addslashes($_FILES['image3']['name']);
$image3=file_get_contents($image3);
$image3=base64_encode($image3);
$image4=addslashes($_FILES['image4']['tmp_name']);
$name4=addslashes($_FILES['image4']['name']);
$image4=file_get_contents($image4);
$image4=base64_encode($image4);
$image5=addslashes($_FILES['image5']['tmp_name']);
$name5=addslashes($_FILES['image5']['name']);
$image5=file_get_contents($image5);
$image5=base64_encode($image5);
$image6=addslashes($_FILES['image6']['tmp_name']);
$name6=addslashes($_FILES['image6']['name']);
$image6=file_get_contents($image6);
$image6=base64_encode($image6);
$image7=addslashes($_FILES['image7']['tmp_name']);
$name7=addslashes($_FILES['image7']['name']);
$image7=file_get_contents($image7);
$image7=base64_encode($image7);
saveimage();
}
}
//displayimage();
function saveimagesaveimage($name1,$image1,$name2,$image2,$name3,$image3,$name4,$image4,$name5,$image5,$name6,$image6,$name7,$image7)
{
$con=mysql_connect("localhost","root","");
mysql_select_db("dummy",$con);
$qry="INSERT INTO images (name1,image1,name2,image2,name3,image3,name4,image4,name5,image5,name6,image6,name7,image7) VALUES ('$name1','$image1','$name2','$image2','$name3','$image3','$name4','$image4','$name5','$image5','$name6','$image6','$name7','$image7')";
$result=mysql_query($qry,$con);
if($result)
{
echo "<br/>Image successfully uploaded.";
}
else
{
echo "<br/>Error in uploading image.";
}
}
/* function displayimage()
{
$con=mysql_connect("localhost","root","");
mysql_select_db("dummy",$con);
$qry="SELECT * FROM images";
$result=mysql_query($qry,$con);
while($row = mysql_fetch_array($result))
{
echo '<img height="100" width="100" src="data:image;base64,'.$row['image'].'">';
}
}
*/
?>
</body>
Can anyone point out to me where did I go wrong?
Note: nevermind the use of mysql instead of msqli or PDO I just have to make this work so I could base my main project here.
Thanks for the help in advance. I'll appreciate it.
At the end you are calling saveimage() function, while in the code you have written the function name saveimagesaveimage().
Not only that you are passing many parameters to the function where it is initialised but where you are calling the saveimage() function even with the wrong name, no parameters are passed to it.

How to get a User to select a plan and be dynamically created in the next page (form)

I'd like users to select a plan and the information selected is dynamically applied to the next page and also stored where I can email with the users information entered in a form.
<div class="pricing_box">
<h3>PROFESSIONAL</h3>
<div class="price-value">
$300.00/month
</div>
<ul>
<li>Lorem ipsum</li>
<li>Dolor sitamet, Consect</li>
<li>Adipiscing elit</li>
<li>Proin commodo turips</li>
<li>Laws pulvinarvel</li>
<li>More Details</li>
</ul>
<div class="cart">
<a class="popup-with-zoom-anim" href="contact.html">Buy now</a>
</div>
</div><!--pricing_box-->
<form id="myForm" action="process.php" method="POST">
<label for="humans" class="humans">Human check: Leave this field empty</label>
<input type="text" name="humans" id="humans" class="humans" />
<h1 class="intro">Professional Edition - Sign Up Today</h1>
<div class="form_style_wrapper">
<label>*Name:</label>
<input type="text" name="full_name" class="contact_first_name" title="please enter you Full
Name" />
</div><!--end of form_style_wrapper-->
<div class="form_style_wrapper">
<label>*Email:</label>
<input type="email" name="email" class="contact_email" title="Please specify your email" />
</div><!--end of form_style_wrapper-->
<div class="form_style_wrapper">
<label>*Phone:</label>
<input type="tel" name="phone" class="contact_telephone" title="Please enter you mobile or telephone number" />
</div><!--end of form_style_wrapper-->
<div class="form_style_wrapper">
<label>*Company:</label>
<input type="text" name="company" class="contact_company" title="Please enter you Companies Name" />
</div><!--end of form_style_wrapper-->
<div class="form_style_wrapper">
<label for="comments">Comments:</label>
<textarea name="comments" class="contact-info" id="message"></textarea>
</div><!--end of form_style_wrapper-->
<button name="send" class="send" type="submit">Send</button>
</form>
I have 3 other choices, Professional, Basic, Standard etc. (same box)
Instead of making an additional 3 pages (forms) can I create one page and have the users selection stored dynamically? If chosen Professional, then Professional Form (title appears - same form for all) and can in PHP will I still capture the chosen field so I can email with the users current selection?
Your question is not so clear so I will attempt to answer. If you don't want to create 3 pages you can use $_GET to change the content of your page.
For example, you can do something like
if ( isset($_GET['plan']) ) //check if the plan page is set
{
if ($_GET['plan'] == "pro") {
//Display Professional page here
} elseif ($_GET['plan'] == "basic") {
//Display Basic page here
} elseif ($_GET['plan'] == "standard") {
//Display Standard page here
} else {
echo 'The selected plan is invalid.'; //Display error message or whatever
}
}
else
{
//Display initial page here
}
And your URL would look like http://yourwebsite.com/index.php?plan=pro
One way to do it is to pass a GET variable to the second page. A GET variable is passed through the url like so :
http://yoursite.com/page.php?myVar=3
So If the user chooses a plan by clicking links, do it like so :
First plan
Second plan
Then, on you second page, to retrieve that value, use $_GET['plan']. For example
<?php
switch($_GET['plan']){
case "1": $title="First plan";
break;
case "2": $title="Second plan";
break;
//In case the value is not given, or incorrect
default: print "Error, no plan selected";
exit();
}
?>
<FORM blablabla
...
<h1 class="intro"><?=$title?></h1>
...
</FORM>
This way you associate a number to a plan, and fill the form with the associated data.

Input values lost when form submitted with errors

My form is working fine with the validations being done by PHP.
I have three fields: Name, EMail and Message.
Form and PHP code is within the same pgae, same page is called for validations when user submits the form.
When a user submits the form, same page is called and it checks whether the form is submitted or not.
If the form is submitted it then does the validations for blank entries and throws error message below the fields to inform user that field is left blank. It also shows error icon next to field.
Till this, it is working fine.
However, the problem, is if the user has filled any field, for example name filed and left the other two fields(EMail and Message) blank, then on submittion, it throws error messages for blank fields which is ok, but for name field which was filled by user it empty the content and shows blank name field and does not show error(as earlier user had filled it).
My only concern is that when it relods the form after submission, it should also reload the earlier values in the respective fields which user input before submitting.
Below is the PHP validation code.
<?php
error_reporting(E_ALL & ~E_NOTICE);
if(isset($_POST['nameField_Name']) AND isset($_POST['nameField_EMail']) AND isset($_POST['nameField_Message']) AND isset($_POST['nameSubmit'])){
// Form Submited
if ($_POST['nameField_Name']) {
$phpVarNameField = mysql_escape_string($_POST['nameField_Name']);
} else {
$errormsgNameField = "Name field is required, Please enter your Name.";
}
if ($_POST['nameField_EMail']) {
$phpVarEMailField = mysql_escape_string($_POST['nameField_EMail']);
} else {
$errormsgEMailField = "E-Mail field is required, Please enter your E-Mail ID.";
}
if ($_POST['nameField_Message']) {
$phpVarMessageField = mysql_escape_string($_POST['nameField_Message']);
} else {
$errormsgMessageField = "Message field is required, Please enter your Message.";
}
}
?>
Below is the form code.
<form name="myform" action="contactus.php" method="post"">
<div id="r1">
<div id="r1c1">
<input type="text" name="nameField_Name" id="idField_Name" placeholder="Enter your name here"/>
</div>
<div id="r1c2">
<?php
if(isset($errormsgNameField)){ // Check if $msg is not empty
echo '<img src="error.png" width="45" height="45" style="margin: 5px 0px" alt="">';
}
?>
</div>
</div>
<div id="afterr1">
<?php
if(isset($errormsgNameField)){ // Check if $msg is not empty
echo '<div class="statusmsg" id="idErrorMsgNameField">'.$errormsgNameField.'</div>'; // Display our message and wrap it with a div with the class "statusmsg".
}
?>
</div>
<div id="r2">
<div id="r2c1">
<input name="nameField_EMail" type="text" id="idField_EMail" placeholder="Enter your E-Mail address here" />
</div>
<div id="r2c2">
<?php
if(isset($errormsgEMailField)){ // Check if $msg is not empty
echo '<img src="error.png" width="45" height="45" style="margin: 5px 0px" alt="">';
}
?>
</div>
</div>
<div id="afterr2">
<?php
if(isset($errormsgEMailField)){ // Check if $msg is not empty
echo '<div class="statusmsg" id="idErrorMsgEMailField">'.$errormsgEMailField.'</div>'; // Display our message and wrap it with a div with the class "statusmsg".
}
?>
</div>
<div id="r3">
<div id="r3c1">
<textarea name="nameField_Message" id="idField_Message" placeholder="Enter your message for us here"></textarea>
</div>
<div id="r3c2">
<?php
if(isset($errormsgMessageField)){ // Check if $msg is not empty
echo '<img src="error.png" width="45" height="45" style="margin: 115px 0px" alt="">';
}
?>
</div>
</div>
<div id="afterr3">
<?php
if(isset($errormsgMessageField)){ // Check if $msg is not empty
echo '<div class="statusmsg" id="idErrorMsgMessageField">'.$errormsgMessageField.'</div>'; // Display our message and wrap it with a div with the class "statusmsg".
}
?>
</div>
<div id="r4">
<div id="r4c">
<input type="Submit" name="nameSubmit" id="idButton_Submit" value="Submit" alt="Submit Button"/>
</div>
</div>
</form>
Any help will be great on this.
Thank You.
You will need to add a value attribute on your <input> elements:
<input type="text"
name="whatever"
value="<?php echo htmlspecialchars($_POST['whatever']); ?>"
>
It may be easier to read if PHP outputs the field:
<?php
printf('<input type="text" name="%s" value="%s">',
'whatever',
htmlspecialchars($_POST['whatever']));
?>
This can even be wrapped in a function so you don't need to retype it for every single form field.
Note the call to htmlspecialchars. It is needed so that < and > and quotes don't destroy your HTML document.
Try changing your tag like :
<input type="text"
name="nameField_Name"
id="idField_Name"
placeholder="Enter your name here"
value ="<?php
if (isset($phpVarNameField))
echo $phpVarNameField;
?>"
/>
.......
<input
name="nameField_EMail"
type="text"
id="idField_EMail"
placeholder="Enter your E-Mail address here"
value ="<?php if (isset($phpVarEMailField)) echo $phpVarEMailField; ?>"
/>
.......
<textarea name="nameField_Message" id="idField_Message" placeholder="Enter your message for us
here" value ="<?php if (isset($phpVarMessageField)) echo $phpVarMessageField; ?>" ></textarea>
Good Luck !
Well, You could do validation with jQuery validation plugin - easy and good. jQuery plugin
Or with PHP store POST data in array, check for errors and fields that are not empty set as value to input text.
if (isset($_POST)) {
$data = $_POST;
}
foreach ($data as $row) {
if ($row == "")
$error = true; // do what ever you want
}
and then in form
<input type="text" name="name" value="<?php ($data['name'] != "")? $data['name'] : '' ?>" />
something like this.

Modal Pop Up To Hover Over Parent Page [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 11 years ago.
I wonder whether someone could help me please.
I've really got myself in a bit of a pickle with this and I just seem to be going round in circles to find a solution.
I have created this modal dialog page to allow users to upload images. I would like to access this through the click of the 'Upload Images' button on this page.
The problem I have is two fold, but are linked.
I can't seem to get the modal dialog page to act as a pop dialog hovering over the parent page, instead it opens as another web browser page, and because I'm using two submit buttons, I can't get the 'submit' functionality to work independently i.e. one that submits the form, whilst the other opens up the modal dialog.
I've been working on this for quite some time now, changing the button types, giving specific name to each button and calling that in a Javascript function, but I just can't seem to find the solution.
I just wondered whether someone could perhaps have a look at this please and help me with this problem.
For ease, I've added the code below:
Modal Dialog
<!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>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css"
type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#dialog").dialog();
modal: true
//getter
var modal = $( ".dialog" ).dialog( "option", "modal" );
//setter
$( ".dialog" ).dialog( "option", "modal", true );
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="dialog">
</head>
<?php
//define a maxim size for the uploaded images
//define ("MAX_SIZE","100");
// define the width and height for the thumbnail
// note that theese dimmensions are considered the maximum dimmension and are not fixed,
// because we have to keep the image ratio intact or it will be deformed
define ("WIDTH","150");
define ("HEIGHT","100");
// this is the function that will create the thumbnail image from the uploaded image
// the resize will be done considering the width and height defined, but without deforming the image
function make_thumb($img_name,$filename,$new_w,$new_h)
{
//get image extension.
$ext=getExtension($img_name);
//creates the new image using the appropriate function from gd library
if(!strcmp("jpg",$ext) || !strcmp("jpeg",$ext))
$src_img=imagecreatefromjpeg($img_name);
if(!strcmp("png",$ext))
$src_img=imagecreatefrompng($img_name);
//gets the dimmensions of the image
$old_x=imageSX($src_img);
$old_y=imageSY($src_img);
// next we will calculate the new dimmensions for the thumbnail image
// the next steps will be taken:
// 1. calculate the ratio by dividing the old dimmensions with the new ones
// 2. if the ratio for the width is higher, the width will remain the one define in WIDTH variable
// and the height will be calculated so the image ratio will not change
// 3. otherwise we will use the height ratio for the image
// as a result, only one of the dimmensions will be from the fixed ones
$ratio1=$old_x/$new_w;
$ratio2=$old_y/$new_h;
if($ratio1>$ratio2) {
$thumb_w=$new_w;
$thumb_h=$old_y/$ratio1;
}
else {
$thumb_h=$new_h;
$thumb_w=$old_x/$ratio2;
}
// we create a new image with the new dimmensions
$dst_img=ImageCreateTrueColor($thumb_w,$thumb_h);
// resize the big image to the new created one
imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y);
// output the created image to the file. Now we will have the thumbnail into the file named by $filename
if(!strcmp("png",$ext))
imagepng($dst_img,$filename);
else
imagejpeg($dst_img,$filename);
//destroys source and destination images.
imagedestroy($dst_img);
imagedestroy($src_img);
}
// This function reads the extension of the file.
// It is used to determine if the file is an image by checking the extension.
function getExtension($str) {
$i = strrpos($str,".");
if (!$i) { return ""; }
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}
// This variable is used as a flag. The value is initialized with 0 (meaning no error found)
//and it will be changed to 1 if an error occurs. If the error occures the file will not be uploaded.
$errors=0;
// checks if the form has been submitted
if(isset($_POST['Submit']))
{
$title = ($_POST['title']);
if ($title == '') // if title is not set
$title = '(No Title Provided)';// use (empty title) string
//reads the name of the file the user submitted for uploading
$image=$_FILES['image']['name'];
// if it is not empty
if ($image == '')
{
echo '<b> Error! </b> - You <b> must </b> select a file to upload before selecting the <b> "Upload image" </b> button. Please try again.';
$errors=1;
}
else
if ($image)
{
// get the original name of the file from the clients machine
$filename = stripslashes($_FILES['image']['name']);
// get the extension of the file in a lower case format
$extension = getExtension($filename);
$extension = strtolower($extension);
// if it is not a known extension, we will suppose it is an error, print an error message
//and will not upload the file, otherwise we continue
if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png"))
{
echo '<b> Error! </b> - The image that you attempted to upload is not in the correct format. The file format <b> must </b> be one of the following: <b> "jpg", "jpeg" </b> or <b> "png" </b>. Please try again.';
$errors=1;
}
else
{
// get the size of the image in bytes
// $_FILES[\'image\'][\'tmp_name\'] is the temporary filename of the file in which the uploaded file was stored on the server
$size=getimagesize($_FILES['image']['tmp_name']);
$sizekb=filesize($_FILES['image']['tmp_name']);
//compare the size with the maxim size we defined and print error if bigger
if ($sizekb > 1150000)
{
echo '<b> Error! </b> - The file that you are attempting to upload is greater than the prescribed <b> 1MB </b> limit. Please try again.';
$errors=1;
}
//we will give an unique name, for example the time in unix time format
$image_name=$title.'.'.$extension;
//the new name will be containing the full path where will be stored (images folder)
$newname="images/".$image_name;
$copied = copy($_FILES['image']['tmp_name'], $newname);
//we verify if the image has been uploaded, and print error instead
if (!$copied)
{
echo '<b> Error! </b> Your file has not been loaded';
$errors=1;
}
else
{
// the new thumbnail image will be placed in images/thumbs/ folder
$thumb_name='images/thumbs/'.$image_name;
// call the function that will create the thumbnail. The function will get as parameters
//the image name, the thumbnail name and the width and height desired for the thumbnail
$thumb=make_thumb($newname,$thumb_name,WIDTH,HEIGHT);
}} }}
//If no errors registred, print the success message and show the thumbnail image created
if(isset($_POST['Submit']) && !$errors)
{
echo '<br><b> Success! </b> - Your image has been uploaded</br>';
echo '<img src="'.$thumb_name.'">';
}
?>
<!-- next comes the form, you must set the enctype to "multipart/form-data" and use an input type "file" -->
<form name="newad" method="post" enctype="multipart/form-data" action="">
<table>
<tr><td><input type="text" name="title" ></td></tr>
<tr><td><input type="file" name="image" ></td></tr>
<tr><td><input name="Submit" type="submit" value="Upload image"></td></tr>
</table>
</form>
</div>
</html>
Parent Page Form Code
<form name="savemyfindstolocation" id="savemyfindstolocation" method="post" action="testdialog.php">
<p><label></label>
</p>
<p align="left">
<input name="userid" type="text" id="userid"/>
<input name="locationid" type="text" id="locationid"/>
<br />
</p>
<div>
<label>
<div align="left">Click on the map to place the marker for the find that has been made and drag until the precise location has been found. </div>
</div>
<p align="left"><label>Find OSGB36 Latitude Co-ordinate<br />
</label>
</p>
<div>
<div align="left">
<input name="findosgb36lat" type="text" id="findosgb36lat" size="20" />
</div>
</div>
<p align="left"><label>Find OSGB36 Longitude Co-ordinate<br />
</label>
</p>
<div>
<div align="left">
<input name="findosgb36lon" type="text" id="findosgb36lon" size="20" />
</div>
</div>
<p align="left"><label>Date of Trip<br />
</label>
</p>
<div>
<div align="left">
<input name="dateoftrip" type="text" id="dateoftrip" size="10" />
</div>
</div>
<p align="left"><label>Find Category</label>
<label><br />
</label>
</p>
<div>
<div align="left">
<?php
mysql_connect("host", "user", "password") or die("Connection Failed");
mysql_select_db("database")or die("Connection Failed");
$query = "SELECT * FROM findcategories";
$result = mysql_query($query);
?>
<select name="findcategory" id="findcategory">
<option value=''>Select a Find Category</option>
<?php
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
?>
<option value="<?php echo $line['findcategory'];?>"> <?php echo $line['findcategory'];?> </option>
<?php
}
?>
</select>
</div>
</div>
<p align="left">Find Name</p>
<div>
<div align="left">
<input name="findname" type="text" id="findname" size="35" />
</div>
</div>
<p align="left"> Find Description</p>
<div>
<div align="left">
<input name="finddescription" type="text" id="finddescription" size="150" />
</div>
</div>
<p align="left">
<label> Detector Used</label>
</p>
<div>
<div align="left">
<select id="detectorname" name="detectorname" onchange="getTextList(this)">
<option value="">Select a Detector</option>
<?php
// QUERY DATABASE TO GET CATEGORIES
$query = mysql_query("SELECT detectorid, detectorname FROM detectors ORDER BY detectorname ASC") or die(mysql_error());
// LOOP THROUGH ROWS RETURNED TO CREATE SELECT BOX
while($row = mysql_fetch_array($query)) {
echo '<option value="'.$row['detectorid'].'">'.$row['detectorname'].'</option>';
}
?>
</select>
</div>
</div>
<p align="left">
<label>Search Head Used<br />
</label>
</p>
<div>
<div align="left">
<select id="searchheadname" name="searchheadname">
</select>
</div>
</div>
</div>
<p align="left">
<label>Detector Settings</label>
<label><br />
</label>
</p>
<div>
<div align="left">
<textarea name="detectorsettings" cols="50" rows="12" id="detectorsettings"></textarea>
</div>
</div>
<p align="left">
<label>PAS Ref. (if known)<br />
</label>
</p>
<div>
<div align="left">
<input name="pasref" type="text" id="pasref" size="9" />
</div>
</div>
<p align="left"><label>Additional Comments</label>
</p>
<div>
<div align="left">
<textarea name="additionalcomments" cols="50" rows="12" id="additionalcomments"></textarea>
</div>
</div>
</p>
<p>
<label>
<div align="left">
<input name="uploadimages" type="submit" id="uploadimages" value="Upload Image(s)"/>
</div>
</label>
</p>
<p align="left"><label>Do you wish to make this find public?<br />
</label>
</p>
<div>
<div align="left">
<?php
mysql_connect("host", "user", "password") or die("Connection Failed");
mysql_select_db("database")or die("Connection Failed");
$query = "SELECT * FROM makepublicoptions";
$result = mysql_query($query);
?>
<select name="makepublic" id="makepublic">
<option value=''>Choose 'Yes' or 'No'</option>
<?php
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
?>
<option value="<?php echo $line['publicoption'];?>"> <?php echo $line['publicoption'];?> </option>
<?php
}
?>
</select>
</div>
</div>
<p align="left">
<input name="submit" type="submit" value="Submit" />
</form>
Sincere thanks and regards
Try this:
HTML
Use a <button> element isntead of a submit button. Forms should never have more than one 'submit' button.
<button name="uploadimages" type="button" id="uploadimages">Upload Image(s)</button>
JS
$(function() { // Is the same as $(document).ready(function() {
$('#uploadimages').on('click', function() {
$("#dialog").dialog({
modal: true
});
});
});
Javascript has three modal dialogs - alert(), confirm() and prompt(). What you need is a psuedo-dialog box, that essentially disables the page below and shows some custom HTML.
The jQuery UI plug in has some nice features that will let you do this with a minimum of code (see http://jqueryui.com/demos/dialog/ for an example of jQuery dialogs).
Once the HTML for your dialog is on the same page as your app, you should be all set for getting your submits and such working, since they'll all be in the same window.

Categories