Can any one pf you please tell me how to clear the File upload control value using javascript.
function ClearFileUpload()
{
var fil = document.getElementById("FileUpload1");
fil.select();
n=fil.createTextRange();
n.execCommand('delete');
fil.focus();
}
Due to security reasons there is no direct access to the value of a file upload control on the client using javascript.
What you could to is deleting the element out of the dom and recreating it. Have a look at this
link for an example
<div id="uploadFile_div">
<input type="file" id="uploadFile" onkeydown="return false;" size="40" name="uploadFile"/>
</div>
<a onclick="clearFileInputField('uploadFile_div')" href="javascript:noAction();">Clear</a>
<script>
function clearFileInputField(tagId)
{
document.getElementById(tagId).innerHTML = document.getElementById(tagId).innerHTML;
}
</script>
working code tested IE,Firefox
<% using (Html.BeginForm("SaveSignatory", "LabMaster", FormMethod.Post, new { enctype = "multipart/form-data", id = "Signatory" }))
{ %>
<div>
</div>
<div id="divUpload">
<input type="file" name="filUpload" accept="image/*" id="filUpload" onchange="showimagepreview(this)" />
</div>
<img id="imgprvw" alt="uploaded image preview" height="200" width="200" />
<input type="button" id="btnRemoveUpload" value="Remove Upload Image" onclick="clearFileInputField('divUpload')" />
<input type="button" onclick="saveData()" />
<%}%>
function clearFileInputField(tagId) {
document.getElementById(tagId).innerHTML =
document.getElementById(tagId).innerHTML;
}
Related
I'm just learning javascript and php. I created a contact form and I'd like the submit button to accomplish two things when I press it:
submit the data to me (this part is working)
read my onclick function (this part is not working)
<input id="submit" name="submit" type="submit" value="Submit" onclick="eatFood()">
<?php
if ($_POST['submit']) {
////?????
}
?>
I'm sending the data to my email, and so I get that. But the onclick function doesn't seem to work. I tried reviewing add onclick function for submit button but it didn't help.
I need to see your submit button html tag for better help. I am not familiar with php and how it handles the postback, but I guess depending on what you want to do, you have three options:
Getting the handling onclick button on the client-side: In this case you only need to call a javascript function.
function foo() {
alert("Submit button clicked!");
return true;
}
<input type="submit" value="submit" onclick="return foo();" />
If you want to handle the click on the server-side, you should first make sure that the form tag method attribute is set to post:
<form method="post">
You can use onsubmit event from form itself to bind your function to it.
<form name="frm1" method="post" onsubmit="return greeting()">
<input type="text" name="fname">
<input type="submit" value="Submit">
</form>
html:
<form method="post" name="form1" id="form1">
<input id="submit" name="submit" type="submit" value="Submit" onclick="eatFood();" />
</form>
Javascript:
to submit the form using javascript
function eatFood() {
document.getElementById('form1').submit();
}
to show onclick message
function eatFood() {
alert('Form has been submitted');
}
if you need to do something before submitting data, you could use form's onsubmit.
<form method=post onsubmit="return doSomething()">
<input type=text name=text1>
<input type=submit>
</form>
I have this code:
<html>
<head>
<SCRIPT type=text/javascript>
function deshabilitarBoton() {
document.getElementById("boton").style.display = 'none';
document.getElementById("envio").innerHTML ="<br><img src='img/loading.gif' width='16' height='16' border='0'>Generando...";
return true;
}
</SCRIPT>
<title>untitled</title>
</head>
<body>
<form name="form" action="ok.do" method="post" >
<table>
<tr>
<td>Fecha inicio:</td>
<td><input type="TEXT" name="fecha_inicio" id="fecha_inicio" /></td>
</tr>
</table>
<div id="boton">
<input type="submit" name="event" value="Enviar" class="button" onclick="return deshabilitarBoton()" />
</div>
<div id="envio">
</div>
</form>
</body>
</html>
Create a hidden button with id="hiddenBtn" and type="submit" that do the submit
Change current button to type="button"
set onclick of the current button call a function look like below:
function foo() {
// do something before submit
...
// trigger click event of the hidden button
$('#hinddenBtn').trigger("click");
}
<button type="submit" name="uname" value="uname" onclick="browserlink(ex.google.com,home.html etc)or myfunction();"> submit</button>
if you want to open a page on the click of a button in HTML without any scripting language then you can use above code.
please see this html codes :
<!-- PAGE - 5 -->
<div class="section cc_content_5" id="page5" style="display: none;">
<div class="pad_content">
<div class="right grid_1">
<h1>
Contact Address
</h1>
<img src="Images/photo_5.jpg" alt=""><br />
<br />
<strong>The Companyname Inc</strong> 8901 Marmora Road,<br />
Glasgow, D04 89GR.<br />
Telephone: +1 800 123 1234<br />
Fax: +1 800 123 1234<br />
E-mail: www.copanyname.com<br />
</div>
<div class="left grid_2">
<h1>
Contact Form
</h1>
<div id="note">
</div>
<div id="fields">
<form id="ajax-contact-form" action="javascript:alert('success!');">
<label>
Name:</label><input class="textbox" name="name" value="" type="text">
<label>
E-Mail:</label><input class="textbox" name="email" value="" type="text">
<label>
Subject:</label><input class="textbox" name="subject" value="" type="text">
<label>
Comments:</label><textarea class="textbox" name="message" rows="5" cols="25"></textarea>
<label>
Captcha</label><img src="Images/captcha.php" style="margin: 3px 0px; width: 200px;
height: 32px;">
<div class=" clear">
</div>
<label>
</label><input class="textbox" name="capthca" value="" type="text">
<div class=" clear">
</div>
<label>
</label><input class="pin" name="submit" value="Submit" type="submit">
</form>
<div class="clear">
</div>
</div>
</div>
<div class="clear">
</div>
</div>
</div>
and their script :
<script type="text/javascript">
$(document).ready(function () {
$("#ajax-contact-form").submit(function () {
var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact.php", data: str, success: function (msg) {
if (msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
{ result = '<div class="notification_ok">Your message has been sent. Thank you!<br /> send another mail</div>'; $("#fields").hide(); } else
{ result = msg; } $("#note").html(result);
}
}); return false;
});
});
function freset()
{ $("#note").html(''); document.getElementById('ajax-contact-form').reset(); $("#fields").show(); }
</script>
i really want to know how can i put page 5 in my asp.net web form?
as you we can not have a form inside default asp.net web page form.
so what can i do about page 5?
thanks in advance
You can not have two forms inside an asp.net page and both work on code behind.
The alternative that you have.
Place the second form before or after the asp.net form
Do not set second form, just read the input data that you interesting on code behind.
Dynamically create the form at the end of the page using the javascript and post it.
Because here I see that you post to php and I think that you like to keep the old code with asp.net, add them after the closing form of the asp.net form.
<form id="AspForm" runat="server">
...
</form>
<form id="ajax-contact-form" method="post" action="contact.php" >
...
</form>
More Extreme
Because you all ready use javascript you can do this trick. Copy and paste all the content in a form at the end of the page and post it.
<form id="AspForm" runat="server">
...
<div id="ajax-contact-infos" >
<label>
Name:</label><input class="textbox" name="name" value="" type="text">
<label>
<input class="pin" name="submit" value="Submit"
type="button" onclick="SubmitThisForm();return false;" >
...
</div>
</form>
<form id="ajax-contact-form" method="post" action="contact.php" >
<div id="PlaceOnMe" ></div>
</form>
and on javascript copy it just before post it as
<script type="text/javascript">
function SubmitThisForm()
{
// here I copy (doublicate) the content of the data that I like to post
// in the form at the end of the page and outside the asp.net
jQuery("#PlaceOnMe").html(jQuery("#ajax-contact-infos"));
// Now we submit it as its your old code, with out change anything
jQuery("#ajax-contact-form").submit();
}
// here is the old code.
$(document).ready(function () {
$("#ajax-contact-form").submit(function () {
var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact.php", data: str, success: function (msg) {
if (msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
{ result = '<div class="notification_ok">Your message has been sent. Thank you!<br /> send another mail</div>'; $("#fields").hide(); } else
{ result = msg; } $("#note").html(result);
}
}); return false;
});
});
function freset()
{ $("#note").html(''); document.getElementById('ajax-contact-form').reset(); $("#fields").show(); }
</script>
All this is with the minimum changes. You can how ever make optimization, but this is the general idea.
You have a number of options; nesting the forms is the worst as it's something that will/wont work depending on the browser.
You can as #Aristos has mentioned, have one form after the other. This is a good solution but is not necessarily the best in terms of your site design.
The second is that you could embed your contact form on a normal HTML page, then include it on your parent page in an iframe or similar. This would get around the issues of nested forms, but might not give you the behaviour you want in terms of user experience.
The third is that your contact form would be better suited to being a User Control
You would put all of your contact form fields into the ascx file, and handle the button click for the submit in this control. After processing this submit, you can replace the user control with a simple message thanking the user for their input.
You can also put all of the required form validation in this. Your ASCX might look something like:
<asp:Panel runat="server" id="ContactPanel">
<div class="left grid_2">
<h1>
Contact Form
</h1>
<div id="note">
</div>
<div id="fields">
<label for="<%=InputContactName.ClientID%>">Name:</label>
<asp:TextBox runat="server" id="InputContactName" value="" />
<!-- Rest of Form goes here -->
<div class=" clear">
</div>
<asp:Button runat="server" id="ContactFormSubmit" OnClick="ContactFormSubmit_Click" Text="Send Feedback" />
<label> </label><input class="pin" name="submit" value="Submit" type="submit">
<div class="clear"></div>
</div>
</div>
</div>
</asp:Panel>
<asp:Panel runat="server" id="ThanksPanel" Visible="false">
<p>Thank you for your feedback. We'll try not to ignore it. But it is Friday. So we might. At least until Monday.</p>
</asp:Panel>
In your ContactFormSubmit_Click button you can just grab the text from your contact form, hide the ContactPanel, and show the ThanksPanel.
Really simple, and encapsulated away in a user control.
I have form with few text boxes which goes through validation (both server and client sides). In the form I have buttons: "Next", "Back", "CanceL". So I don't need validation to fireup then user clicks "back" or "cancel" buttons. How can I achieve this?
Thanks in advance!
Some sample:
<div class="buttons">
<input type="submit" name="cancelButton" value="" />
<input type="submit" name="backButton" value="" />
<input type="submit" name="nextButton" value="" />
</div>
<% using (Html.BeginForm()) { %>
<p>
<table style="width: 200px">
<tr><td align="center" colspan=2><%= Html.ValidationMessageFor(m => m.street) %><%= Html.DropDownListFor(m => m.street, Model.streetsList) %></td></tr>
<tr><td colspan=2> </td></tr>
<tr><td valign="bottom" align="right" style="width: 75px"><%= Html.LabelFor(m => m.flatNumber) %>:</td><td align=left><%= Html.TextBoxFor(m => m.flatNumber, new { maxlength = 6, style = "width: 48px;" })%> <%= Html.ValidationMessageFor(m => m.flatNumber) %></td></tr>
</table>
<br />
<input type="submit" class="refusal button red floatL" name="cancelButton" value="" />
<input type="submit" class="back button green floatL" name="backButton" value="" />
<input type="submit" class="continue button green floatR marR" name="nextButton" value="" />
</div>
<div class="clear">
</div>
<% } %>
At the server side I use DataAnnotations attributes for validation.
the Button class has a CausesValidation property - if that is set to false, validation won't be triggered on postback.
Example:
<asp:Button id="btnCancel" CausesValidation="false" onClick="bntCancel_Click" Text="Cancel" runat="server" />
Note that this will disable the ASP.NET validators - if you have your own validation you will need to disable it another way.
Surround the text boxes with a form and turn next, back, and cancel into submit buttons. On event onsubmit, assign a method which returns true if the form is valid and should proceed to send it to the server, otherwise false.
So I would expect something along the lines of:
<form id="navigatorForm">
<!-- Various text forms here -->
<input type="submit" value="Back" onsubmit="back()" />
<input type="submit" value="Next" onsubmit="next()" />
<input type="submit" value="Cancel" onsubmit="cancel()" />
<input type="hidden" id="operation" name="operation" value="" />
</form>
<script type="text/javascript">
function validate() {
// Perform validation here
// If okay, return true, else false
}
function next() {
document.getElementById('operation').value = 'next';
if(!validate()) {
alert('Form is not filed correctly. Please pay more attention!');
return false; // Do not send to server!
} else {
return true;
}
}
function back() {
document.getElementById('operation').value = 'back';
return true;
}
function cancel() {
document.getElementById('operation').value = 'cancel';
return true;
}
</script>
Notice that unlike next(), back() and cancel() unconditionally return true, meaning that the request is sent to the server in any circumstance. At this point, on the server side, you'd need only to check to see if operation is next to know whether or not you should perform further testing.
I need to design a page to register as well as login a user.By clicking login button login servlet should be called.And on clicking register button,register servlet will be called.how can i do this?
Having two forms that post to different places is the simplest method
Name your buttons:
<input type="submit" name="form_action" value="Login" />
and
<input type="submit" name="form_action" value="Register" />
When it comes to processing the form, just hookout form_action and it should equal Login or Register.
This requires some more server-side logic but should work if you need your two forms to be tightly combined.
You can include some Javascript code for this.
<form name="Form1" method="post">
Your Name <input type="text" name="text1" size="10" /><br />
<INPUT type="button" value="ButtonLogin" name=button1 onclick="return OnButtonLogin();">
<INPUT type="button" value="ButtonRegister" name=button2 onclick="return OnButtonRegister();">
</form>
like this:
<script language="Javascript">
<!--
function OnButtonLogin()
{
document.Form1.action = "Login.do"
document.Form1.target = "_blank";
document.Form1.submit();
return true;
}
function OnButtonRegister()
{
document.Form1.action = "Register.do"
document.Form1.target = "_blank";
document.Form1.submit();
return true;
}
-->
</script>
I'm new to jQuery so this may be a real simple answer. I have a ASP.NET project that I'm trying to dynamically add content to an ASP Label element by typing into a text box and clicking a button. Sounds simple right? Well, I can get the content to added, but when the form is submitted the Label element is still empty? Why is the new data not submitted? What step am I missing? Please help. Here's some sample code:
<asp:Label ID="lblContainer" Text="" runat="server" />
<input type="text" name="tag" id="tag" />
<input type="button" name="AddTag" value="Add" class="button" onclick="addTag();" />
function addTag() {
if ($("#tag").val() != "") {
$("#lblContainer").append('$("#tag").val()' + '<br />');
$("#tag").val("");
}
}
Asp.Net doesn't work that way because it won't send the contents of a <span> tag in the HTTP Post when your form is submitted. You need to add that content to an <input> of some sort. Try something like this instead.
<span id="tagContainer" runat="server"></span>
<input type="text" name="tag" id="tag" />
<input type="button" name="AddTag" value="Add" class="button" onclick="addTag();" />
<!-- Use a hidden field to store the tags -->
<asp:HiddenField id="tagText" runat="server" />
function addTag() {
var newTag = $.trim($("#tag").val());
if (newTag != "") {
$("#tag").val("");
$("#tagContainer").append(" "+ newTag);
// append the newTag to the hidden field
var $tagText = $("#tagText");
$tagText.val($tagText.val() + " " + newTag);
}
}
Then in your asp.net code you can retrieve the value like so..
string myTagText = tagText.value;