I have authored a html + javascript form which displays a set of images along with a submit button. The user can select the images he or she is interested in and when the user clicks the image, I change the image border to indicate image selection.
And when the user clicks on the submit button, I would like my server side script to receive the image uris associated with the selected images for further processing.
I am a JS newbie. I would like to know how best to do this. Will I need a global javascript array which gets populated with the selected image URIs? And this array can then be submitted as part of HTTP POST?
Any tips/pointers will be helpful.
If I were you, I’d make sure it works without JavaScript too. E.g.
<form action="" method="POST">
<label for="image_1">
<img src="image_1_uri" alt="Image 1" />
<input type="checkbox" name="images" id="image_1" value="image_1_uri" />
</label>
<label for="image_2">
<img src="image_2_uri" alt="Image 2" />
<input type="checkbox" name="images" id="image_2" value="image_2_uri" />
</label>
<input type="submit" />
</form>
Then adapt your border-adding JavaScript to work when the label is clicked on, rather than the image.
Hide the checkboxes via CSS if you’re not keen on them being there. (You’ll need to add a class to the checkboxes to do this in older versions of Internet Explorer.)
Try this:
//...let's suppose this is the image you change the border of on click..
<img src="whatever" onclick="createHidden(this);" />
<script type="text/javascript">
function createHidden(field)
{
var hdn = document.createElement("input");
hdn.setAttribute('type', 'hidden');
hdn.setAttribute('name', 'hdn[]');
hdn.setAttribute('value', field.src); // populate images src now
var frm = document.getElementsByTagName("form")[0];
frm.appendChild(hdn);
}
</script>
Now you can access the images' paths in the hdn array in your server-side script.
Related
I keep trying to build a dynamic image uploader where I have a pair of inputs: one file and a text input (for custom name). Additional pairs can be added by a click of a button (done via javascript).
#foreach($table ? json_decode($table->textures, true) : [] as $texture_name => $texture_img_name)
<div class="row">
<div>
<h3>Texture name</h3>
<input type="text" name="texture_names[]" value="{{$texture_name}}">
</div>
<div>
<h3>Picture</h3>
<div>
<img src="/storage/img/tables/{{$table->id . '/textures/' . $texture_img_name}}" alt="">
<input type="hidden" name="texture_img_names[]" class="texture_img_name" value="{{$texture_img_name}}">
<input type="file" name="texture_img_files[]" onchange="copyImgName(this)" value="">
</div>
</div>
</div>
#endforeach
js:
function addTextureField(elt){
var parent = elt.parentNode.querySelector('.inner');
var template =
`<div class="row">
<div>
<h3>Texture name</h3>
<input type="text" name="texture_names[]" value="{{$texture_name}}">
</div>
<div>
<h3>Picture</h3>
<div>
<img src="/storage/img/tables/{{$table->id . '/textures/' . $texture_img_name}}" alt="">
<input type="hidden" name="texture_img_names[]" class="texture_img_name" value="{{$texture_img_name}}">
<input type="file" name="texture_img_files[]" onchange="copyImgName(this)" value="">
</div>
</div>
</div>`;
parent.insertAdjacentHTML('beforeend', template);
}
function copyImgName(input){
input.parentNode.querySelector('.texture_img_name').value = input.files[0].name;
}
Each time the uploads happen, I replace the file names (JSON object) in the database with the new names.
The issue I face is when the user tries to modify the list of uploaded images, say he changes 1 image out of 3, now ideally I could just set the remaining file input's values to the name of the unchanged images, submit the form, and all the (new & old) names would go into the DB while the new image gets uploaded.
But as we know file inputs value attribute is read only, so as a work around (hack) I use a hidden input for holding existing image names and when an images gets changed, I use JS to switch the hidden input's value to the new name, which may not be the best idea.
I hope someone could give me some directions on what would be a better approach or solution for this scenario?
Thanks!
sorry about my limited coding skills and so on, but hopefully you can see what I am attempting. I want to scrap the form checkboxes and have 2 simple 'yes' 'no' hyperlinks, dependant on if image is hidden or shown. Will javascript do this? This is what I have so far, which was working but like I say, I just want 2 links instead of checkboxes.
if ($_POST['option']) {
if ($_POST['option'] == 'yes') {$hidden = 0;}
if ($_POST['option'] == 'no') {$hidden = 1;}
#mysql_query('UPDATE Image SET Hidden = ‘.$hidden.’ WHERE ID = '.$image->ID.'');
header ('Location: ' . $_SERVER['REQUEST_URI']);
exit;
}
<p>Show image?
<form method="post" action="?">
<input type="checkbox" name="option" value="yes">Yes
<input type="checkbox" name="option" value="no" >No
<input type="submit" name="submit" value="Go!" />
</form>
So then I can have HTML such as -
Show Image? Yes / No
(This image is shown) or (this image is not shown)
Any points in the right direction would be greatly appreciated, Many thanks!
Hi Guys, Sorry, I don’t think I explained myself properly.
All images have a default value of ‘Hidden = 0’ in the image database table, so they are all currently shown on the page. Here is the code -
// there is some SQL here that fetches all images
// here is the actual code that shows images:
foreach($ids as $id)
{
$tmp = new Image($id,true);
if (!$tmp->ID) continue;
<p>
<img src=”/myurl/’.$tmp->ID.’.jpg”>
</p>
}
What I want is, in that loop, underneath each image tag, is to have some HTML :
<p>Show Image? Yes / No </p>
I want the ‘yes’ and ‘no’ to be hyperlinks, which state will depend on the images ‘Hidden’ value.
So if the image is shown (all currently are), the word ‘Yes’ won’t be a clickable hyperlink, only ‘No’ will be.
If I then click ‘No’ I need it to post a query on click, to set Hidden = 1, to hide the image.
If the image is already hidden, then ‘Yes’ would be the only clickable link, which if clicked would post value Hidden = 0, so the image is shown.
I hope that makes sense. The other problem I have is the fact that there are multiple images, so the form or whatever system I use, needs to distinguish which image it is changing the Hidden value for.
In the code, the image’s unique id field is accessed like this: $tmp->ID
If you want hyperlinks just use something like
Yes
No
Also you will probably want to use single quotes ''s and not ‘'s for your query. Also I'd recommend using mysqli or PDO so you can use prepared statements instead of mysql_ functions which are prone to mysql injections.
Easiest way would be to use a hidden input field that will be submitted with the rest of your form and using javascript to change the value of that hidden field.
HTML:
<p>Show image?
<form method="post" action="?">
<input type="hidden" name="option" value="default" />
Yes
No
<input type="submit" name="submit" value="Go!" />
</form>
JS (requires JQuery):
$(".option").click(function (e) {
$("input[name=option]").val($(this).attr("data-value"));
});
Then when you submit the form $_POST should have the "option" value.
Try this
if(isset($_GET['cmd']))
{
if($_GET['cmd']=='yes')
{$hidden = 0;}
if($_GET['cmd']=='no')
{$hidden = 1;}
#mysql_query('UPDATE Image SET Hidden = '.$hidden.' WHERE ID = '.$image->ID.'');
header ('Location: ' . $_SERVER['REQUEST_URI']);
exit;
}
?>
<p>Show image? <br />
Yes <br /> <!--Replace page url according to yours -->
No
Just to reaffirm, the following form is my latest revision and works perfectly, updating the database and radio buttons on the page. However, it is still not the solution I want. I want hyperlinks only, as in the above examples posted by Boshi and Class, but for some reason my site won't accept those urls, the system churns me out to a different page and nothing works.
Here is the latest revision which works. Is there another solution? -
if ($_POST[''.$tmp->ID.'']) {
if ($_POST[''.$tmp->ID.''] == 'yes') {$hidden = 1;}
if ($_POST[''.$tmp->ID.''] == 'no') {$hidden = 0;}
#mysql_query('UPDATE Image SET Hidden = '.$hidden.' WHERE ID = '.$tmp->ID.' LIMIT 1');
header ('Location: ' . $_SERVER['REQUEST_URI']);
exit;
}
<p>Hide image?
<form method="post" action="?">
<input type="radio" name="'.$tmp->ID.'" value="yes" '.($tmp->Hidden ? 'checked' : '').'>Yes
<input type="radio" name="'.$tmp->ID.'" value="no" '.(!$tmp->Hidden ? 'checked' : '').'>No
<input type="submit" name="submit" value="Go!" />
</form>
I have got a task to upload new file from the click of image button.
My code is
<label>File</lable>
<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
On the click of this button I want to upload a new file.How can I do this?
You can check my code from
Demo
You could add a hidden file input field, like:
<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
<input type="file" id="my_file" style="display: none;" />
And do:
$("input[type='image']").click(function() {
$("input[id='my_file']").click();
});
Demo:: Updated Fiddle
There is no need for javascript just put the <input> and the <img> inside <label> make sure you hide the <input> like so:
<label for="image">
<input type="file" name="image" id="image" style="display:none;"/>
<img src="IMAGE URL"/>
</label>
There is no need for javascript.
Just place both <input type="file"> and <img src=""> inside a label.
Eg:
<label>
<input type="file" style="display:none">
<img src="">
</label>
This will work Just Fine
Demo: https://codepen.io/sandeeprana1001/pen/dyPVvJZ
If you are looking for a cross-browser compatible solution you should check out plupload(http://www.plupload.com) it supports image buttons aswell from what i remember.
you are using the wrong input, use file instead, if you want the button to loke like the circle in your code demo you will need to use CSS to change the way "submit" looks like. This has to be in a form:
<form action="upload_file.php" method="post" enctype="multipart/form-data">
<input type="file" name="myfile"/>
<input type="submit" class="circle-btn"/>
<form>
I don't know what language are you using in the server-side (PHP, ASP.NET, etc) but you will need to create a page (for xample "upload_file.php" for php). You can easily find examples in google about how to create a page like that, just copy pasete the code:
An example in PHP: http://www.w3schools.com/php/php_file_upload.asp
Hope it helps :)
You can do this using css.
Please check the 4th answer in this blog.
How can I customize the browse button?
You can use your image as background image of the .button class.
You can also use this in order to access the file that you uploaded since in PHP you can't access the file inside a label.
<input type="file" name="input" id="input" style="display:none;">
<label for="input">
<img src="images/default.jpg" id="image">
</label>
Supplement for DemoUser's answer, add .focus() works for me.
$("input[type='image']").click(function() {
$("input[id='my_file']").focus().click();
});
I have a home page that contains a texfield that reads the user input, sends the value of whatever is typed in and sends it to another page where the search will happen and display the search results.
<div>
<form action="****.jsp" method="get" id="search-id">
<input type ="text" name = "search" id="search" size="70"/><br>
<br />
<input type="Submit" value="Search" class="button rounded">
</form>
<br />
<br />
<br />
</div>
But the thing is that it takes some time before the actual second page shows up, therefore I wanted to make a little loading gif to appear while waiting for that page to actually load up. I have a gif file ready to use, but I can't figure out how to implement it into the website so that it would show up after I click on the search button.
I'm very new to HTML/JS and I been searching for a possible way for days. Is this possible at all?
Add a submit event handler to your form, that makes the animated gif appear and doesn't prevent the form submission. Example with JQuery:
$('#search-id').submit(function() {
$('#animated-gif').show();
});
assuming you have the animated gif hidden somewhere in the page:
<img src="..." style="display: none;" id="animated-gif"/>
Since you are new to HTML, you will need to search more about ajax and jquery. That will ideally answer your question. Have a look on this similar question as well. Hope this will help you.
I have an input box
<input type="text" name="search" id="search" />
<img src="icon.png" alt="" id="doSearch" />
I use Jquery and I have onclick event for "doSearch". So when I enter some words like "ab" .. and click on "icon" It sends an ajax request to php file and gets results back appended to dom.
$('#doSearch').click(function() {
$(".showResults").show("fast");
var input_text = $('input[name="search"]').val(); //retrieve text
$.ajax({
method: "get" ...
... some more lines
}) etc etc
I am wondering how can I trigger onclick function automatically, when some characters are entered in the input box so that users dont have to click on image icon to get the results. Also, how I can set focus on the image icon when I press tab key while in the input box.
Thanks a lot for your help.
EDIT:
I have some other input boxes in the same form as well. So this input acts as somewhat similar to stack overflow tags input.
Something like that?
$('#doSearch').keyPress(function(e){
if($(this).val()=='??') $('#doSearch').trigger('click')
});
The proper way to do it would be to do this:
<form id='search'>
<input type="text" name="search" id="search" />
<input type="image" src="icon.png" />
</form>
That way the image will be the submit button of the form, and whenever a user presses enter the form's submit event will be fired and you can do what you want.
This is how you could do the jQuery:
$('#search').submit(function() {
// do what you were doing
return false; // prevent form submission
});
This will also have the upside of being friendly to people with Javascript disabled, as you could then check in the server if it is not an AJAX request and perhaps display the full page with the requested content instead. I am pretty sure this will also make it so that TAB goes to the image as well.