क्या मैं एक फ़ॉर्म सबमिट नहीं कर सकता हूं?


515

मुझे एक फॉर्म मिला है, जिसमें 2 बटन हैं

<a href="index.html"><button>Cancel changes</button></a>

<button type="submit">Submit</button>

मैं उन पर भी jQuery यूआई के बटन का उपयोग करता हूं, बस इस तरह

$('button').button();

हालाँकि, पहला बटन भी प्रपत्र सबमिट करता है। मुझे लगता है कि अगर यह नहीं type="submit"होता, तो यह नहीं होता।

जाहिर है मैं ऐसा कर सकता था

$('button[type!=submit]').click(function(event) { event.stopPropagation(); });

लेकिन क्या कोई ऐसा तरीका है जो मैं उस बैक बटन को जावास्क्रिप्ट हस्तक्षेप के बिना फॉर्म सबमिट करने से रोक सकता हूं?

सच कहूं, तो मैंने एक बटन का इस्तेमाल किया था, इसलिए मैं इसे jQuery UI के साथ स्टाइल कर सकता था। मैंने button()लिंक पर कॉल करने की कोशिश की और यह उम्मीद के मुताबिक काम नहीं किया (काफी बदसूरत लग रहा था!)।



2
<button type="button">एक के लिए उपयोग करें जो फॉर्म जमा नहीं करता है और <input type="submit">दूसरे के लिए। फिर इसे jquery के साथ पकड़ लें$('#formID').submit(function(e){});
Airwavezx

जवाबों:


1129

के लिए डिफ़ॉल्ट मान typeकी विशेषता buttonतत्वों है "सबमिट करें"। type="button"एक बटन बनाने के लिए इसे सेट करें जो फॉर्म सबमिट नहीं करता है।

<button type="button">Submit</button>

HTML मानक के शब्दों में : "कुछ नहीं करता है।"


14
W3schools के अनुसार, IE के लिए यह सच नहीं है
R0MANARMY

53
यह एक चौंकाने वाला बुरा डिजाइन विकल्प है।
अष्टकवर्ग


वाह, आप और एलेक्स वास्तव में इसे संशोधन में डॉकिंग कर रहे थे। मैं यह नहीं देखता कि आप में से किसी को उद्धरण की परवाह है या एक विशेषता पर नहीं।
ADJenks

228

buttonतत्व की एक डिफ़ॉल्ट प्रकार है submit

आप इसे एक प्रकार का सेट करके कुछ भी नहीं कर सकते हैं button:

<button type="button">Cancel changes</button>

1
@ B.ClayShannon वास्तव में नहीं। जब बटन क्लिक किया जाता है तो आप उसी पृष्ठ को वापस करने के लिए सर्वर-साइड कोड का उपयोग कर सकते हैं, लेकिन यह अभी भी पृष्ठ को फिर से लोड करेगा। अंततः बटन दस्तावेज़ का हिस्सा है और इसलिए ब्राउज़र को यह बताने का एकमात्र तरीका है कि आप इसे कैसे कार्य करना चाहते हैं, HTML और जावास्क्रिप्ट हैं।
s4y

17

बस अच्छे पुराने HTML का उपयोग करें:

<input type="button" value="Submit" />

यदि आप चाहें, तो इसे लिंक के विषय के रूप में लपेटें:

<a href="http://somewhere.com"><input type="button" value="Submit" /></a>

या यदि आप तय करते हैं कि आप जावास्क्रिप्ट को कुछ अन्य कार्यक्षमता प्रदान करना चाहते हैं:

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>

7
उचित प्रकार की विशेषता के साथ एक मानक बटन नियंत्रण का उपयोग करना "अच्छा पुराना html" है, और बहुत सरल मार्कअप बनाता है।
R0MANARMY

यह स्पष्ट रूप से सरल नहीं है अगर कुछ ब्राउज़रों में यह डिफ़ॉल्ट प्रकार का सबमिट है और अन्य में इसका डिफ़ॉल्ट प्रकार का बटन है। हेक, यहां तक ​​कि बस डिफ़ॉल्ट प्रकार के जमा होने की आवश्यकता आईएमओ से अधिक चीजों को जटिल करती है। मार्कअप होना चाहिए जो आसानी से एक बटन प्रदान करता है जो कुछ भी नहीं करता है। और वहाँ है:<input type="button" />
जेफरी ब्लेक

+1 मैंने इस सटीक तकनीक का बहुत बार उपयोग किया है, और इसने हमेशा मेरे लिए अच्छा काम किया है। एक वैरिएंट है यदि आपको कुछ क्लाइंट-साइड गणना के आधार पर सर्वर-साइड बटन के लिए पोस्टबैक इवेंट को रद्द करने की आवश्यकता है, तो आप window.event.returnValue = false शामिल कर सकते हैं; आपके कोड में जो आपके बटन के लिए क्लाइंट-साइड ऑनक्लिक ईवेंट में निष्पादित होता है ... अर्थात, यदि कस्टम वैलिडेटर नियंत्रण का उपयोग करने से आपके लिए सरसों में कटौती नहीं होती है :)
एडम मैककी

1
@ JGB146: सिर्फ इसलिए कि एक ही मूल्य के लिए नहीं सभी ब्राउज़रों डिफ़ॉल्ट मतलब यह नहीं है कि वे सही प्रकार अगर यह मैन्युअल रूप से सेट है (जैसा कि jleedev ने यह बताया है का अनुपालन नहीं करेंगे नहीं सवालों का उल्लेख विशेष रूप से यह करने के लिए एक तरह से लिए पूछता है। बिना जावास्क्रिप्ट जबकि आपका जवाब यह ध्यान में नहीं रखता है।
R0MANARMY

11
@ JGB146: ButtonHTML में एक कंटेनर है। यह आपको छवियों या तालिकाओं जैसी चीजों को रखने की अनुमति देता है (यह सुनिश्चित नहीं है कि आप ऐसा क्यों करेंगे, लेकिन आप inputइसका समर्थन नहीं कर सकते) आदि । दोनों के बीच एक अंतर है, और प्रत्येक में उनका उपयुक्त उपयोग मामला है।
R0MANARMY


5

ईमानदारी से, मुझे अन्य उत्तर पसंद हैं। आसान और जेएस में आने की जरूरत नहीं। लेकिन मैंने देखा कि आप jQuery के बारे में पूछ रहे थे। तो पूर्णता के लिए, jQuery में यदि आप .click () हैंडलर के साथ गलत लौटाते हैं, तो यह विजेट की डिफ़ॉल्ट कार्रवाई को नकार देगा।

एक उदाहरण के लिए यहां देखें (और अधिक उपहार भी)। यहाँ प्रलेखन भी है

संक्षेप में, अपने नमूना कोड के साथ, यह करें:

<script type="text/javascript">
    $('button[type!=submit]').click(function(){
        // code to cancel changes
        return false;
    });
</script>

<a href="index.html"><button>Cancel changes</button></a>
<button type="submit">Submit</button>

अतिरिक्त लाभ के रूप में, इसके साथ, आप एंकर टैग से छुटकारा पा सकते हैं और बस बटन का उपयोग कर सकते हैं।


उत्सुकता से पर्याप्त, जोड़ने e.preventDefault()से सबमिशन को रोकने के लिए कुछ भी नहीं होता है (जहां यह शुरू होता है function(e))।
सेबलफोस्टे

1

typeविशेषता स्थापित किए बिना , आप falseअपने OnClickहैंडलर से भी लौट सकते हैं , और onclickविशेषता को घोषित कर सकते हैं onclick="return onBtnClick(event)"


0

हां, आप एक बटन बना सकते हैं, जिसमें एक प्रकार का मान बटन जोड़कर कोई फॉर्म सबमिट नहीं किया जाता है: <button type="button"><button>


-2
  <form class="form-horizontal" method="post">
        <div class="control-group">

            <input type="text" name="subject_code" id="inputEmail" placeholder="Subject Code">
        </div>
        <div class="control-group">
            <input type="text" class="span8" name="title" id="inputPassword" placeholder="Subject Title" required>
        </div>
        <div class="control-group">
            <input type="text" class="span1" name="unit" id="inputPassword" required>
        </div>
            <div class="control-group">
            <label class="control-label" for="inputPassword">Semester</label>
            <div class="controls">
                <select name="semester">
                    <option></option>
                    <option>1st</option>
                    <option>2nd</option>
                </select>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="inputPassword">Deskripsi</label>
            <div class="controls">
                    <textarea name="description" id="ckeditor_full"></textarea>
 <script>CKEDITOR.replace('ckeditor_full');</script>
            </div>
        </div>



        <div class="control-group">
        <div class="controls">

        <button name="save" type="submit" class="btn btn-info"><i class="icon-save"></i> Simpan</button>
        </div>
        </div>
        </form>

        <?php
        if (isset($_POST['save'])){
        $subject_code = $_POST['subject_code'];
        $title = $_POST['title'];
        $unit = $_POST['unit'];
        $description = $_POST['description'];
        $semester = $_POST['semester'];


        $query = mysql_query("select * from subject where subject_code = '$subject_code' ")or die(mysql_error());
        $count = mysql_num_rows($query);

        if ($count > 0){ ?>
        <script>
        alert('Data Sudah Ada');
        </script>
        <?php
        }else{
        mysql_query("insert into subject (subject_code,subject_title,description,unit,semester) values('$subject_code','$title','$description','$unit','$semester')")or die(mysql_error());


        mysql_query("insert into activity_log (date,username,action) values(NOW(),'$user_username','Add Subject $subject_code')")or die(mysql_error());


        ?>
        <script>
        window.location = "subjects.php";
        </script>
        <?php
        }
        }

        ?>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.