I want to handle row in bootstrap. Kindly check what i am doing:
<div class="form-group col-md-6">
<?php if($saved_image != ''): ?>
<div style="width:100px; height:100px">
<img class="img-thumb" src="<?=$saved_image;?>" alt="saved image" />
<br>
Delete Image
<!-- Start Another image 2 -->
<img class="img-thumb" src="<?=$saved_image;?>" alt="saved image" />
<br>
Delete Image
<!-- End Another image 2 -->
</div>
<!-- If Edit Happen - End -->
<?php else:?>
<!-- If image empty or user first time add product[data is not saved in the database] -->
<label for="photo">Product Photo:</label>
<input class="form-control" type="file" name="photo[]" id="photo" multiple>
<?php endif;?>
</div> <!-- close form-group div -->
<div class="form-group col-md-6">
<label for="description">Description:</label>
<textarea class="form-control" name="description" id="description" rows="6"><?= $description ;?></textarea>
</div>
Kindly check the below image what I am getting the output:
I want iron images will show next to each other and if more images are there then it will show on the next line but not below the description box. The description box will be there always where it is showing right now.
Kindly suggest what I am doing wrong. Your suggestions would be welcome.
you can try with more div tags in your existing code..
<div class="form-group col-md-6">
<?php if($saved_image != ''): ?>
<div class="col-md-6"><!-- This is EDITED-->
<img class="img-thumb" src="<?=$saved_image;?>" alt="saved image" />
<br>
Delete Image
</div> <!-- This Is ADDED NEWLY-->
<div class="col-md-6"> <!-- This Is ADDED NEWLY-->
<!-- Start Another image 2 -->
<img class="img-thumb" src="<?=$saved_image;?>" alt="saved image" />
<br>
Delete Image
<!-- End Another image 2 -->
</div> <!-- This Is ADDED NEWLY-->
</div>
<!-- If Edit Happen - End -->
<?php else:?>
<!-- If image empty or user first time add product[data is not saved in the database] -->
<label for="photo">Product Photo:</label>
<input class="form-control" type="file" name="photo[]" id="photo" multiple>
<?php endif;?>
Related
I have created a form for something i call a site survey. Before i had the form one one page. But decided to spread it across three html/css tabs. At first it did let me submit to a MySQL db. But I didn't make a backup of a working example with the tabs as it wasn't fully what I wanted yet.
Now it glitches and wont create a new record in the db
Problem
I fill in the first part of the form which works Okay. I click next to send me to the next tab. and go to fill in the rest of the form. I am instantly seeing one of the "please fill out this field" because it is "required" in the code. Once filled, i press the next button again. Which this then takes me to the next tab but then instantly to the first tab and refreshes everything
The next and previous buttons work and dont glitch when there are no answers entered into the fields
I have no idea how to solve the problem. Which is why I'm seeing if anyone can help.
edit
I changed the button to an A tag like the "previous" a tag does. This stops the glitches. However the form does not submit...
Function for the Next/Previous button to work -
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.next-button').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
//trigger the click on the tab same like we click on the tab
});
$('.previous-button').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
//trigger the click on the tab same like we click on the tab
})
</script>
HTML Code -
<div class="row"> <!-- 2 -->
<form class="row g-3" action="<?= $data['action'] ?>" method="post"><!-- 3 -->
<div class="col-sm-12 survey-tabs"> <!-- 4 -->
<ul class="nav nav-tabs" hidden>
<li class="active">Contact & Site Details</li>
<li class="">Questions</li>
<li class="">Site Details</li>
</ul>
<div class="tab-content"><!-- 5 -->
<div class="tab-pane active" id="tab1">
<h1>Contact & Site Details</h1>
<div class="row"> <!-- START TAB ROW 1 -->
<div class="col-md-7">
<label for="site_name" class="form-label">Site Name*</label>
<input type="text"
class="form-control"
id="site_name"
name="site_name"
value="<?= $data['record']['site_name'] ?? '' ?>"
placeholder="Enter Site Name"
required><br>
</div>
<div class="col-md-5">
<label for="poNum" class="form-label">PO Number*</label>
<input type="text"
class="form-control"
id="poNum"
name="poNum"
value="<?= $data['record']['poNum'] ?? '' ?>"
placeholder="Enter PO Num (Given in Email)"
required>
</div>
<div class="tab-control">
<a class="next-button" role="button"><button class="btn btn-primary">Next</button></i></a>
</div>
</div>
<!---------------------------------------------------------------------------------------------------------------------------------------->
<div class="tab-pane" id="tab2">
<h1>Questions</h1>
<div class="row"><!-- START TAB ROW 2 -->
<div class="col-12">
<h6 for="current_machine">1. What is your Current Machine?</h6>
<input type="text"
class="form-control"
id="current_machine"
name="current_machine"
value="<?= $data['record']['current_machine'] ?? '' ?>"
placeholder="Leave blank if none"><br>
</div>
<div class="col-12">
<h6 for="ordered_machine">2. What Machine did you Order?*</h6>
<input type="text"
class="form-control"
id="ordered_machine"
name="ordered_machine"
value="<?= $data['record']['ordered_machine'] ?? '' ?>"
placeholder="Machine(s) Ordered"
required> <br>
</div>
</div> <!-- END TAB ROW 2 -->
<div class="tab-control">
<a class="previous-button" role="button"><i class="fa fa-angle-left fa-3x fa-fw"></i></a>
<a class="next-button" role="button"><button class="btn btn-primary">Next</button></i></a>
</div>
</div>
<!---------------------------------------------------------------------------------------------------------------------------------------->
<div class="tab-pane" id="tab3">
<h1>Site Details</h1>
<div class="row"><!-- START TAB ROW 3 -->
<div class="col-12">
<h6 for="q7">9. What floor is the Machine(s) going to be located on?</h6>
<input type="text"
class="form-control"
id="q7"
name="q7"
value="<?= $data['record']['q7'] ?? '' ?>"
placeholder="Please enter what floor your machine will be located on"> <br><br>
</div>
</div> <!-- END TAB ROW 3 -->
<div class="tab-control">
<a class="previous-button" role="button"><i class="fa fa-angle-left fa-3x fa-fw"></i></a>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary mb-3"><?= $data['button'] ?></button>
</div>
</div>
</div><!-- 5 -->
</div><!-- 4 -->
</form><!-- 3 -->
</div> <!-- 2 -->
</div><!-- 1 -->
first of all sorry for my bad English. I have hit a point in my project that i can't finde a solution on, so I will ask for help.
First let me explain a little about what the project is:
The system is a big upload system for a customer. each file there are selected need a Title.
As you can see I have many "Chose File" that because there need to be a max number of files pr categories (this can be change invidually) and the Title (the box beside the orange upload) are Required if you have chose a file.
My problem:
Click upload on each category are ignoring so wanna make one button to push there activate the upload for all those files. that easy enough, but here it's come: at the Host this system run on the max "upload size" is 90MB so when I have multiple files at the same time, its hit really quick the max.
This is how the HTML looks:
<form method='POST' accept-charset='UTF-8' enctype='multipart/form-data' >
<div class="inputs">
<label for="uMP1">Vælg Fil</label>
<input type="text" name='titles[]'>
<!-- Thumbnail -->
<div class="thumbnail" id="MP1"></div>
<!-- File -->
<input id="uMP1" name='files[]' type="file">
</div>
<div class="inputs">
<label for="uMP2">Vælg Fil</label>
<input type="text" name='titles[]'>
<!-- Thumbnail -->
<div class="thumbnail" id="MP2"></div>
<!-- File -->
<input id="uMP2" name='files[]' type="file">
</div>
<div class="inputs">
<label for="uMP3">Vælg Fil</label>
<input type="text" name='titles[]'>
<!-- Thumbnail -->
<div class="thumbnail" id="MP3"></div>
<!-- File -->
<input id="uMP3" name='files[]' type="file">
</div>
<input type="Submit" name='Upload' value="Upload">
</form>
Is there any there can help me make this script or know a plugin there can do this?
PS: Do not have access to the php.ini
Premise that I have never used PHP, but ASPNET Core 2.1
I also had a similar problem and the solution is to give different names for each input file.
For example:
<div class="inputs">
<label for="uMP1">Vælg Fil</label>
<input type="text" name='titles[]'>
<!-- Thumbnail -->
<div class="thumbnail" id="MP1"></div>
<!-- File -->
<input id="uMP1" name='files1' type="file">
</div>
<div class="inputs">
<label for="uMP2">Vælg Fil</label>
<input type="text" name='titles[]'>
<!-- Thumbnail -->
<div class="thumbnail" id="MP2"></div>
<!-- File -->
<input id="uMP2" name='files2' type="file">
</div>
Recently I need to use multiple input type file in one form. But when I post the form its returning null. Like I have nothing on $_POST. I have also add the enctype="multipart/form-data". I am stacked for last 2 days. Googled for many times. But still didn't get any solution. Please help me to out of this.
<form enctype="multipart/form-data" action="/admin/process_post/savepost" method="POST">
<div class="uk-grid uk-grid-small" data-uk-grid-margin="">
<div class="uk-width-medium-7-10">
<div class="md-card">
<div class="md-card-content">
<h3 class="heading_a uk-margin-medium-bottom">Add New Canvas</h3>
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-1">
<div class="uk-form-row">
<label>Post Title</label>
<input type="text" name="post_title" id="post_title" class="md-input" />
</div>
<div class="uk-form-row">
<label>Post Description</label>
<textarea id="post_desc" name="post_desc" cols="30" rows="20"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-width-medium-3-10">
<div class="md-card">
<div class="md-card-content">
<div class="uk-form-row">
<p>
<input type="checkbox" name="post_status" id="post_status" checked data-md-icheck />
<label for="post_status" class="inline-label">Post Status</label>
</p>
</div>
</div>
</div>
<div class="md-card">
<div class="md-card-content">
<div class="uk-form-row">
<label for="post_attachment" class="inline-label">Post Featured Image</label>
<input type="file" id="post_attachment" name="post_attachment">
</div>
</div>
</div>
<div class="md-card">
<div class="md-card-content">
<div class="uk-form-row">
<label for="result_img" class="inline-label">Post result Image</label>
<input type="file" id="result_img" name="result_img" multiple="multiple">
</div>
</div>
</div>
<div class="md-card">
<div class="md-card-content">
<div class="uk-form-row">
<button type="submit" class="uk-form-file md-btn md-btn-primary">Save Post</button>
</div>
</div>
</div>
</div>
</div>
</form>
I know this is a silly situation for a developer when they face problem like this.
Files can be gotten through $_FILES
When doing multiple uploads at same name, name it as array appending [] at end of name example: ( name="images[]" )
If upload continues to appear as empty, and you said in comment that with one file it's doing right, try to change at php.ini post_max_size and upload_max_filesize to a larger amount. Also check max_file_uploads - the number of files allowed for uploads per single request.
Your problem should be your form action, try to put an "/" on the end of it and see if it works:
<form enctype="multipart/form-data" action="/admin/process_post/savepost/" method="POST">
You need to change your file input name to an array
<input type="file" id="result_img" name="result_img[]">
Also try adding multiple
<input type="file" id="result_img" name="result_img[]" multiple>
To check for files you must use $_FILES instead of $_POST
My form fields have space in them, if I select and delete this space my prefilled text shows back up. I don't know what to make of this and have been trouble shooting all day. Any ideas? Here is my code...
<?php
include '_include/php/header.php';
#set variables to be used in the header
$page_title = "Assesment";
?>
<div class="page" id="subheader">
<div class="container">
<!-- Title Page -->
<div class="row">
<div class="span12">
<div class="title-page">
<h2 class="title">Four simple steps...</h2>
<h3 class="title-description">To dictate what you need
in a website</h3>
</div>
</div>
</div><!-- End Title Page -->
<!-- submenu -->
<?php
include '_include/php/submenu.php'; ?>
</div>
</div><!-- End sub header -->
<!-- main Section -->
<div class="page" id="contact">
<div class="container">
<!-- Title Page -->
<div class="row">
<div class="span12">
<div class="title-page">
<h2 class="title">Assesment - Step One</h2>
<h3 class="title-description">Status: <span class=
"color-text"><?php echo $assessresult; ?></span></h3>
</div>
</div>
</div><!-- End Title Page -->
<!-- main Form -->
<div class="row">
<div class="span9">
<form action="assessment_submitted.php" class="contact-form" id="contact-form"
method="post" name="contact-form">
<h3 class="color-text">What do you wish to get out of
your website?</h3>
<p class="contact-message">
<textarea required cols="10" id="client-goals" name=
"client-goals" placeholder=
"What do you wish to acheive by having a website? ie. creating a web presence, expanding sales by creating an online market, networking, ect."
rows="5">
</textarea></p>
<h3 class="color-text">What key fatures are you looking
for?</h3>
<p class="contact-message">
<textarea required cols="10" id="client-needs" name=
"client-needs" placeholder=
"What key features are you looking to have within your website? ie. storefront, social media intigrtion, a blogging platform, content managment system, ect."
rows="5">
</textarea></p>
<script type = "text/javascript" >
var i = 1;
function addUrl() {
if (i < 3) {
i++;
var p = document.createElement('p');
p.innerHTML =
'<hr><textarea required id="client-needs" placeholder="Add URL #' + i +
'" name="example' + i +
'" rows="1" cols="10"><\/textarea><input type="button" value="Remove added URL" onclick="removeUrl(this)">';
document.getElementById('example').appendChild(p);
} //END if
} //END addUrl function
function removeUrl(textarea) {
textarea.parentNode.parentNode.removeChild(textarea.parentNode);
i--;
} //END removeUrl function
</script>
<h3 class="color-text">Do you have and examples of what
you want?</h3>
<p class="contact-message" id="example">
<textarea cols="10" id="examples" name="example1"
placeholder="Do you know of any website like the one you want? ie. google.com, p5services.com, youtube.com"
rows="1">
</textarea></p><br>
<input onclick="addUrl()" type="button" value=
"Add url example">
<h3 class="color-text">Do you have a budget in
mind?</h3>
<p class="contact-message">
<textarea required cols="10" id="client-budget" name=
"client-budget" placeholder=
"Enter a budget, approximate or exact. This will help us decide if the scope of your project is in line with what you are interested in spending"
rows="2">
</textarea></p>
<h3 class="color-text">Do you have a timeline or
deadline?</h3>
<p class="contact-message">
<!-- <textarea id="client-deadline" placeholder="When do you need this done by?" name="client-deadline" rows="2" cols="10"></textarea> -->
<!-- <input id="client-deadline" name="client-deadline"
type="date"></p> -->
<!-- add a call to action for further services later -->
<h3 class="color-text">Any other comments?</h3>
<p class="contact-message">
<textarea cols="10" id="client-comments" name=
"client-comments" placeholder=
"Don't let us over look anything!" rows="5">
</textarea></p>
<p class="contact-submit"><input name=
"submit_assessment" type="submit" value=
"Save New Record"></p>
<div id="response"></div>
</form>
</div>
<div class="span3">
<div class="contact-details">
<h3><span class="font-icon-info"></span> Assesment
Objective</h3>
<p>The assesment section is used to define your needs
and help us decided what tool we need to impliment in
order to help you reach your goals</p>
<h4 class="color-text">After submitting this you will
recive a quote!</h4>
</div>
</div>
</div><!-- End main Form -->
</div>
</div><!-- End main Section -->
<?php
include '_include/php/footer.php'; ?>
The textarea element takes placeholder text in a different form. You need to put it between the tags like so:
<textarea>My text area placeholder text goes here</textarea>
The space that you are seeing then deleting to see your placeholder is caused by the line break between your opening and closing textarea tags
I have a HTML Form that uses partial PHP to grab the value, the form is basically like an edit account details form.
The Problem
I cannot work out why the form is not working and when using notepad++ to edit my code if I click on the it shows the start to be a DIV which just confuses the matter even more... When submitting the form it takes you back to the form page with no message so I am lost for a reason..
Form Page
<form method="POST" action="dev.php">
<!-- Row -->
<div class="row-fluid">
<!-- Column -->
<div class="span6">
<!-- Group -->
<div class="control-group">
<label class="control-label" for="fname">First name</label>
<div class="controls">
<input type="text" name="fname" id="fname" value="<?php echo $user_fname; ?>" class="span10" />
<span style="margin: 0;" class="btn-action single glyphicons circle_question_mark" data-toggle="tooltip" data-placement="top" data-original-title="First name is mandatory"><i></i></span>
</div>
</div>
<!-- // Group END -->
<!-- Group -->
<div class="control-group">
<label class="control-label" for="lname">Last name</label>
<div class="controls">
<input type="text" name="lname" id="lname" value="<?php echo $user_sname; ?>" class="span10" />
<span style="margin: 0;" class="btn-action single glyphicons circle_question_mark" data-toggle="tooltip" data-placement="top" data-original-title="Last name is mandatory"><i></i></span>
</div>
</div>
<!-- // Group END -->
</div>
<!-- // Column END -->
<!-- Column -->
<div class="span6">
<!-- Group -->
<div class="control-group">
<label class="control-label" for="email">Email Address</label>
<div class="controls">
<input type="text" name="email" id="email" value="<?php echo $user_email; ?>" class="span10" />
<span style="margin: 0;" class="btn-action single glyphicons circle_question_mark" data-toggle="tooltip" data-placement="top" data-original-title="First name is mandatory"><i></i></span>
</div>
</div>
<!-- // Group END -->
<!-- Group -->
<div class="control-group">
<label class="control-label" for="phonenumber" >Phone Number:</label>
<div class="controls">
<input type="text" name="phonenumber" id="phonenumber" value="<?php echo $user_number; ?>" class="span10" />
</div>
</div>
<!-- // Group END -->
</div>
<!-- // Column END -->
</div>
<!-- // Row END -->
<div class="separator line bottom"></div>
<!-- Group -->
<div class="control-group row-fluid">
<label class="control-label" for="bio">About me</label>
<div class="controls">
<textarea id="bio" name="bio" class="span12" rows="5"><?php echo $user_bio;?></textarea>
</div>
</div>
<!-- Form actions -->
<div class="form-actions" style="margin: 0;">
<button type="submit" id="accountdetails" name="accountdetails" class="btn btn-icon btn-primary glyphicons circle_ok"><i></i>Save changes</button>
</div>
</div>
</form>
<!-- // Form actions END -->
dev.php
if (isset($_POST['accountdetails'])) {
if (isset($_POST['fname']) || isset($_POST['lname']) || isset($_POST['email']) || isset($_POST['phonenumber']) || isset($_POST['bio'])) {
die ("HERE");
};
};
I probably need to drink more Coffee but I cannot for the life of me work out why it is not working.
Any help would be appreciated!
Thanks in advance.
EDIT
I put the name's in and this did not help, now the URL of the page shows this:
update.php?fname=Aaron&lname=Hatton&email=me%40aaronhatton.co.uk&phonenumber=0123456789&bio=+18+%7C+London+%7C+Taken&accountdetails=
any ideas?
One: do what Fred said (name attributes on your input tags).
Two: You're missing the </form> tag at the end.
Your form page seems correct, however, since the form updates the user data, look what the dev.php code is doing:
isset() function returns true if the value is set and you manual set the fields so it will evaluate to true.
and in your if statement you are ORing all the conditions so as soon as it finds 1 true condition, it will go into the if statement body and execute die which will do nothing.
so if you want to test, instead of using die, try echo "here" to see if a message is printed.
So I found out the form works perfect and there was some AJAX being used by another coder, removed and surprise surprise it works perfectly!
Damn co-workers!
Thanks to all that helped!