Value (words) on upload button prevent from clicking it - html

Here is my upload form
<div class="view-form">
<input type="hidden" name="MAX_FILE_SIZE" value="<?=maxFileSize?>"/>
<input name="files" id="files" type="file" class="ui input-file" style="position:absolute;left:380px;top:200px;"/>
<input id="submit_btn" type="submit" value="Upload" class="ui-button-orange input-btn"; onclick="upload();" style="position:absolute;left:380px;top:300px;width:350px;height:70px;font-size:30px;font-family:arial;font-weight:bold;"/>
<iframe name="iframe" style="display:none;"></iframe>
</div>
The text 'Upload' which is on the button makes it so that most of the button can't be clicked, only the edges where there isn't any text. Anyone know how I can fix this? Thanks

Related

Create buttons in HTML to update

i'm creating two html pages : update and index
in update page:
i want to create a button CHOOSE FILE to choose an image.
and another button SAVE to insert the image file in index page.
how can i create these two button.
<div class="slides">
<li data-bg-image="images/slides/img1.jpg">
<div class="container">
<div class="slide-content">
<!--<small class="slide-sub and for the button
<button type="button" onclick="chooseFile();">choose file</button>
<textarea id="textarea1" rows="1" cols="10"></textarea>
<div style="height:0px;overflow:hidden">
<input type="file" id="fileInput" name="fileInput" onchange="this.form.filename.value = this.value"/>
</div
You should implement input and submit template for input is :
<input accept="file_extension|audio/*|video/*|image/*|media_type">
For example:
<form action="/upload_image.php">
<input type="file" name="pic" accept="image/*">
<input type="submit">
</form>

Remove regular submit button when using an image?

I want to use an image as a submit button for a form:
<!DOCTYPE html>
<html>
<body>
<form action="/cgi-bin/script.cgi" method="GET">
<input type="hidden" name="status" value="ok">
<input type="image" src="/images/button.png">
</form>
</body>
</html>
The HTML above will result in a clickable image, but also a regular submit button right next to the image with the text http://127.0.0.1:80/cgi-bin/script.cgi.
I only want the image the be shown. What am I doing wrong?
EDIT:
This will work if CSS is enabled: https://stackoverflow.com/a/1193338/5185801
Close <input> tags properly like
<form action="/cgi-bin/script.cgi" method="GET">
<input type="hidden" name="status" value="ok" />
<input type="image" src="/images/button.png" />
</form>
I don't see any problem.
Check out this fiddle.
Here is the snippet.
<body>
<form action="/cgi-bin/script.cgi" method="GET">
<input type="hidden" name="status" value="ok" />
<input type="image" src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico?v=6cd6089ee7f6" />
</form>
</body>

Form action pass correct text values according to submit button clicked

My code is
<form method="post">
<input type="text" name="t1" id="t1">
<input type="text" name="t2" id="t2">
<input type="submit" name="s1" id="s1" value="Submit1" onclick='this.form.action="p1.php";'>
<input type="submit" name="s2" id="s2" value="Submit2" onclick='this.form.action="p2.php";'>
</form>
Now I want, if I click on submit1 p1.php should open and I can only access value of text1 and not text2.
Similarly, if I click on submit2 p2.php should open and I can only access value of text2 and not text1.
The pages are openning but I can access both the values ie t1 and t2
I only want to do it with html no js and jquery and I need to make only one form.
NO separate forms allowed.
You can use the attribute formaction on the submit button to change the current action of your form, without using JS. See formaction spec. In case you need to support older browsers like IE9- you can simply use webshim to polyfill it:
<script>
if(!('formAction' in document.createElement('input')){
webshim.polyfill('forms');
}
</script>
<form method="post">
<input type="text" name="t1" id="t1">
<input type="text" name="t2" id="t2">
<input type="submit" name="s1" id="s1" value="Submit1" formaction="p2.php">
<input type="submit" name="s2" id="s2" value="Submit2" formaction="p2.php">
</form>
hy sam,
Your question look like wrong may be you are asking to submit all form values in different action using two submit button in a single form.
may be this code will help you to submit values in different form action
<form method="post">
<input type="text" name="t1" id="t1">
<input type="text" name="t2" id="t2">
<input type="submit" name="s1" id="s1" value="Submit1" formaction="p1.php">
<input type="submit" name="s2" id="s2" value="Submit2" formaction="p2.php">
</form>
If you do not want to use javascript, the only solution that I can think of is to use two HTML forms.
<form method="post">
<input type="text" name="t1" id="t1">
<input type="submit" name="s1" id="s1" value="Submit1" onclick='this.form.action="p1.php";'>
</form>
<form method="post">
<input type="text" name="t2" id="t2">
<input type="submit" name="s2" id="s2" value="Submit2" onclick='this.form.action="p2.php";'>
</form>

Change form submit from image to text link

I have a search form that has a image as the button which is great, but i can't get the image to look the same as other text, i would like to remove this image and just use it as text instead then style it accordingly, if someone could give me some advice on doing this the simplest way possible that would be appreciated.
<form action=".php" method="get" onsubmit="return check_small_search_form()">
<label for="search_query"></label>
<input type="text" name="search_query" id="search_query" class="Textbox" value="Search" autocomplete="off">
<input type="image" src="Search.gif" class="Button">
</form>
Many thanks.
You can replace the image with a submit button and remove the borders and background with css. That should show just plain text
<form action=".php" method="get" onsubmit="return check_small_search_form()">
<label for="search_query"></label>
<input type="text" name="search_query" id="search_query" class="Textbox" value="Search" autocomplete="off" />
<input type="submit" value="The text you want" class="Button" />
</form>

custom html button code for a form

ttI know this is a lame question but in order to do it right i need your help.
this is my html code
<form name="form1" class="form1">
<fieldset>
<legend>Subscription</legend>
<label for="subname">Name</label>
<input type="text" name="subname" />
<label style="padding-left:20px;" for="subemail">Your Email</label>
<input type="text" name="subemail" />
</fieldset>
</form>
<div style="width:100%; font-size:14px;text-align:center;">Click here to subscribe
</div>
<div class="subscribe">
</div>
and here is the fiddle
http://jsfiddle.net/V8RB2/
how can i associate the "Click here to subscribe" text and the button with this form?
If i understood you correctly, you want to submit the form when the link is clicked. To do this, you'll have to use JavaScript.
A quick way of doing it is by telling the form to submit itself in the onclick attribute of the link.
<a onclick="form1.submit()" href="#">Click here to subscribe</a>
What happens is, that when the link is clicked, you trap its onclick event and then you tell form1 to submit itself.
The easiest way would make this a button within the form and use CSS to style it however you want.
<input type="submit" id="button1" class="button1" name="subscribe" value="Click here to subscribe!" />
Then to style:
form input.button1 {
style here
}
The below will work.
<form name="form1" class="form1">
<fieldset>
<legend>Subscription</legend>
<label for="subname">Name</label>
<input type="text" name="subname" />
<label style="padding-left:20px;" for="subemail">Your Email</label>
<input type="text" name="subemail" />
</fieldset>
Click here to subscribe
</form>
Change your link's href to:
href="javascript:document.forms['form1'].submit()"
Or add that as an onClick attribute.
Updating with a technique to route around disabled javascript.
<script>document.write('Click here to subscribe</div><div class="subscribe">');</script><noscript><input type="submit" value="submit"></noscript>