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;
}

How to disable submit button after click single time

I want to disable submit button once it has clicked for send.this is my submit button code
<button title="<?PHP echo getTranslatedString('LBL_SAVE_ALT'); ?>" accessKey="S" class="btn btn-primary" value="<?PHP echo getTranslatedString('LBL_SAVE_LAPTOP'); ?>" id="formSave" type="submit" name="button" onclick="return checkform();">
Save detail
and this is onclick function code
function checkform() {
var incvfr = $("#invoice").val();
var inseridf = $("#invserial").val();
if (incvfr == 1) {
if (inseridf == '') {
alert("Please enter invoice number");
return false;
}
} else {
document.save.submit();
document.getElementById('formSave').setAttribute("disabled", "disabled");
}
}
when i disable submit button then form not send for save just disable button how to do it.
when i use disable code after save.submit(); then form submit but save button not disable

Try one() method in jQuery, it will run once for an element and might simplify your code.
jQuery Solution:
$(function(){
$('#formSave').one('click', function() {
$(this).attr('disabled','disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input title="" accessKey="S" class="btn btn-primary" value="Save detail" id="formSave" type="submit" name="button" onclick="">
JavaScript Solution:
Use setAttribute() method.
function disable(){
document.getElementById('formSave').setAttribute("disabled", "disabled");
}
<input title="" accessKey="S" class="btn btn-primary" value="Save detail" id="formSave" type="submit" name="button" onclick="disable()">

As I can see that you re using jQuery so when you are saving after that you can use jQuery hide function to hide your button by passing button id
function checkform(){
var incvfr=$("#invoice").val();
var inseridf=$("#invserial").val();
if(incvfr== 1) {
if(inseridf==''){
alert("Please enter invoice number");
return false;
}
} else {
document.save.submit();
$("#formSave").hide();
}
}

You can disable submit button using
$("#formSave").attr('disabled',true);
or
$("#formSave").prop('disabled',true);

add property disable
$("#formSave").prop('disabled',true);
if you want revert it use
$("#formSave").prop('disabled',false);

javascript autoclick with condition

I want to make a form where if someone type the word ok in the input field, the button will be auto clicked. How can this be done?
<input type="text" id="text"><br><br>
<input id="autoclick" type="button" value="type ok">

Try this:
HTML:
<input type="text" id="text"><br><br>
<input type="button" id="button" value="type ok">
jQuery:
$('#text').on('keyup', function(){
if($(this).val() == 'ok'){
$('#button').trigger('click');
}
})
// this block is for test
$('#button').on('click', function() {
alert('clicked');
});
Working example: https://jsfiddle.net/fnoL4j7m/1

You need to apply keyup event on the input box.
Every time something is entered, it will check if the input is "ok".
If so, a click event is triggered on the button.
$("#text").on('keyup', function(){
if ($(this).val() == 'ok') {
$('input[type="button"]').trigger('click');
}
});
Refer to this: https://jsfiddle.net/dts2aa5o/10/

Try this code:
<input type="text" id="text"><br><br>
<a href="#" id="autoclick">
<input type="button" id="button" value="type ok">
</a>
Jquery:
$('#text').keyup(function(){
if($(this).val()=='ok')
{
$( '#button' ).trigger( "click" );
}
});

you can do something like this :
$('#text').on('keyup', function(){
if($(this).val() == 'ok'){
$('#button').click()
}
})

jQuery checkbox validation without form

I want to make a validation function with jQuery or pure javascript.
this is my checkbox
<input type="checkbox" name="terms" id="terms">
and this is my link button
<label id="kosullar" for="terms">
<a class="fancybox-effects-d" data-fancybox-type="iframe" onclick="" href="kosullar.php">KULLANIM KOSULLARINI KABUL EDIYORUM</a>
</label>
If checkbox is checked process will continue to redirect my href url if not i want to show alert() to user.
Thats it.
Would you show me an example?

Can you try this,
function Accept(dat){
var terms = $('#terms').is(':checked');
if(terms){
window.location.href=dat.href;
}else{
alert('not checked!');
return false;
}
}
HTML Section:
<input type="checkbox" name="terms" id="terms">
<label id="kosullar" for="terms">
<a class="fancybox-effects-d" data-fancybox-type="iframe" onclick="return Accept(this);" href="kosullar.php">KULLANIM KOSULLARINI KABUL EDIYORUM</a>
</label>
Another method:
$(function(){
$(".fancybox-effects-d").click(function(){
var terms = $('#terms').is(':checked');
if(terms){
window.location.href=$(this).attr('href');
}else{
alert('not checked!');
return false;
}
});
});
HTML:
<input type="checkbox" name="terms" id="terms">
<label id="kosullar" for="terms">
<a class="fancybox-effects-d" data-fancybox-type="iframe" href="kosullar.php">KULLANIM KOSULLARINI KABUL EDIYORUM</a>
</label>

In your onclick define a function and pass this, return false to stop the default action
onclick="verifyCheck(this); return false;"
function verifyCheck(elem) {
var cb = document.getElememtById("terms");
if (cb.checked) {
location.href = elem.href;
} else {
alert("Check the box!");
}
}

$('.fancybox-effects-d').click(function(e) {
if (!($('#fancybox-effects-d').is(':checked'))) {
e.preventDefault();
}
});

Try this.
<a class="fancybox-effects-d" data-fancybox-type="iframe" onclick="return Validate();" href="kosullar.php">
Javascript method
function Validate()
{
If($("#terms").is(":checked"))
{
//do your code to go to next step
}
else
{
alert("Please check the checkbox");
return false;
}
}

How to disable onclick if code have attribute disabled?

How to create something like this:
If this code have attribute disabled="disabled", my onclick is also disable
<a type="submit" disabled="disabled" id="my-form" onclick="javascript:yourFunctionName();" name="continue" data-target="#dialog" href=""
class="btn primary btn-primary" title="End">End</a>

try this code, it will search for the tag and if disabled="disabled" found it will remove the onclick attribute
$(document).ready(function(){
$("a").each(function(){
if($(this).attr("disabled") == "disabled") {
$(this).attr("onclick","");
}
});
})

Its better to add a class named disabled to the <a> tag like below:
<a type="submit" id="my-form" onclick="javascript:yourFunctionName(this);" name="continue" data-target="#dialog" href=""
class="btn primary btn-primary disabled" title="End">End</a>
Then you can do like this in your yourFunctionName() :
function yourFunctionName(id) {
event.preventDefault();
if(id.className.indexOf('disabled'))
{
alert('Sorry, link is disabled');
return false;
}
//Function Code goes here
}