How do I mimic HTML form "Browse" and "Submit" buttons as done in facebook?
My form is:
<form action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" value="Submit" />
</form>
So far I can just do it in the traditional way. But what I really need is:
When the user clicks "Upload Picture" label or button or whatsoever, it mimics "Browse" button and on selecting a picture it mimics "Submit" button events. I don't want to show the odd looking browse and submit buttons...You got my point?
I've used PLUpload for something similar in the past. It is primarily for larger files, but it does the browsing and masking as you desire. I've even set up the JS to auto submit once the image is selected. It doesn't take much as long as you have the basic understanding of JS.
http://www.plupload.com/
Related
I want a html button with parameter functionality.
new/?sorting=desc is the url that it should link to. But when I try, the parameter is not passed. How should it be done? I tried both the methods below but none worked.
<FORM METHOD="GET" ACTION="./?sorting=desc">
<INPUT TYPE="submit" VALUE="Äldst först">
</FORM>
I want buttons that behave like these links:
Äldst först
Nyast först
If you want something to act as a link, then you should use a link.
That said:
When you submit a GET form, the query string is removed from the action and a new one is generated from the data in the form.
You need to store the data in hidden inputs.
<form action="/social/tracking/new/">
<input type="hidden"
name="sorting"
value="desc">
<input type="submit"
value="Nyast först">
</form>
<form action="/social/tracking/new/">
<input type="hidden"
name="sorting"
value="asc">
<input type="submit"
value="Sort the other way">
</form>
If you are using jQuery, you can use the code below.
This will fill a hidden input with the correct value when you click on one of the submit buttons.
<form method="get" action="./">
<input type="hidden" name="sorting" id="sorting" value="" />
<input type="submit" value="Äldst först" id="sort_desc" />
<input type="submit" value="Nyast först" id="sort_asc" />
</form>
<script>
$('#sort_desc').click(function(){
$('#sorting').val('desc');
});
$('#sort_asc').click(function(){
$('#sorting').val('asc');
});
</script>
I think its not possible. A form is used to send data (mostly) via POST or GET. Your goal is to open a specific URL. I would create a standard and would style it like a button. Whats the reason you want to use a button?
When you focus on a form element in a mobile browser, they come up with previous and next icons for easier navigation. However for some reason if I click next to what should be the end of that particular forms' input, if there is another form on the page, pressing next again will make it jump to the second form.
For example I have a log in form on the body of my page like so:
<form name="customer_login" id="customer_login" method="post" action="/login">
Email: <input type="email" name="customer[email]" id="customer_email" />
Passwird: <input type="password" name="customer[password]" id="customer_password" />
<button type="submit">Log In</button>
</form>
Then further down my page, in the footer I have a separate form for my newsletter:
<form name="newsletter" id="newsletter" method="post" action="/newsletter">
Subscribe: <input type="email" name="email" />
<button type="submit" name="submit" title="Sign Up">Go</button>
</form>
But once I'm focused on the password field in the log in form, the next button to me should become disabled or at least not jump to an entirely different form. Is this normal behavior for mobile browsers and forms? Or am I missing a form attribute which is not differentiating the two forms?
Try adding tabindex=1 to your input fields...see if that helps. By mobile, you using an iPhone? If so, those < and > arrows are essentially the TAB button on a keyboard, etc.
tabindex=1 value should increment in the order you want to "tab", etc.
I have this problem Only on IE7 and IE8.
I have a shadowbox that contains an input type file in it.
When this shadowbox is loaded, the input file is invisible... until I mouse hover it.
It's a reall basic form with a really basic input file:
<form action="" method="post" enctype="multipart/form-data" autocomplete="off">
<input type="file" name="img" onChange="$('#button_img').css('display','');" />
<input type="hidden" name="step_crop" value="1" />
<input type="submit" value="" />
</form>
I tried to delete everything on the file and only leave the form with one element which is, yeah, the evil input file, but still invisible on page load until I hover it.
Someone would have an idea ?
(Video link for the behavior: http://www.screenr.com/6ICH )
Please try to close your div and input tags properly. does it work?
Hi, I can see input field in both IE7 and IE8. Can you please add your view how it looks like before and after
I have two vertical framesets, the left frame will show the links, and the right frame will show the contents when a link is clicked. Right now, what I have is when I click a link, the content is opened in a new tab. I know that to change this we have to change target. I have done so but nothing changed. Can someone help to resolve this problem? Thank you. Here is my code for the part.
<form method="link" action="stock.xml" target="logo.html">
<input id="company.xsl" name="file" type="submit" value="Browse by Company" ><br></br>
<input id="category.xsl" name="file" type="submit" value="Browse by Category" ><br></br>
<input id="sale.xsl" name="file" type="submit" value="Browse by Sale">
</form>
Also, I have 3 xsl files and 1 xml file. Is there any way to link all xsl files to the xml file?
Ok, method should be get or post, the action should be the file that is going to handle the form action, and target should be the name of the from you want it to submit to. see here http://www.developerfusion.com/code/2069/set-the-target-frame-of-a-form/
i am using following code to set an image as submit button
*<input type="submit" src="submit1.jpg" alt="submit Button"onMouseOver="this.src='submit1.jpg'">*
but i actually did not know at which place in whole code to put this line of code because i put it after but it is not working
at which place i put this code there appear "submit query" but i want it to submit query at buuto i also use
input type="image"
actually i want to ask from which place i start this code "from which line?"
Change type from input to image and add value as submit:
<input type="image" value="submit" src="submit1.jpg" alt="submit Button" onMouseOver="this.src='submit1.jpg'">
This is complete HTML document:
<form name="someform" action="http://www.google.com">
<input type="image" width="100" value="submit" src="image1.png" alt="submit Button" onMouseOut="this.src='image1.png'" onMouseOver="this.src='image2.png'">
</form>
Note that "onmouseout" event is used to bring the button to previous form when mouse is not over