मैं एक HTML बटन कैसे बनाऊं पेज को फिर से लोड न करें

Question

मेरे पास एक बटन ( <input type="submit">) है। जब इसे क्लिक किया जाता है तो पृष्ठ पुनः लोड हो जाता है। चूँकि मेरे पास कुछ jQuery hide()फ़ंक्शंस हैं जिन्हें पेज लोड पर कहा जाता है, इस कारण ये तत्व फिर से छिपे हुए हैं। मैं बटन कैसे बनाते हैं, कुछ नहीं करता, इसलिए मैं तब भी कुछ क्रिया जोड़ सकता हूं जो तब होती है जब बटन पर क्लिक किया जाता है, लेकिन पृष्ठ को पुनः लोड नहीं किया जाता है।

Answer 1

js या jquery की कोई आवश्यकता नहीं है। पृष्ठ को फिर से लोड करने से रोकने के लिए बटन प्रकार को 'बटन' के रूप में निर्दिष्ट करें। यदि आप बटन प्रकार निर्दिष्ट नहीं करते हैं, तो ब्राउज़र इसे पृष्ठ पुनः लोड करने के लिए डायन कारण 'रीसेट' या 'सबमिट' कर देगा।

 <button type='button'>submit</button> 

Comments

यह काम करता है! यह एक अच्छा विकल्प है <input type='button' />।

— रिक

यह अच्छी तरह से काम करता है, और विशेष रूप से क्रोम के मामले में (जिसके लिए स्वीकृत उत्तर नहीं देता है)

— hobailey

विंडोज 10. क्रोम पर क्रोम पर काम करना!

— ssdscott

Answer 2

या तो <button>तत्व का उपयोग करें या एक का उपयोग करें <input type="button"/>।

Comments

डिफ़ॉल्ट रूप से <बटन> तत्व क्रोम में पुनः लोड का कारण बनता है (कम से कम)।

— आदम

अगर आप अभी भी वापसी नहीं करना चाहते हैं तो आप फॉर्म ऑनसुबमिट घटना का उपयोग कर सकते हैं और गलत लौटा सकते हैं

— neu-rah

@ जो वास्तव में यह दुर्भाग्यपूर्ण है जो यह करता है: / मुझे IE8 के लिए काम करने के लिए अपने वेबएप की आवश्यकता है और यह पुनः लोड थोड़े कष्टप्रद है ...

— सुश्री कोई नहीं

@pbeardshear यह करता है अगर यह एक फ़ॉर्म के भीतर रखा गया है। जब <button>एक फॉर्म के बाहर रखा जाता है तो रिफ्रेश नहीं होता है!

— केविनविंगस्ट

क्रोम में तत्व type="button"को जोड़ें <button>और यह ताज़ा नहीं करता है

— जॉनी मेट्ज़

Answer 3

HTML में:

<form onsubmit="return false">
</form>

सभी "बटन" पर ताज़ा से बचने के लिए, यहां तक ​​कि ओनक्लिक के साथ असाइन किया गया।

Answer 4

आप jQuery के साथ बटन पर एक क्लिक हैंडलर जोड़ सकते हैं और झूठी वापसी कर सकते हैं।

$("input[type='submit']").click(function() { return false; });

या

$("form").submit(function() { return false; });

Comments

यह काम नहीं करता है। कम से कम नवीनतम संस्करणों में क्रोम में वापस आना, फिर भी ताज़ा होने का कारण बनता है।

— 1936 में user3690202

यह एकमात्र उत्तर है जो वास्तव में मेरे लिए काम करता है। मुझे अपने फंक्शन में सिर्फ असत्य रिटर्न करना पड़ा और रिफ्रेशमेंट सफारी और क्रोम दोनों में रुका।

— वेसोविट

Answer 5

HTML में:

<input type="submit" onclick="return false">

JQuery के साथ, कुछ इसी तरह के संस्करण, पहले से ही उल्लेख किया गया है।

Answer 6

आप एक फ़ॉर्म का उपयोग कर सकते हैं जिसमें एक सबमिट बटन शामिल है। फिर फॉर्म के डिफ़ॉल्ट व्यवहार को रोकने के लिए jQuery का उपयोग करें:

$(document).ready(function($) {
  $(document).on('submit', '#submit-form', function(event) {
    event.preventDefault();
  
    alert('page did not reload');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id='submit-form'>
  <button type='submit'>submit</button>
</form>

Answer 7

जैसा कि ऊपर दिए गए टिप्पणियों (दफन) में से एक में कहा गया है, यह फॉर्म टैग के अंदर बटन टैग नहीं रखकर तय किया जा सकता है। जब बटन फ़ॉर्म के बाहर होता है, तो पृष्ठ स्वयं ताज़ा नहीं होता है।

Answer 8

मैं अभी तक टिप्पणी नहीं कर सकता, इसलिए मैं इसे उत्तर के रूप में पोस्ट कर रहा हूं। पुनः लोड से बचने का सबसे अच्छा तरीका है कि @ user2868288 ने कहा: टैग onsubmitपर उपयोग करना form।

यहां बताई गई अन्य सभी संभावनाओं से, यह एकमात्र तरीका है जो नए HTML5 ब्राउज़र डेटा इनपुट सत्यापन को ट्रिगर करने की अनुमति देता है ( <button>यह नहीं करेगा और न ही jQuery / JS हैंडलर) और आपके jQuery / AJAX की गतिशील जानकारी को संलग्न करने की अनुमति देता है। पृष्ठ। उदाहरण के लिए:

<form id="frmData" onsubmit="return false">
 <input type="email" id="txtEmail" name="input_email" required="" placeholder="Enter a valid e-mail" spellcheck="false"/>
 <input type="tel" id="txtTel" name="input_tel" required="" placeholder="Enter your telephone number" spellcheck="false"/>
 <input type="submit" id="btnSubmit" value="Send Info"/>
</form>
<script type="text/javascript">
  $(document).ready(function(){
    $('#btnSubmit').click(function() {
        var tel = $("#txtTel").val();
        var email = $("#txtEmail").val();
        $.post("scripts/contact.php", {
            tel1: tel,
            email1: email
        })
        .done(function(data) {
            $('#lblEstatus').append(data); // Appends status
            if (data == "Received") {
                $("#btnSubmit").attr('disabled', 'disabled'); // Disable doubleclickers.
            }
        })
        .fail(function(xhr, textStatus, errorThrown) { 
            $('#lblEstatus').append("Error. Try later."); 
        });
     });
   }); 
</script>