Develop Reference

Store - save - fetch/retreive array value (php)

I'm having a hard time of thinking how am I going to save the values taken from the checkbox (came from "modalForm").
I have 2 forms here. My "mainform" and "modalForm".
This codes are similar to my program, I just replace the values.
My program works like this. I have a search bar before this, searching unique id and after searching it, their details will be loaded here.
If you click the textbox, a modal will pop up containing checkboxes. If one checkbox is checked, its label beside it will be the one to be shown on the textbox. When two or more checkbox were checked, a word "multiple" will be shown in the UI.
Value(s) will be inserted/updated to the database.
In my case here, instead of label, value is the one showing on the textbox.
Can you help me how can I store the array that i used into database and how can I fetch their values once it was loaded again.
My working fiddle: https://jsfiddle.net/8bf3vjuk/
I'm having a hard time here because here are two forms.
testing.php
<form method="post" name="mainform" action="">
<label>Sports</label>
<a href="#modal" id="done"> <!-- when the input textbox was clicked, modal will pop up -->
<input disabled type="text" id="test" name="test" placeholder="test" value="">
<input class="hb_button3" type="submit" id="modalbutton" value="save"> <!-- once submit value taken on the checkbox will be save to the system database -->
</a>
</form>
<form method="post" name="modalForm" id="modalForm" action="testing.php">
<div class="modalwrapper" id="modal"> <!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Basketball </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Baseball </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Soccer </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Volleyball </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="4">
<div class="clear"></div>
<label>DOTA :)</label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<input class="btn1" id="submit" type="submit" value="Submit"/>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
</form>
here is my styles.css
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
my javascript code
$(document).ready(function(){
$("#done").click(function(e) {
// alert('ok');
$("#modal").fadeIn();
// e.preventDefault();
});
$("#submit").click(function(e) {
var checked = [];
i=0;
temp=""
$("input[name='test_modal[]']:checked").each(function ()
{ temp=$(this).val();
i++;
checked.push($(this).val());
});
if (i==1)
$("#test").val(temp);
else if (i>1)
$("#test").val('multiple');
else if (i==0)
$("#test").val('nothing');
$("#modal").fadeOut();
// alert($("#do").val())
e.preventDefault();
});
});
Hope you can help me guys. If you guys can suggest to replace my javascript by using any php statement like if condition, I will try to test it.
Many thanks.

Opening file select when clicking on a div not file input tag

I wanted to design an image uploader. For selecting an image we do this:
<input type="file" />
but I don't want to use that regular input, I have a div and I want that when user clicks on that, file selecting dialog opens and after that everything continues in standard way.
I want to use Angular.js rather than jQuery if possible because my project is under Angular.js

You dont need javascript to do this, please dont look at the inline style
<div style="position: relative; border: 1px solid red; width: 50px; height: 30px; line-height: 30px; text-align: center;" >
Open
<input type="file" style="opacity: 0.0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height:100%;" />
</div>
Note you need to add more crossbrowser opacity lines
see demo http://jsfiddle.net/yp2dykn5/
Edited this seams to be a populair question/answer.
So i updated this answer with the information below including cross browser opacity lines support.
div {
position: relative;
border: 1px solid red;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
}
.file_upload {
opacity: 0.0;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* Netscape or and older firefox browsers */
-moz-opacity: 0.0;
/* older Safari browsers */
-khtml-opacity: 0.0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height:100%;
}
<form>
<div>
Open
<input type="file" class="file_upload" />
</div>
</form>

I would give the <input> element the CSS property display: none; Then I would apply whatever styling needed to fit your situation to a <label> element linked to the <input> through the use of the for attribute (link to w3school page). In all browsers I know of, clicking on the <label> of an <input> works the same as clicking on the <input>.
This solution only using CSS and does not use JavaScript. The <label> can be styled in any way that a <div> can be styled.
Edit: I elaborated on my answer since I noticed the complexity of the top answer.
.hide {
display: none;
}
.file_upload {
border: 1px solid red;
padding: 5px;
}
<label for="getFile1" class="file_upload">Open File</label>
<input type="file" id="getFile1" class="hide"/>

My suggestion with Jquery would be to keep a div and an input[type="file"].The input should be made hidden and trigger the click of input using JQuery, like below
HTML
<div id="id">Open</div>
<input id="yourinputname" type="file" name="yourinputname" style="display: none;" />
jQuery
$('#id').on('click', function() {
$('#yourinputname').trigger('click');
});
See the fiddle

My File upload form with bootstrap and fontawesome
<html>
<head>
<link rel="stylesheet" type="text/css" href="path/to/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="path/to/fontawesome-all.css" />
</head>
<body>
<form method="post" action="upload.php" enctype="multipart/form-data" >
<div class="card mb-4 shadow-sm p-4">
<h4 class="my-0 font-weight-normal">Upload File</h4>
<div class="card-body">
<h2 class="card-title">
<label style="cursor: pointer;" for="file_upload">
<span class="text-muted fa fa-upload"></span>
</label>
<input type="file" id="file_upload" class="d-none"/>
</h2>
</div>
</div>
</form>
</body>
</html>

If you are using react: (sorry for the hideous indentation, stack would not let me format it correctly)
#getFile {
display: none;
}
<label htmlFor="getFile">
<FontIcon iconName="photo" className="uploadIcon"/>
<input type="file" id="getFile" />
</label>

Browser is not ouputting webpage with textbox and submit button

I have written a CSS/HTML code which is supposed to show the images of three cars and when you click on an image, a text box appears and you can write comments about the car into the text box and click on the submit button. I have checked and rechecked my codes and everything seems to be in order. I have saved the codes in the htdocs folder of XAMPP. Now, no PHP is involved in my codes, so I don't need a server to execute the file, but as far as I know, this should not matter. So, I type "localhost/index1.php" into the address bar and press return. What I get, surprisingly, is just the images of the three cars, but no submit button. And when I place my pointer on each car, the individual car image gets bigger (as expected) BUT a textbox does NOT appear. This should not be happening. So I decided to rename my file index1.html and saved it in the htdocs folder as before but STILL the situation persists. Please could someone tell me why I am not getting the textbox to appear when I click on the icon, and why no submit button appears either?
I HAVE NOW ADDED JavaScript to my code, and it's STILL not working!!!
<!DOCTYPE html> <html> <head> <style> body {
background-color: #ADD8E6;
}
#form {
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.car {
float: left;
margin: 2% 2% 5% 2%;
}
.car label img {
transform: scale(0.8);
transition-duration: 0.2s;
}
.car label img:hover {
cursor: pointer;
transform: scale(1);
}
.comment {
position: absolute;
visibility: hidden;
}
.comment input {
width: 128px;
font-size: 1em;
}
.car label img {
width: 128px;
display: block;
}
#button {
position: relative;
left: 66%;
margin: 2%;
visibility: hidden;
}
</style> </head>
<div id="form">
<form method="post" action="#">
<div class="car">
<label for="mercedesbenz">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment">
<input type="text" id="mercedesbenz" placeholder="Merc" />
</div>
</div>
<div class="car">
<label for="porche">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment">
<input type="text" id="Porche" placeholder="Porc" />
</div>
</div>
<div class="car">
<label for="bmw">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment">
<input type="text" id="bmw" placeholder="Beemer" />
</div>
</div>
<input id="button" type="submit" name="submit" value="Submit">
</form>
</div>
<script>
$('.car').click(function() {
$('.comment').css("visibility", "hidden");
$('#button').css("visibility", "hidden");
var id = $(this).children('label').attr('for');
var buttonOffset;
switch(id) {
case 'mercedesbenz':
buttonOffset = '0';
break;
case 'porche':
buttonOffset = '33%';
break;
case 'bmw':
buttonOffset = '66%';
break;
}
$(this).children('.comment').css("visibility", "visible");
$('#button').css("left", buttonOffset);
$('#button').css("visibility", "visible");
});
$('.comment').mouseleave(function() {
setTimeout(function () {
$('.comment').css("visibility", "hidden");
$('#button').css("visibility", "hidden");
}, 500);
});
</script>
</body>
</html>

I think that what you need is JavaScript to handle the click events:
When you click on an image: show the submit button and the comment box.
When you click on the submit button: hide the button and the comment box.
Note: I changed your button from type submit to button so you can see the effect. You should put it back as submit on your side.
// show comment box when clicking on image
$("img").on("click", function() {
$(".comment").css({visibility:"hidden"});
$(".comment." + $(this).parent().attr("for")).css({visibility:"visible"});
$("#button").css({visibility:"visible"});
});
// hide button and comment when submitting
$("#button").on("click", function() {
$(".comment").css({visibility:"hidden"});
$("#button").css({visibility:"hidden"});
});
body {
background-color: #ADD8E6;
}
#form {
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.car {
float: left;
margin: 2% 2% 5% 2%;
}
.car label img {
transform: scale(0.8);
transition-duration: 0.2s;
}
.car label img:hover {
cursor: pointer;
transform: scale(1);
}
.comment {
position: absolute;
visibility:hidden;
}
.comment input {
width: 128px;
font-size: 1em;
}
.car label img {
width: 128px;
display: block;
}
#button {
position: relative;
left: 66%;
margin: 2%;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="form">
<form method="post" action="#">
<div class="car">
<label for="mercedesbenz">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment mercedesbenz">
<input type="text" id="mercedesbenz" placeholder="Merc" />
</div>
</div>
<div class="car">
<label for="porche">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment porche">
<input type="text" id="porche" placeholder="Porc" />
</div>
</div>
<div class="car">
<label for="bmw">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment bmw">
<input type="text" id="bmw" placeholder="Beemer" />
</div>
</div>
<input id="button" type="button" name="submit" value="Submit">
</form>
</div>

.comment {
position: absolute;
}
You have comment boxes hidden
Change your submit button css to:
#button {
position: relative;
left: 66%;
margin: 2%;
}
Thus, here is the complete version:
http://jsfiddle.net/2khqdxtr/1/

Issue with HTML display format?

In my application I need to select the image. So I use input tag of type "file". The UI looks like the following image,
<input type="file" id="fileUploader">
How can I write the above input tag as <a> tag so that when clicking on the camera image I need to select the file,
<a href="#" onClick='#'><img src="img/camera.jpg"/></a>

Try like below for change the default file picker using jquery mobile
HTML is like:
<span class="ui-btn ui-icon-plus ui-btn-icon-left ui-corner-all fileinput-button">
<span>Pick File </span>
<input type="file" name="files" multiple data-role="none"/>
</span>
css is Like:
.fileinput-button {
position: relative;
overflow: hidden;
float: left;
margin-right: 4px;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
transform: translate(-300px, 0) scale(4);
font-size: 23px;
direction: ltr;
cursor: pointer;
}
FIDDLE DEMO

Try this:
$(function(){
$('#anchorlink').click(function(){
$(this).replaceWith('<input type="file" id="fileUploader" />');
$('#fileUploader').click();
})
});
<a href="#" id="anchorlink" >click<img src="stylish.png"/></a>
http://jsfiddle.net/dQHh5/3/

A better option than a would be to use a label with for, and keep the input hidden.
Demo: http://jsfiddle.net/abhitalks/GpsAJ/
Markup:
<label for="fileUploader" />
<input type="file" id="fileUploader" />
CSS:
#fileUploader {
display: none;
}
label[for=fileUploader] {
display: inline-block;
width: 128px; height: 128px;
cursor: pointer;
background: url('your-camera-image-here') no-repeat left center;
}

I think this one is what you need
<img onclick="javascript:document.getElementById('myFile').click();" src="http://www.clker.com/cliparts/O/r/K/T/t/n/camera-icon-hi.png" style="width:50px;height:auto" />
<input type="file" id="myFile" style="display:none" />
I just hide my input file and let the onclick attribute of image show the dialog..
Just refer to my sample below.
http://jsfiddle.net/fbB46/

Custom Upload Button

hi i was just wondering how you can create you own custom file upload button, because the best i can do is
and what i want to achieve is
if there is anyway of doing this i would be very thankful,
and please can i have answers that explain how to do it with code and not answers with links to websites that allow you to download a button or something like that,Thank You :)

Although some of these answers will create something that looks like you want it to work, they will break down when they try to perform the way that you expect. The file input doesn't style well directly and you will have trouble trying it. However, there is a trick.
The trick is to turn the opacity of the input to 0 and then change the background underneath it to the button style that you want.
.file_button_container,
.file_button_container input {
height: 47px;
width: 263px;
}
.file_button_container {
background: transparent url(http://i.stack.imgur.com/BT5AB.png) left top no-repeat;
}
.file_button_container input {
opacity: 0;
}
<div class="file_button_container"><input type="file" /></div>

I think you can also try doing it this way:
Creating an additional <label for="X"></label> element which you can style easily with CSS
<div class="container">
<label for="upload" class="uploadButton">Upload</label>
<input type="file" name="upload" id="upload">
</div>
like
.container {
position: relative;
}
.uploadButton {
height: 25px;
width: 66px;
display: block;
cursor: pointer;
background: url('http://www.ifunia.com/images/christmas/youtube-upload-button.gif') center center no-repeat;
}
input[type="file"] {
display: block;
width: 66px;
height: 25px;
clip: rect(0px 0px 0px 0px);
position: absolute;
left: 0;
top: 0;
}
<form>
<div class="container">
<label for="upload" class="uploadButton"></label>
<input type="file" name="upload" id="upload" required />
</div>
<hr/>
<button type="submit">Submit</button>
</form>

The arrow isn't something you can "just do with code" and the rounded corners would work fine in firefox, but not in ie using css... if you just need to use a custom image it's easy:
css:
#my_upload_button{
background-image:url(path-to-file.png);
border:none;
}

In Vue JS
If you wanna put the upload image button inside the textarea
use Relative and Absolute position to put the camera icon inside the textarea
use bottom-3 right-4 to find the proper position
<div class="field relative">
<label>Description</label>
<textarea class="textarea" v-model="description" type="text" maxlength="10000"> </textarea>
<label for="upload-file" class="icn icn-camera cursor-pointer absolute bottom-3 right-4">
<input type="file" id="upload-file" hidden ref="file" #change="getImage($event)" accept="image/**" />
</label>
</div>
if not inside the textarea box, just one custom upload button then just keep the code like this
<label for="upload-file" class="icn icn-camera cursor-pointer">
<input type="file" id="upload-file" hidden ref="file" #change="getImage($event)" accept="image/**" />
</label>
change the default upload file icon to a camera icon

Step 1. Create a simple html markup
<div class="fileUpload btn btn-primary">
<span>Upload</span>
<input type="file" class="upload" />
</div>
Step 2. CSS: Tricky Part
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
For demo see here http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

Use the input's label as custom upload button:
<label for="pic" class="uploadfilelabel" >upload </label>
<input type="hidden" name="MAX_FILE_SIZE" value="110000">
<input id="pic" name="pic" type="file" size="110000">
and CSS:
label.uploadfilelabel{/*custom label here*/}
input[type=file]{display:none;}
Notice that we did not display the main input button, because otherwise it will occupy space

I'm too late to answer but someone surely will find this useful in future, no need to use of Javascript or Hidden field too. If you are using Bootstrap then definitely there's no need of btn CSS as well.
#upload_file
{
display: none;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
color: #fff;
}
.btn {
-moz-user-select: none;
border: 1px solid transparent;
border-radius: 0.25rem;
display: inline-block;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
padding: 0.375rem 0.75rem;
text-align: center;
transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
vertical-align: middle;
white-space: nowrap;
}
<label for="upload_file" class="custom-file-upload btn btn-primary"><i class="fa fa-cloud-upload"></i> File Upload</label>
<input class="margin" type="file" formnovalidate id="upload_file" name="file" accept="*">

Here is an approximation to the button you want with css/html
html
<button class="upload">Choose a file to upload...</button>
css
.upload{
border:0;
padding:10px 20px;
-moz-border-radius:10px;
border-radius:10px;
background-color:#4488ee;
color:white;
font-size:16px;
}
demo http://jsfiddle.net/gaby/qdX5d/2/
for rounded corners in pre-IE9 use css3pie