Develop Reference

Submit button not working after jQuery interaction

I have a form where I upload files to the server. Everything was working as desired until I added some validation logic to the submit button(disable it while no file is selected and enable it after selection). Now my submit doesn't fire the POST action anymore.
Do I need to explicitly add onclick listener? I assume the jQuery modified some properties that prevents the click listener from firing by default?
<form name="uploadFile" method="POST" action="uploadFile" enctype="multipart/form-data">
<input type="file" name="file" id="file"><br />
<input type="submit" name="submit" id="importkey" value="Import Key" />
</form>
function setSubmitBtnState() {
var sb = jQuery('#importkey');
var dclasses = 'ui-button-disabled ui-state-disabled';
if (jQuery('#file').val() == '') {
sb.attr('disabled', 'disabled');
sb.addClass(dclasses);
} else {
sb.removeAttr('disabled');
sb.removeClass(dclasses);
}
}
Chrome Debugger shows:
Button disabled state
<input type="submit" name="submit" id="importkey" value="Import Key" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled" role="button" aria-disabled="false" disabled="disabled">
Button enabled state
<input type="submit" name="submit" id="importkey" value="Import Key" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">
So the class is removed.
This code fixed the problem.
jQuery("#importkey").button().click(function() {
});

You need to make proper validation by calling setSubmitBtnState() properly. Try this one:-
$('form[name="uploadFile"]').submit(function(e){
return setSubmitBtnState();
});
function setSubmitBtnState() {
var isValid = true;
var sb = jQuery('#importkey');
var dclasses = 'ui-button-disabled ui-state-disabled';
if (jQuery('#file').val() == '') {
isValid = false;
sb.attr('disabled', 'disabled');
sb.addClass(dclasses);
} else {
isValid = true;
sb.removeAttr('disabled');
sb.removeClass(dclasses);
}
return isValid;
}

Javascript how to make enter key submit a form [duplicate]

I'm not sure what I am doing wrong here. I want the enter key to work as well as clicking the button.
<form action="" method="get" class="priceOptionForm" name="priceOptionForm">
<input name="paypal_email" type="text" value="whatever" id="email"></label>
Save all
</form>

Try this:
document.getElementById('email').onkeydown = function(e){
if(e.keyCode == 13){
// submit
}
};

Please use below code snippet...It should be added into script block
<script>
document.onkeydown=function(evt){
var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
if(keyCode == 13)
{
//your function call here
}
}
</script>

All below codes should be added into script block or file.
define submit function:
function submitForm(){
document.priceOptionForm.submit();
document.priceOptionForm.method='post';
}
For the enter key to submit form:
document.onkeydown=function(){
if(window.event.keyCode=='13'){
submitForm();
}
}
For the link to work:
document.getElementById("profile_price").onclick=submitForm;
You can refer to http://jsfiddle.net/honglonglong/YMX2q/ for some trying.

Use an <input type="submit"> instead of a link. Then the enter key will work automatically.

simply make a hidden button like this
HTML
<input type="submit" id="submitbtn" />
CSS
#submitbtn{display:none;}
when the user will hit the enter button the form will be submitted
Don't forget to put the type="submit"

// Process form if use enter key. put script in head.
document.onkeyup = enter;
function enter(e) {if (e.which == 13) submitForm();}
// uses keyup not down as better practice imo
// submitForm() is user function that posts the form

You Can Put a Default Button ID in form tag is automatically trigger
<form id="form1" runat="server" defaultbutton="Button1">
<asp:Button ID="Button1" runat="server" Text="Button"
OnClick = "Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Button"
OnClick = "Button2_Click" />
<asp:Button ID="Button3" runat="server" Text="Button"
OnClick = "Button3_Click" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>

Oh that is because the HTML form element does not recognize the link as a button, to click..
you need to replace it with a button...
<input type="submit" value="this will display on your button" onClick="javascript:void(0)">
but if you want it to look like a link you should do this in the css
<style type="text/css">
input{background-color:white;border:0 none;}
</style>

The submit event fires when the user clicks a submit button ( or ) or presses Enter while editing a field (e.g. ) in a form. The event is not sent to the form when calling the form.submit() method directly.
check documentation

how to hide a button if no value in div

this is code which i try to change
<%if(request.getParameter("hiderefineproblem")==null){%>
<input type="button" value="Refine Problem" onclick="return showHide();" style="background-color: #3399ff;color:#ffffff;" />
<%}%>
<div id="showHideDiv" style="display: none;">
<p>Would one of the following diagnoses apply? Choose the most
specific one:</p>
<FORM ACTION="snomedMapping.jsp#newres" METHOD="POST">
<%
pstm = Con.prepareStatement(selectsql);
pstm.setString(1, snomedid);
pstm.setString(2, snomedname);
resultSet = pstm.executeQuery();
boolean bSubmit=false;
int refid=0;
String[] pipe;
while (resultSet.next()) {
refid=resultSet.getInt("refid");
pipe= resultSet.getString("mapRule").split("\\|");
if (pipe.length > 1){bSubmit=true;
%>
<input type="radio" id="radioList" value="<%=refid%>" name="refId"/>
<tr><%=pipe[1]%></tr>
<br />
<%
}
}
%>
<%if(bSubmit){%>
<input type="hidden" name='hiderefineproblem' value='yes'/>
<INPUT TYPE="SUBMIT" value="Submit" style="background-color: #3399ff;color:#ffffff;">
<%}%>
</FORM>
</div>
<script>
function showHide() {
var ele = document.getElementById("showHideDiv");
if (ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>
there is button its value is Refine Problem and i need not to show the button if there is no result for that button . the button contains some value from database .sometimes there is no value for that button . so that time i need not to show the button .
how to hide the on click button if the value is empty .

if I understand the question correctly, I believe you can give all the buttons a class and then iterate across all the buttons with javascript, checking the value each time, and if the value is nothing using javascript to .hide() that button

Trying to disable CSS buttons using ASP hidden value and javascript

I am using the ASP.NET PasswordRecovery method, and have a couple of CSS buttons to submit the form OR cancel the request.
I also grab the users email address to pass along to the successtext value of PasswordRecovery method, set the ASP hiddenvalue to success, and then try to use javascript to disable the buttons based on this value.
The problem is that this hiddenfield value seems to be set to "success" on initial page load, even though when viewing the source of the rendered page shows NO value.
There is probably a better approach to this, but I have tried several different ways, and this is successful up the point that I cant change the view state of the buttons.
<script runat="server">
protected void resetuserpassword_SendingMail(object sender, MailMessageEventArgs e)
{
e.Message.IsBodyHtml = true;
e.Message.Subject = "Password Assistance";
TextBox txtUserName = (TextBox)resetuserpassword.UserNameTemplateContainer.FindControl("UserName");
string UserEmailID = Membership.GetUser(txtUserName.Text.Trim()).Email;
resetuserpassword.SuccessText = "Password sent to ";
resetuserpassword.SuccessText += UserEmailID;
ValueHiddenField.Value = "Success";
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderArea" Runat="Server">
<script type="text/javascript">
window.onload = disableButtons;
function disableButtons() {
var element = document.getElementById('ContentPlaceHolderArea_ValueHiddenField');
if (typeof(element) != 'undefined' && element != null) {
if (document.getElementById('ContentPlaceHolderArea_ValueHiddenField').value = 'Success') {
var submitBtnElement = document.querySelector("#submitBtn");
var cancelBtnElement = document.querySelector("#cancelBtn");
submitBtnElement.style.display = "none";
cancelBtnElement.style.display = "none";
}
}
}
function clickSubmit() {
document.getElementById("ContentPlaceHolderArea_resetuserpassword_UserNameContainerID_SubmitButton").click();
}
function clickCancel() {
window.location.replace("~/Login.aspx");
}
</script>
<asp:hiddenfield id="ValueHiddenField" value="" runat="server"/>
<asp:hiddenfield id="ValueHiddenField" value="" runat="server"/>
<asp:PasswordRecovery ID="resetuserpassword" runat="server"
MailDefinition-BodyFileName="~/ResetPasswordEmailTemplate.html"
OnSendingMail="resetuserpassword_SendingMail"
successtext="Password sent to email address on record."
Width="300px" Font-Names="Arial" Font-Size="Small" UserNameTitleText="" >
<InstructionTextStyle Font-Names="Arial" Font-Size="Small" />
<MailDefinition BodyFileName="~/ResetPasswordEmailTemplate.html"></MailDefinition>
<UserNameTemplate>
<div><asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName" style="display:none;"></asp:Label></div>
<div style="font: arial, verdana, sans-serif;font-size: 13px;padding-bottom: 5px;font-weight: bold;">Please Enter your Username</div>
<div><asp:TextBox ID="UserName" runat="server" style="width: 180px;"></asp:TextBox></div>
<div><asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="PasswordRecovery1">*</asp:RequiredFieldValidator></div>
<div><asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal></div>
<div style="display: inline;" ><asp:Button ID="SubmitButton" runat="server" CommandName="Submit" Text="Submit" ValidationGroup="PasswordRecovery1" style="display: none;" /></div>
</UserNameTemplate>
</asp:PasswordRecovery>
<div>
<div id="submitBtn" onclick="clickSubmit()">Submit</div>
<div id="cancelBtn" onclick="clickCancel()">Cancel</div>
</div>
</asp:Content>

Your javascript if statement is assigning the value 'Success' to the Hidden Field (single equals sign).
if (document.getElementById('ContentPlaceHolderArea_ValueHiddenField').value = 'Success') {
...
}
Change it to this (double equals sign):
if (document.getElementById('ContentPlaceHolderArea_ValueHiddenField').value == 'Success') {
...
}

disable button via jquery

here is the my code;
Loading data from database my buttons,after loading finished,I want to
trigger some client script,.in my senario,after clicked the first button ,want to disable clicked button,
and enable the secon button(clickable element)
I am able to disabled fisrt button,
I couldnt enable secont button though
**
First button
<button type="button" class="btn btn-default"
onclick="
var resetbtnid = '#m-' + $(this).attr('id'); //I am getting
$(this).prop('disabled', true);
$('#resetbtnid').removeAttr('disabled');
"
name='<%# DataBinder.Eval(Container.DataItem,"Fiyat") %>'
id='<%# DataBinder.Eval(Container.DataItem,"Id") %>' >
<span class="glyphicon glyphicon-ok-sign"></span></button>
Second button
<button type="button" disabled="disabled" class="btn btn-default"
id='m-<%# DataBinder.Eval(Container.DataItem,"Id") %>'
name='<%# DataBinder.Eval(Container.DataItem,"Fiyat") %>' >
<span class="glyphicon glyphicon-minus-sign"></span></button>

Your selector is incorrect. In your code $('resetbtnid').removeAttr('disabled')
Use # if you want ID selector like $('#resetbtnid').removeAttr('disabled')
You can use .prop() like $('#resetbtnid').prop('disabled', true/false)
Use . for class selector.
EDIT:
As resetbtnid is a variable use it without quotes
var resetbtnid = '#m-' + $(this).attr('id');
$(resetbtnid).removeAttr('disabled');

Try this:
//Enable
$('#buttonID').attr('disabled', 'disabled');
//Disable
$('#buttonID').removeAttr('disabled');

When there are two buttons, one is enabled (default), the second is disabled, it looks like this in code
HTML:
<button id="btn1" />
<button id="btn2" disabled="disabled" />
JS:
$(document).ready(function() {
$('#btn1').click(function () {
$('#btn1').prop('disabled', 'disabled');
$('#btn2').prop('disabled', false);
})
})
That should do the job!