আমি কি একটি ফর্ম জমা না দিয়ে <বাটন> তৈরি করতে পারি?


515

আমি 2 টি বোতাম সহ একটি ফর্ম পেয়েছি

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

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

আমি এগুলিতেও jQuery UI এর বোতামটি ব্যবহার করি, সহজভাবে

$('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){});
ধরুন

উত্তর:


1129

উপাদানগুলির typeবৈশিষ্ট্যেরbutton জন্য ডিফল্ট মান হ'ল "জমা"। type="button"ফর্মটি জমা দেয় না এমন বোতাম উত্পাদন করতে সেট করুন ।

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

এর কথায় এইচটিএমএল স্ট্যান্ডার্ড : "কিছুই হবে না।"


14
ডাব্লু 3 স্কুল অনুসারে, এটি আই-ক্ষেত্রে সত্য নয়
R0MANARMY

53
এটি কেবল একটি চকচকে খারাপ ডিজাইনের পছন্দ।
octern

প্রত্যেকে: অনুগ্রহ করে html.spec.whatwg.org/m মাল্টিপেজ
জোশ লি

বাহ, আপনি এবং অ্যালেক্স সত্যিই এটি পুনর্বিবেচনায় ডেকে নিচ্ছেন। আমি দেখছি না কেন আপনারা উভয়ই উক্তি সম্পর্কে যত্নবান হন বা কোনও গুণকে না কেন।
এডিজেঙ্কস

228

buttonউপাদান একটি ডিফল্ট প্রকার হয়েছে submit

আপনি এটিকে কোনও ধরণের সেট করে কিছুই করতে পারবেন না button:

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

1
@ বি ক্লেশানন আসলেই না। বোতামটি ক্লিক করা হলে একই পৃষ্ঠাটি ফেরত দিতে আপনি সার্ভার-সাইড কোড ব্যবহার করতে পারেন তবে এটি পৃষ্ঠাটি পুনরায় লোড করবে। শেষ পর্যন্ত বোতামটি নথির অংশ এবং তাই ব্রাউজারটি কীভাবে আপনি এটি ব্যবহার করতে চান তা জানানোর একমাত্র উপায় হ'ল এইচটিএমএল এবং জাভাস্ক্রিপ্ট।
s4y

17

শুধু ভাল পুরানো এইচটিএমএল ব্যবহার করুন:

<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
যথাযথ ধরণের বৈশিষ্ট্যের সাথে একটি মানক বোতাম নিয়ন্ত্রণ ব্যবহার করা হল "ভাল পুরাতন এইচটিএমএল", এবং অনেক সহজ মার্কআপ তৈরি করে।
R0MANARMY

এটি স্পষ্টভাবে সহজ নয় যদি কিছু ব্রাউজারে এটির একটি ডিফল্ট ধরণের জমা থাকে এবং অন্যগুলিতে এটির ডিফল্ট বোতাম থাকে। হেক, এমনকি কেবলমাত্র ডিফল্ট ধরণের জমা দেওয়ার কারণে আইএমওর চেয়ে বেশি কিছু জটিল করে তোলে। এমন মার্কআপ থাকা উচিত যা সহজেই এমন বোতাম সরবরাহ করে যা কিছুই করে না। এবং রয়েছে:<input type="button" />
জেফ্রি ব্লেক

+1 আমি অনেক সময় এই সঠিক কৌশলটি ব্যবহার করেছি এবং এটি আমার পক্ষে সর্বদা ভাল কাজ করেছে। একটি বৈকল্পিক হ'ল যদি আপনাকে কিছু ক্লায়েন্ট-সাইড গণনার উপর ভিত্তি করে কোনও সার্ভার-সাইড বোতামের জন্য পোস্টব্যাক ইভেন্টটি বাতিল করতে হয়, আপনি উইন্ডো.ভেনভেট্রেটভ্যালু = মিথ্যা অন্তর্ভুক্ত করতে পারেন; আপনার কোডে যা আপনার বোতামটির জন্য ক্লায়েন্ট-সাইড অন্লিক ইভেন্টে কার্যকর করে ... এটি যদি কোনও কাস্টম ভ্যালিডেটর নিয়ন্ত্রণ ব্যবহার করে আপনার জন্য সরিষা না কাটায় :)
অ্যাডাম ম্যাকি

1
@ জেজিবি ১৪6: কেবলমাত্র সমস্ত ব্রাউজার একই মানকে ডিফল্ট না করার অর্থ এই নয় যে তারা ম্যানুয়ালি সেট করা থাকলে সঠিক ধরণের সম্মান করবে না (যেমন জেলিদেভের পরামর্শ অনুযায়ী। বিশেষত প্রশ্নগুলি উল্লেখ না করে এটি করার উপায় জিজ্ঞাসা করা নয়) আপনার উত্তরটি বিবেচনায় না নেওয়ার সময় জাভাস্ক্রিপ্ট
R0MANARMY

11
@ জেজিবি 146: Buttonএইচটিএমএলের একটি ধারক। এটি আপনাকে চিত্র বা টেবিলের মতো জিনিসগুলি রাখার অনুমতি দেয় (আপনি কেন এটি করতে চান তা নিশ্চিত নয় তবে আপনি এটি করতে পারেন) ইত্যাদি যখন inputসমর্থন করে না। দুজনের মধ্যে পার্থক্য রয়েছে এবং প্রত্যেকেরই যথাযথ ব্যবহারের ক্ষেত্রে রয়েছে।
R0MANARMY


5

সত্য, আমি অন্যান্য উত্তর পছন্দ। জেএসে intoোকার জন্য সহজ এবং দরকার নেই। তবে আমি লক্ষ্য করেছি যে আপনি jQuery সম্পর্কে জিজ্ঞাসা করেছিলেন। সুতরাং সম্পূর্ণতার স্বার্থে, jQuery এ আপনি। ক্লিক () হ্যান্ডলারের সাথে মিথ্যা ফিরিয়ে আনলে, এটি উইজেটের ডিফল্ট ক্রিয়াটিকে অস্বীকার করবে।

একটি উদাহরণের জন্য এখানে দেখুন (এবং আরও গুডিও)। এখানেও ডকুমেন্টেশন রয়েছে

সংক্ষেপে, আপনার নমুনা কোড সহ, এটি করুন:

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

        ?>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.