I'm having a standard form and some images on the page distributed at random places at the page. I would like to select and click one of the images, add some information to the inputs and then click submit button. The problem is that I have no good solution for sending an information through the form about the fact which image randomly distributed was clicked. My only idea was to make images url but then I cannot pass information from the inputs. Any good suggestion of how can I combine which image was clicked with the standard form information?
For example, here is a sample form which contains a hidden field:
<form>
<input type="hidden" name="image_info" >
<!-- you other input fields -->
<input type="text" name=".." >
...
...
</form>
and in your HTML you have different image tag
like
<img src="..." data-info="image info to be placed in hidden field" title="..." alt="..." />
<img src="..." data-info="image info to be placed in hidden field" title="..." alt="..." />
and in Javascript
<script>
$('img').on('click', function() {
var img = $(this),
img_field = $('input[name=image_info]');
img_field .val(img.data('info') );
});
</script>
It's not a complete code, but an idea how you can implement it.
Related
I am working on a demo project that uploads a photo and returns with the name of the person. So basically I use HTML and it consists of 2 pages, the first page - for users to upload photos and submit it while the second page - the recognized name in the photo will be shown. I have a web service that I need to enable it for face recognition to work. The first page has a submit button, which is to upload the photo, but I wanted the submit button to be on the second page as well so that the users can submit another photo, without the need to go back to the first page. I copied the HTML code in the first page to second page,
<form>
<div class="upload-btn-wrapper">
<button class="btn">Submit</button>
</div>
</form>
the structure of the submit button is there. But it doesn't work, while it worked for the first page, it did not work on the second page. What could be the problem? Let me know if u need more clarification I would be happy to do so
The Code for the first page
Page 1
The Code for the second page
Page 2
The codes for both pages are almost the same.
You need to add condition when you are submitting and action attribute as well where you want to submit.
<form action="upload.php">
<input type="file" name="file" id="uploadFile" />
<div class="upload-btn-wrapper">
<button type="submit" class="btn">Submit</button>
</div>
</form>
for validation, you need to add some jquery code
$(document).on("click", ":submit", function (e) {
if( document.getElementById("uploadFile").files.length == 0 ){
alert("no files selected"); // or you can use other approach
e.preventDefault();
}
}
Got an odd situation - when I change the "type" of my button from "button" to "image", it stops working. I have done this change 100 times on my site, and I've never come across this issue before.
The relevant code looks like this:
//working
<input type="button" value="Back" onClick="window.location='some/page.php'" />
//not working
<input type="image" src="/link/to/image.png" onClick="window.location='some/page.php'" />
I've tested it by using the first code and checking it transfers me to the desired page. Then I've simply changed the type over and replaced the "value" with the relevant "src". The button displays fine but when clicked, I simply land back on the page I was originally on.
What's really bugging me is that the second snippet of code is working absolutely fine across the rest of my site. It's just this page that it's not working on.
Really confused - anyone encountered this before or got any suggestions?
You need to return false from the event handler to prevent the default action as input type=image acts as a submit button.
You can use also use simple <img /> tag instead of <input />
You have probably put the image map in a form. When you click it you are submitting the form.
You should use a regular link instead. There is no need to use an image map or JavaScript here.
<a href="some/page.php">
<img src="/link/to/image.png" alt="appropriate alternative text goes here">
</a>
Could I have something like <INPUT TYPE="SUBMIT" NAME=submit VALUE=Submit>, but instead of being a submit button, it could be an image? Is there something like href?
The simplest way is to use an image as a submit button employing the HTML form tag.
<input type="image" src="IMAGE.GIF" alt="Submit button">
However, you can also use Javascript for more robustness
<a href="javascript:document.your_form_name.submit()">
<img src="IMAGE.gif" alt="Submit this form" name="sub_but" />
</a>
HTML already got it:
<input type="image" src="myimage.png" />
Clicking it is exactly like clicking a submit button, instead of value you define src and the coordinates of the click are also sent to the server.
Official documentation.
Edit - while the form submission itself is the same, there is one difference between <input type="submit" /> and <input type="image" /> which is the value sent to the server for the clicked button. With ordinary submit button, the value of the button is sent alongside its name and can be then used to know if the form has been submitted, for example. In case of image input, each browser behaves differently, some send the value some send coordinates but you can't rely on this anymore. So, if you depend on the submitted button value in the server side code using image button is not good idea.
<input type="image" src="image.png" /> does exactly what you ask. You can't rely on the name attribute for it though (for example if your server-side code checks for it as a reference for the form being submitted), because the browser sends name.x and name.y for the coordinates clicked.
That aside, the image input type is essentially the same as a submit button for most purposes.
You can use image in place of showing default submit button.
form input[type=submit] {
background : url("submit.png") no-repeat center center;
width : 115px; /* As per requirement */
height :52px; /* As per requirement */
border : none;
color : transparent;
}
Please note that type="image" support is lacking in some browsers so above mentioned styling is a safe way.
You can do like this, in 'scr' you can put your image link; it would be like image button.
<input type="image" src="images/submit.jpg" value="Submit" alt="Submit">
my application working well in all browsers except IE.
In my application I have a div popup form which contains some fields. In the text box it i pressed any key it was not displaying. If i move the mouse then the entered texts are displaying actual thing is screen not refreshed
How to solve this.
mycode:
<form>
//this is popup form
<div>
<form>
<input type="text"/>
<!-- if i type in the text box in IE it is not displaying but in some pc only -->
</form>
</div>
</form>
Thanks,
If i understand correctly, you want to have a popup, containing a form. The code you pasted is just html; it does not have any of this interactivity.
Let's start with your code. It has a form with a form inside it. The form tag is used to specify the start of a web form. You can specify several thing in this tag:
action: Where will the form be posted to? e.g. send the form to http://www.example.com/processform/
method: Will the form be submitted using the GET or POST method?
Having a second form tag inside it doesn't make sense: your browser will not know where to post the form to. Most browsers will choose to use one of the two tags, but they might choose the wrong one or ignore the form tags entirely.
If you want to have a form in a popup, use an approach like following html code:
<p><span id="clickablelink">Open the form</span></p>
<div class="dialog" style="display: none;">
<form action="/process/" method="post">
<input type="text" />
<input type="submit" name="submit" value="Submit this form" />
</form>
</div>
This code part should be inside the part of your html document.
You cannot open a dialog in the same page, unless you use JavaScript, jQuery or another framework to display this form. An example of this using jQuery UI:
<link type="text/css" href="css/themename/jquery-ui-1.7.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$(".dialog").dialog({
autoOpen: false
});
$("#clickablelink").click(function(){
$(".dialog").dialog("open");
});
});
</script>
This code block should be inside the part of your html document.
This is just a basic example. It might not be exactly what you are looking for. It is meant to show you in what directions you can look for your specific solution. I would suggest putting more details in your question:
For what purpose are you using this website?
What will this form be used for?
Why are you displaying a form inside a dialog?
Answering these questions and specifying your problem help you understand what you are trying to achieve and help us to answer your question properly.
You can read more about forms and javascript dialogs at the following links:
http://www.w3schools.com/html/html_forms.asp
http://mdrisser.r1designs.net/blog/?p=3
And for information about the jQuery framework:
http://www.jquery.com
http://ui.jquery.com
I didn't realize this, and just want to confirm.
If I have a html form, and an input tag of type image like:
<input type="image" name="blah" src="..." />
Clicking on the image will submit the form?
My use case is, I want to create a custom button for a submit button.
Yes, input-images will submit the form naturally. See: http://w3schools.com/tags/att_input_type.asp
image: Defines an image as a submit button