javascript - सबमिट सबमिट पर सबमिट बटन अक्षम करें





jquery (10)


जैसा कि पहले कहा गया है, यदि आप सबमिट बटन पर अक्षम विशेषता जोड़ते हैं, तो डेटा नहीं भेजा जाएगा।

@ वालमस की चाल काम करती है, लेकिन मुझे एक समाधान मिला जो कार्यान्वित करना बहुत आसान है:

$('#yourform').submit(function(){
    $('#mySubmitButton').addClass('disabled');
});

और आप अक्षम वर्ग को सीएसएस में परिभाषित करते हैं जैसे कि:

.disabled{
    cursor:not-allowed;
}

यह अक्षम = "अक्षम" जैसा ही होगा, लेकिन भेजे गए डेटा के परिणामों के बिना।

मैंने क्लिक के बाद अपनी वेबसाइट पर सबमिट बटन अक्षम करने के लिए यह कोड लिखा था:

$('input[type=submit]').click(function(){
    $(this).attr('disabled', 'disabled');
});

दुर्भाग्य से, यह फॉर्म नहीं भेजता है। मैं इसे कैसे ठीक करूं?

संपादित करें मैं सबमिट को बाध्य करना चाहता हूं, फॉर्म नहीं :)




एक और आसान तरीका। मैंने यह कोशिश की है और यह मेरे लिए ठीक काम करता है:

$(':input[type=submit]').prop('disabled', true);



इसे अपने ऐप में इसका ख्याल रखना चाहिए।

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});



निम्नलिखित मेरे लिए काम किया:

var form_enabled = true;
$().ready(function(){
       // allow the user to submit the form only once each time the page loads
       $('#form_id').on('submit', function(){
               if (form_enabled) {
                       form_enabled = false;
                       return true;
               }

               return false;
        });
});

यह सबमिट ईवेंट को रद्द कर देता है यदि उपयोगकर्ता फ़ॉर्म को कई बार सबमिट करने का प्रयास करता है (सबमिट बटन पर क्लिक करके, एंटर दबाकर इत्यादि)




इसे onSubmit() :

$('form#id').submit(function(){
    $(this).find(':input[type=submit]').prop('disabled', true);
});

क्या हो रहा है कि यह वास्तव में सबमिट ईवेंट को ट्रिगर करने से पहले बटन को पूरी तरह से अक्षम कर रहा है।

आपको शायद अपने तत्वों को आईडी या क्लास के नामकरण के बारे में भी सोचना चाहिए, इसलिए आप पृष्ठ पर सबमिट प्रकार के सभी इनपुट का चयन नहीं करते हैं।

प्रदर्शन: http://jsfiddle.net/userdude/2hgnZ/

(ध्यान दें, मैं preventDefault() उपयोग करता हूं और return false करता हूं, इसलिए फॉर्म वास्तव में उदाहरण में सबमिट नहीं करता है; इसे अपने उपयोग में छोड़ दें।)




विशेष रूप से अगर किसी को क्रोम में समस्या का सामना करना पड़ रहा है

इसे ठीक करने के लिए आपको क्या करने की आवश्यकता है सबमिट बटन को अक्षम करने के लिए तत्व में ऑनबमिट टैग का उपयोग करना है। यह क्रोम को दबाए जाने के तुरंत बाद बटन को अक्षम करने की अनुमति देगा और फ़ॉर्म सबमिशन अभी भी आगे बढ़ेगा ....

जैसे

<form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById('submit').disabled=true;"> 
     <input type="submit" name="submit" value="Submit" id="submit"> 
</form>



सबमिट बटन को अक्षम कैसे करें

बस ऑनक्लिक ईवेंट पर एक फ़ंक्शन कॉल करें और ... सबमिट करने के लिए सही लौटें और सबमिट को अक्षम करने के लिए झूठी। या window.onload पर फ़ंक्शन को कॉल करें:

window.onload = init();

और init () में ऐसा कुछ करें:

var theForm = document.getElementById(‘theForm’);
theForm.onsubmit =  // what ever you want to do 



अक्षम नियंत्रण उनके मान सबमिट नहीं करते हैं जो यह जानने में सहायता नहीं करते हैं कि उपयोगकर्ता ने सहेजा या हटाया है या नहीं।

इसलिए मैं बटन वैल्यू को छिपा हुआ स्टोर करता हूं जो जमा हो जाता है। छिपे हुए नाम का नाम बटन नाम जैसा ही है। मैं अपने सभी बटन बटन के नाम से कॉल करता हूं।

जैसे <button type="submit" name="button" value="save">Save</button>

इसके आधार पर मैंने here पाया। बस एक चर में क्लिक बटन को स्टोर करें।

$(document).ready(function(){
    var submitButton$;

    $(document).on('click', ":submit", function (e)
    {
        // you may choose to remove disabled from all buttons first here.
        submitButton$ = $(this);
    });

    $(document).on('submit', "form", function(e)
    {
        var form$ = $(this);
        var hiddenButton$ = $('#button', form$);
        if (IsNull(hiddenButton$))
        {
            // add the hidden to the form as needed
            hiddenButton$ = $('<input>')
                .attr({ type: 'hidden', id: 'button', name: 'button' })
                .appendTo(form$);
        }
        hiddenButton$.attr('value', submitButton$.attr('value'));
        submitButton$.attr("disabled", "disabled");
    }
});

मेरा IsNull फ़ंक्शन यहाँ है। IsNull या अपरिभाषित आदि के लिए अपने संस्करण का उपयोग या प्रतिस्थापित करें

function IsNull(obj)
{
    var is;
    if (obj instanceof jQuery)
        is = obj.length <= 0;
    else
        is = obj === null || typeof obj === 'undefined' || obj == "";

    return is;
}



आपका कोड वास्तव में एफएफ पर काम करता है, यह क्रोम पर काम नहीं करता है।

यह एफएफ और क्रोम पर काम करता है।

$(document).ready(function() {
        // Solution for disabling the submit temporarily for all the submit buttons.
        // Avoids double form submit.
        // Doing it directly on the submit click made the form not to submit in Chrome.
        // This works in FF and Chrome.
        $('form').on('submit', function(e){
          //console.log('submit2', e, $(this).find('[clicked=true]'));
          var submit = $(this).find('[clicked=true]')[0];
          if (!submit.hasAttribute('disabled'))
          {
            submit.setAttribute('disabled', true);
            setTimeout(function(){
              submit.removeAttribute('disabled');
            }, 1000);
          }
          submit.removeAttribute('clicked');
          e.preventDefault();
        });
        $('[type=submit]').on('click touchstart', function(){
          this.setAttribute('clicked', true);
        });
      });
    </script>



फ़ॉर्म सबमिशन के साथ @ आईसीडवाटर के मुद्दे को संबोधित करने वाले एक पूरी तरह से सादे जावास्क्रिप्ट समाधान को जोड़ने के लिए, यहां form साथ एक पूर्ण समाधान form

नोट: यह IE9 + सहित "आधुनिक ब्राउज़र" के लिए है। आईई 8 संस्करण अधिक जटिल नहीं है, और यहां सीखा जा सकता है ।

पहेली: https://jsfiddle.net/rufwork/gm6h25th/1/

एचटीएमएल

<body>
    <form>
        <input type="text" id="txt" />
        <input type="button" id="go" value="Click Me!" />
        <div id="outige"></div>
    </form>
</body>

जावास्क्रिप्ट

// The document.addEventListener replicates $(document).ready() for
// modern browsers (including IE9+), and is slightly more robust than `onload`.
// More here: https://.com/a/21814964/1028230
document.addEventListener("DOMContentLoaded", function() {
    var go = document.getElementById("go"),
        txt = document.getElementById("txt"),
        outige = document.getElementById("outige");

    // Note that jQuery handles "empty" selections "for free".
    // Since we're plain JavaScripting it, we need to make sure this DOM exists first.
    if (txt && go)    {
        txt.addEventListener("keypress", function (e) {
            if (event.keyCode === 13)   {
                go.click();
                e.preventDefault(); // <<< Most important missing piece from icedwater
            }
        });

        go.addEventListener("click", function () {
            if (outige) {
                outige.innerHTML += "Clicked!<br />";
            }
        });
    }
});




javascript jquery