फ़ॉर्म सबमिट किया गया है जब मैं फॉर्म में बटन पर क्लिक करता हूं। इससे कैसे बचें?

Question

मैं ट्विटर-बूस्टर का उपयोग करता हूं और मैं अपने फॉर्म में these radio-buttons का उपयोग करना चाहता हूं। समस्या यह है कि जब मैं इनमें से किसी भी बटन पर क्लिक करता हूं, तो फॉर्म तुरंत सबमिट किया जाता है। इससे कैसे बचें? मैं सिर्फ रेडियो बटन जैसे डिफ़ॉल्ट बटन का उपयोग करना चाहता हूं।

से:

<%= form_for @product do |f| %> 
    <div class="control-group"> 
     <%= f.label :type, :class => 'control-label' %> 

     <div class="controls"> 
     <div class="btn-group" data-toggle="buttons-radio"> 
      <button class="btn">Button_1</button> 
      <button class="btn">Button_2</button> 
     </div> 
     </div> 

    </div> 

    <div class="form-actions"> 
     <%= f.submit nil, :class => 'btn btn-primary' %> 
     <%= link_to 'Cancel', products_path, :class => 'btn' %> 
    </div> 
<% end %> 

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

// application.js 
$('.tabs').button(); 

Answer 1

ठीक HTML5 specification से:

कोई प्रकार विशेषता वाला बटन तत्व के रूप में एक ही बात का प्रतिनिधित्व करता है एक बटन elem "सबमिट" पर इसके प्रकार की विशेषता के साथ ent।

और <button type="submit"> एक सरल <button type="button"> push-button की तरह व्यवहार करने के बजाय फ़ॉर्म सबमिट करता है।

HTML4 spec कहते हैं एक ही बात:

प्रकार = प्रस्तुत | बटन | रीसेट [सीआई]
यह विशेषता बटन के प्रकार की घोषणा की। संभावित मूल्य:

• submit: सबमिट बटन बनाता है। यह व्यतिक्रम मूल्य है।
• reset: रीसेट बटन बनाता है।
• button: पुश बटन बनाता है।

तो अपने <button> तत्वों:

<button class="btn">Button_1</button> 
<button class="btn">Button_2</button> 

(अनुरूप ब्राउज़र में) इन के रूप में ही कर रहे हैं:

<button type="submit" class="btn">Button_1</button> 
<button type="submit" class="btn">Button_2</button> 

और किसी भी समय आप उन बटन आप हूँ में से एक मारा अपना फॉर्म जमा करें। क्या मानक कहते हैं के बावजूद

<button type="button" class="btn">Button_1</button> 
<button type="button" class="btn">Button_2</button> 

type="button" को IE डिफ़ॉल्ट के कुछ संस्करणों:

समाधान सादा बटन का उपयोग करने के लिए है। <button> का उपयोग करते समय आपको हमेशा यह सुनिश्चित करने के लिए कि आप जिस व्यवहार की अपेक्षा कर रहे हैं उसे प्राप्त करने के लिए आपको type विशेषता निर्दिष्ट करनी चाहिए।

Answer 2

आप इस

$('.btn').onClick(function(e){ 
    e.preventDefault(); 
}); 

के लिए preventDefault() उपयोग कर सकते हैं या आप कोड का पालन करते हुए अपने html अद्यतन कर सकते हैं बटन टैग में (सिर्फ type="button" जोड़ने)

<%= form_for @product do |f| %> 
    <div class="control-group"> 
     <%= f.label :type, :class => 'control-label' %> 

     <div class="controls"> 
     <div class="btn-group" data-toggle="buttons-radio"> 
      <button class="btn" type="button">Button_1</button> 
      <button class="btn" type="button">Button_2</button> 
     </div> 
     </div> 

    </div> 

    <div class="form-actions"> 
     <%= f.submit nil, :class => 'btn btn-primary' %> 
     <%= link_to 'Cancel', products_path, :class => 'btn' %> 
    </div> 
<% end %>