Here is my code:
<form action="telecallerinfo.php?action=modify&id=<?php echo $id;?>" method="post" enctype="multipart/form-data">
<table class="panel1">
<tr>
<td>Caller Name: <input name="tele_caller" type="text" size="15" value="<?php echo $tele_caller?>" /></td>
</tr>
<tr>
<td align="right">
<input name="submit" id="submit" type="image" src="images/submit.gif" width="60" onclick="this.form.submit();"/>
<input name="cancel" id="cancel" type="image" src="images/cancel.gif" width="60" onclick="window.location.href='telecallerinfo.php';"/>
</td>
</tr>
</table>
</form>
but then I am clicking on the cancel image. The form is being submitted. How to stop it because I want only the page to be refreshed. Is there any way of giving reset functionality to an image?
Image inputs submit the form when clicked. You need to return false in your event handler to stop the normal action of the button taking place.
<input name="cancel" id="cancel" type="image" src="images/cancel.gif" width="60" onclick="window.location.href='telecallerinfo.php'; return false;"/>
In theory the same should hold for the submit-image, but actually you should just discard the event handler and let the default action submit the form when clicked.
For a button that just navigates to a page you would be better off using a simple link.
Is there any way of giving reset functionality to an image?
If you really wanted:
<img onclick="document.getElementById('someform').reset();">
But it'd be better to do it without JS using a real reset button:
<button type="reset">
<img src="images/cancel.gif" alt="Reset"/>
</button>
This will give you a button graphic around the image, but you can get rid of that with CSS:
border: none; padding: 0; margin: 0; background: transparent;
Are you sure you want a ‘reset’? They're rarely useful, and often annoying if accidentally clicked thinking they're submit buttons...
<img src="images/cancel.gif" alt="DON'T FORGET ALTERNATIVE TEXT">
You may try this if you want it as an image:
<button type="reset">
<img src="image location" alt="Reset" />
</button>
It works but, RESET buttons are destructive and should not
be used, except in situations where destruction of user input is really
desirable.
<input type="reset" name="Reset" id="button" value="Reset" />
Just try this one
<input type="image" src="butup.gif" alt="Submit button">
Some browsers wont support to "alt" tab so there is another way:
<html>
<body>
<form action="example.cgi" method="post">
<input type="text" name="login">
<br>
<input type="image" src="submit.gif">
<input type="image" src="reset.gif">
</form>
</body>
</html>
Related
I want to disable the button when user has not uploaded anything. After user uploads the image, I want to enable the button.
I am trying to use ng-disabled, but I am not sure how to set the file-uploaded to true after user uploads the image.
<form action="/api/upload" method="post" enctype="multipart/form-data">
<div class="form-group">
<input name="myFile" ng-model="model.file-uploaded" type="file" accept="image/*" class="form-control"/>
<input name="width" value="{{model.widget.width}}" style="display: none"/>
<input name="widgetId" value="{{model.widget._id}}" style="display: none"/>
<input name="pageId" value="{{model.pageId}}" style="display: none"/>
<input name="websiteId" value="{{model.websiteId}}" style="display: none"/>
<input name="userId" value="{{model.userId}}" style="display: none"/>
<button type="submit" class="btn btn-block btn-success" ng-disabled="model.file-uploaded">Upload Image</button>
</div>
</form>
In ng-disable directive mention the method name GetFileSize() and inside the method return true or false based on the validation. Use jquery code to access the elements from the dom inside GerFileSize() method.
So I have recently "made" (taking bits and pieces from guides) a custom button for an input file form, but also with a little text displayer to the right. Now, in chrome, as a safety precaution, they have removed the path to the image - which is obviously logical. However, there is a possibility to remove these tags and just output the file name.
Now I have a clue how to do it, in theory, but I have no idea how to ACTUALLY do it. It's probably easy for the guys who knows this, but I have no idea. Would be amazing if you'd knew and told me!
This is the stripping thing I guess would work
file = path.split('\\').pop();
http://i.gyazo.com/ccccb44e7550475acb0cbccf4de20d0e.png
this is the HTML
<table style="width:100%; border-collapse: collapse;">
<td style="width: 18%">
<label class="fileUpload">
<input id="uploadBtn" type="file" class="upload" />
<div class="button-speed-menu-browse">
BROWSE..
</div>
</label>
</td>
<td>
<input id="uploadFile" class="field-path-input" placeholder="Choose PNG file" disabled/>
</td>
</table>
Now for the javascript (which is at the bottom).
document.getElementById("uploadBtn").onchange = function() {
document.getElementById("uploadFile").value = this.value;
};
You are right, you can get the image name using split()
Try it
document.getElementById("uploadBtn").onchange = function() {
document.getElementById("uploadFile").value = this.value.split("\\").pop();
};
<table style="width:100%; border-collapse: collapse;">
<td style="width: 18%">
<label class="fileUpload">
<input id="uploadBtn" type="file" class="upload" />
<div class="button-speed-menu-browse">
BROWSE..
</div>
</label>
</td>
<td>
<input id="uploadFile" class="field-path-input" placeholder="Choose PNG file" disabled/>
</td>
</table>
Hello , I have little problem with this html script :
<!DOCTYPE html>
<html>
<body>
<td>
<form name="tsform">
<p align="center">
<font face="Arial">Choisir un Pseudo :
<br>
<input type="text" name="NICKNAME"><br />
<input type="button" value="Se connecter" onClick="javascript:location.href='ts3server://ts.xxxxxxxxx.fr/?port=9987&channel=Accueil&nickname=' + tsform.NICKNAME.value">
</font>
</p>
</form>
</a>
</td>
</body>
</html>
This scipt work fine if you click , but I want click and push Enter key
I modify :
input type="button" value="Se connecter"
to
input type="submit" value="Se connecter"
And work fine only on FireFox , not work on IE and Chrome
Have you any idea ?
One I would suggest using a submit button just a lot less annoying than onClick, and have modified the form made it cleaner and easy to see (also i left your <br /> tags in but i would suggest you dont use them and use css instead)
<td>
<form name="tsform"action="ts3server://ts.xxxxxxxxx.fr/"method="get">
<input type="hidden" name="port" value="9987"><input type="hidden" name="channel" value="Accueil">
<p align="center">
<font face="Arial">Choisir un Pseudo :
<br>
<input type="text" name="NICKNAME">
<br />
<input type="submit" value="Se connecter" />
</font>
</p>
</form>
</a>
</td>
Add the action attribute to the form tag:
<form name="tsform" action="javascript:location.href='ts3server://ts.xxxxxxxxx.fr/?port=9987&channel=Accueil&nickname=' + tsform.NICKNAME.value">
Pressing enter will submit the form but since there is no action (eg. URL) the submission doesn't do anything. I would utilize the default form behaviour and add the URL to an action attribute on the form element as well as setting the method (eg. get). Then add the 2 default values (port and channel) to hidden inputs.
Also, rather than attaching an onClick event listener to the button I would use a submit button which will trigger the same form submit as pressing enter.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<td>
<form name="tsform" action="ts3server://ts.xxxxxxxxx.fr/" method="get">
<input type="hidden" name="port" value="9987">
<input type="hidden" name="channel" value="Accueil">
<p align="center">
<font face="Arial">Choisir un Pseudo :
<br>
<input type="text" name="nickname">
<br />
<input type="submit" value="Se connecter" />
</font>
</p>
</form>
</a>
</td>
</body>
</html>
I have two <input type=Button>. When clicked, both will load one dialogue box contained inside a div.
I want to add a separate button and text into the div which is only viewable when the second button is clicked. Instead of rewriting this one for btn one and one for btn two. How can I make the extra text and button only available if the 2nd btn is clicked?
<div id="LabourOrPlantDialog" title="Comments" style="display:none;">
<table class="table">
<tr>
<th>Item</th>
</tr>
<tr>
<td id="Item"></td>
</tr>
</table>
<br />
<textarea id="ExistingComments" type="text" runat="server" rows="7" cols="30" maxlength="2000"></textarea>
<input id="SubmitComment" type="button" value="Submit" onclick="SubmitButton()" />
<!-- BELOW IS THE TEXT AND BTN I ONLY WANT AVAILABLE WHEN 2ND BTN IS CLICKED -->
<input type="text" name="BoqTextBox" />
<input type="AddValueButton" value="+" onclick="Add(BoqTextBox)" />
</div>
Some sort of bool im guessing? Have never done this before...any help would be great. Thanks
EDIT:
<input id="SubmitCommentsForOne" type="button" value="Comments" onclick="ShowComment('<%: item.ItemCode %>')" />
<input id="SubmitCommentsForTwo" type="button" value="Comments" onclick="ShowComment('<%: item.Number %>')" />
var Code
function ShowCommentBoxForBOQ(Number) {
Code = Number;
Work.DisplayBoxForBOQ(Number);
$("#LabourOrPlantDialog").dialog({ modal: true });
}
LabourOrPlantDialog loads the div.
EDIT: Can I give anything else which would help? Does anyone have any idea a tall? Thank you for any replies
Add this wherever you'd like the new text & button:
<div id="hiddenBox">
<input type="text" name="BoqTextBox" />
<input type="button" value="+" onclick="Add(BoqTextBox);" />
</div>
Add this somewhere in your stylesheet:
#hiddenBox{display:none;}
Add this somewhere in your javascript
$("#SubmitCommentsForTwo").click(function(){
$("#hiddenBox").show();
});
I'm using two different forms - one is to retrieve radio button, another is as submission form. Problem is, I cannot use both the form actions at a time.
<table id="newImageTable" border="1" style="position:absolute; ">
<?
while($row=mysql_fetch_array($image_query)) {?>
<form name="radioForm">
<tr>
<td><img border="0" src="<?=$row['image_path']?>" /></td>
<td>
<input type="radio" name="imageRadio" id="<?=$row['image_name']?>" />
</td>
</tr>
</form>
<?}?>
<tr>
<td width="60%">
<!--<input type="file" id="image" /><input type="button" id="imagePathButton" value="Upload Image" onclick="uploadImagePath()" />-->
<form name="submitForm" action="http://128.233.104.33/passimagemodels/uploadServer.php?dbname=<? echo $dbname ?>" method="post" target="foo" enctype="multipart/form-data"
onSubmit="window.open('', 'foo', 'width=200,height=200,status=yes,resizable=yes,scrollbars=yes')">
Upload New Image: <input name="myfile" type="file" id="imageBox" />
<input type="submit" name="submitBtn" value="Upload" onclick=""/>
</form></td>
<td width="10%">
<input type="button" value="Use selected image" id="useImageButton" onclick="post_value();"/>
</td></tr>
</table>
javascript code:
function getRadioValue() {
for (index=0; index < document.radioForm.imageRadio.length; index++) {
if (document.radioForm.imageRadio[index].checked) {
var radioValue = document.radioForm.imageRadio[index].id;
return radioValue;
}
}
}
function post_value(){
alert('im');
var selected_Image = getRadioValue();
if (selected_Image == null){
alert('Please Select an Image');
}
else{
window.opener.document.getElementById(imageId).value = selected_Image;
self.close();
}
}
Here if I put the radioForm outside the table, getRadioValue function works fine but Upload button does not submit the submitForm. And if I surround one <tr> with radioForm scenario is just vice-versa. Are there any restrictions on nesting forms?
Scroll to the bottom if you want to skip the explanation, and get to the solution.
You're creating multiple forms with the same name. document.radioForm will only refer to the first form, which is probably not desired. To solve it, place the form tags outside the while loop.
See below for a simplified overview of your problem, without loss of generality):
Current situation (document.radioForm.imageRadio.length = 1):
<!-- Only the first form is selected by JS. All of the others are ignored-->
<form name="radioForm"><input type="radio" name="imageRadio" id="imag1" /></form>
<form name="radioForm"><input type="radio" name="imageRadio" id="imag2" /></form>
<form name="radioForm"><input type="radio" name="imageRadio" id="imag3" /></form>
<!-- Et cetera -->
Desired situation (<form> placed outside the while loop):
<form name="radioForm">
<input type="radio" name="imageRadio" id="image1" />
<input type="radio" name="imageRadio" id="image2" />
<input type="radio" name="imageRadio" id="image3" />
</form>
Fixed code
One form is enough to meet your wishes. The form will only be submitted when you click at the <input type="submit" .. /> button. Since the name attribute of your previous "second" form is obsolete, I've omitted it without breaking any code.
<form name="radioForm"
action="http://128.233.104.33/passimagemodels/uploadServer.php?dbname=<? echo $dbname ?>"
method="post" target="foo" enctype="multipart/form-data">
<table id="newImageTable" border="1" style="position:absolute;">
<?
while($row=mysql_fetch_array($image_query)) {?>
<tr>
<td><img border="0" src="<?=$row['image_path']?>" /></td>
<td>
<input type="radio" name="imageRadio" id="<?=$row['image_name']?>" />
</td>
</tr>
<?}?>
<tr>
<td width="60%">
<!--<input type="file" id="image" /><input type="button" id="imagePathButton" value="Upload Image" onclick="uploadImagePath()" />-->
<input type="submit" name="submitBtn" value="Upload" />
</td>
<td width="10%">
<input type="button" value="Use selected image" id="useImageButton" onclick="post_value();" />
</td>
</tr>
</table>
</form>
I have adjusted only one thing: The onsubmit event handler have been removed. It serves no purpose, and would be a huge annoyance to the user.
nesting form isn't allowed, check How do you overcome the html form nesting limitation?
the result unpreditable but you can use Javascript to workaround with it.
Checkout jQuery serialize example. see how it extract values, and then submit from via DOM.
http://api.jquery.com/serialize/
In your case, file upload form should be the parent, because you need its encode type to work. Or you can optionally iframe it, using the above technique to reorganize data.