কীভাবে "হ্যাঁ" এবং "না" বিকল্পের সাথে একটি সংলাপ তৈরি করবেন?


658

আমি একটি ক্রিয়া করতে এবং একটি ডাটাবেসে ডেটা সংরক্ষণ করতে একটি বোতাম তৈরি করতে যাচ্ছি।

ব্যবহারকারী একবার বোতামে ক্লিক করলে, আমি "হ্যাঁ" এবং "বাতিল" বিকল্পগুলির জন্য একটি জাভাস্ক্রিপ্ট সতর্কতা চাই। যদি ব্যবহারকারী "হ্যাঁ" নির্বাচন করেন, ডেটাবেসে ডেটা .োকানো হবে, অন্যথায় কোনও পদক্ষেপ নেওয়া হবে না।

আমি কীভাবে এই জাতীয় সংলাপ প্রদর্শন করব?


2
@ সেন্সিস প্রীতি খুব মৃত সহজ এবং সুন্দর স্টাইল হ্যাঁ / না। আমি এক্সএলএল সংলাপগুলিকেও ঘৃণা করি কারণ অনেক কিছুই হিমশীতল। তোমাকে অনেক ধন্যবাদ.
m3nda

উত্তর:


1246

আপনি সম্ভবত সন্ধান করছেন confirm(), যা একটি প্রম্পট প্রদর্শন করে এবং ফেরত দেয় trueবা falseব্যবহারকারী কী সিদ্ধান্ত নিয়েছে:

if (confirm('Are you sure you want to save this thing into the database?')) {
  // Save it!
  console.log('Thing was saved to the database.');
} else {
  // Do nothing!
  console.log('Thing was not saved to the database.');
}


125
কনফার্মের ওকে এবং ক্যানসেল বোতাম রয়েছে। এই বোতামগুলি হ্যাঁ / কোনওতে সেট করা যেতে পারে?
ওপেন

16
@Owen নং দ্য বৈশিষ্ট যে আপনি শুধু একটি বার্তা প্রদান পেতে বলছেন। আপনি এইচটিএমএলে একটি ডায়ালগ অনুকরণ করতে পারেন (যদিও এটি বিল্ট-ইনগুলির মতো ব্লক করবে না)। jQuery ডায়ালগ এই ধরণের জিনিস বাস্তবায়নের একটি ভাল উদাহরণ।
s4y

3
দ্রষ্টব্য: আপনি অন্যটির returnঅভ্যন্তরে একটি অন্তর্ভুক্ত রাখতে পারেন এবং তারপরে আপনাকে অবশ্যই আপনার সমস্ত কোড মোড়ানোর প্রয়োজন হবে না! (কেস ফিক্স দ্বারা কেস)
জ্যাকব র্যাকুইয়া

21
@ জ্যাকোব্যাকাকুইয়া বা সহজভাবেif(!confirm('message')) return;
অ্যারন

1
@ ডিম্পল বর্তমানে এটি কাস্টমাইজ করার কোনও উপায় নেই। এজন্য কিছু ওয়েবসাইট নেটিভ পরিবর্তে কাস্টম, ইন-পৃষ্ঠা ডায়ালগ ব্যবহার করে।
s4y

90
var answer = window.confirm("Save data?")
if (answer) {
    //some code
}
else {
    //some code
}

window.confirmসতর্কতার পরিবর্তে ব্যবহার করুন । এটি সেই কার্যকারিতা অর্জনের সবচেয়ে সহজ উপায়।


15
if(confirm("...")){পরিবর্তে আপনি যেতে পারেন
নিকোলাস বুলিয়ানিয়ান

75

'ইনলাইন' জাভাস্ক্রিপ্ট ব্যবহার করে এটি কীভাবে করবেন:

<form action="http://www.google.com/search">
  <input type="text" name="q" />
  <input type="submit" value="Go"
    onclick="return confirm('Are you sure you want to search Google?')"
  />
</form>

5
ফর্মটির অনসমিত ইভেন্টটি পরিচালনা করা ভাল: আপনার কোড সহ, যদি ব্যবহারকারীরা টিপে টেক্সটে প্রবেশ করে তবে কোনও অনুরোধ ছাড়াই ফর্মটি জমা দেওয়া হবে!
পি91পল

1
@ p91paul - এটি আপনার জন্য কোন ব্রাউজারটি ব্যর্থ হয়? আমি উইন্ডোজ আইই, ক্রোম এবং সাফারি এন্টার টিপতে চেষ্টা করেছি এবং এটি প্রত্যাশার মতো কাজ করেছে। jsfiddle.net/ALjge/1
ডানা

ভাল, আমি কী বলছিলাম তা সম্পর্কে আমি নিশ্চিত ছিলাম, তবে আমি পরীক্ষা করিনি এবং আমি ভুল ছিল। দুঃখিত!
পি 91 পল

1
কোনও সমস্যা নয় :) সাধারণত বিড়ালের চামড়ার একাধিক উপায় রয়েছে। আমি কেবল আমার পদ্ধতির কাজ করছে তা নিশ্চিত করতে চেয়েছিলাম। <form onsubmit="...">আপনার প্রস্তাবিত হিসাবে কাজগুলিও ব্যবহার করুন :)
ডানা

41

ইনলাইন জাভাস্ক্রিপ্ট এড়ান - আচরণ পরিবর্তন মানে কোডের প্রতিটি উদাহরণ সম্পাদনা করা এবং এটি সুন্দর নয়!

অনেক পরিষ্কার উপায় হ'ল উপাদানটিতে ডেটা অ্যাট্রিবিউট ব্যবহার করা, যেমন data-confirm="Your message here"। নীচের আমার কোডটি গতিশীলভাবে উত্পন্ন উপাদানগুলি সহ নিম্নলিখিত ক্রিয়াগুলি সমর্থন করে:

  • aএবং buttonক্লিকগুলি
  • form জমা
  • option নির্বাচন

JQuery:

$(document).on('click', ':not(form)[data-confirm]', function(e){
    if(!confirm($(this).data('confirm'))){
        e.stopImmediatePropagation();
        e.preventDefault();
    }
});

$(document).on('submit', 'form[data-confirm]', function(e){
    if(!confirm($(this).data('confirm'))){
        e.stopImmediatePropagation();
        e.preventDefault();
    }
});

$(document).on('input', 'select', function(e){
    var msg = $(this).children('option:selected').data('confirm');
    if(msg != undefined && !confirm(msg)){
        $(this)[0].selectedIndex = 0;
    }
});

এইচটিএমএল:

<!-- hyperlink example -->
<a href="http://www.example.com" data-confirm="Are you sure you want to load this URL?">Anchor</a>

<!-- button example -->
<button type="button" data-confirm="Are you sure you want to click the button?">Button</button>

<!-- form example -->
<form action="http://www.example.com" data-confirm="Are you sure you want to submit the form?">
    <button type="submit">Submit</button>
</form>

<!-- select option example -->
<select>
    <option>Select an option:</option>
    <option data-confirm="Are you want to select this option?">Here</option>
</select>

জেএসফিডাল ডেমো


2
খুব পরিষ্কার সমাধান আমি এর আগে ভাবিনি। আরও সংক্ষিপ্ত হতে পারে:$("[data-confirm]").on('click,submit', function() { /* ... */ })
হতাশার অবসন্নতা

দুঃখিত, এটি আবার দেখার জন্য প্রতিরোধ করতে পারে না। প্রথম: ইভেন্টগুলি একটি স্পেস দ্বারা পৃথক করা উচিত। দ্বিতীয়: আপনি এখনও কোডটি শক্ত করে তুলতে পারেন jsfiddle.net/jguEg ;)
হতাশার

@ গ্রিমাসেফডেস্পায়ার আমি কোডটি আপডেট করেছি, কারণ ক্লিক করে নিশ্চিত হয়ে একজনকে type="button"জিজ্ঞাসা করা হয়েছিল যে ব্যবহারকারী ফর্মটি জমা দিতে চান (কারণ আপনি কোনও ফর্ম উপাদানকে ক্লিক করছেন), যা সম্ভবত আবার ঠিক আছে ক্লিক করার পরে ঘটেনি।
rybo111

এগুলি ভাল উদাহরণ, যদিও তারা সকলেই নিশ্চিত () ডায়ালগ ব্যবহার করে যাতে আপনি বাতিল / ঠিক আছে বোতামটির নাম পরিবর্তন করতে পারবেন না: |
রজারডপ্যাক

@ আরগারডপ্যাক হ্যাঁ, তবে ডেটা অ্যাট্রিবিউট ব্যবহারের সৌন্দর্য হ'ল confirm()এইচটিএমএল পরিবর্তন না করে আপনি যা খুশি তেমন পরিবর্তন করতে পারেন।
rybo111

22

আপনাকে গ্রিজের কনফারেন্সবক্স তৈরি করতে হবে, কনফার্ম ফাংশন দ্বারা প্রদর্শিত ডায়লগের বোতামগুলি পরিবর্তন করা সম্ভব নয়।

jQuery confirmBox


এই উদাহরণটি দেখুন: https://jsfiddle.net/kevalbutt18/6uauqLn6/

<div id="confirmBox">
    <div class="message"></div>
    <span class="yes">Yes</span>
    <span class="no">No</span>
</div>

function doConfirm(msg, yesFn, noFn)
{
    var confirmBox = $("#confirmBox");
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no").unbind().click(function()
    {
        confirmBox.hide();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.show();
}

আপনার কোড দ্বারা এটি কল করুন:

doConfirm("Are you sure?", function yes()
{
    form.submit();
}, function no()
{
    // do nothing
});

** খাঁটি জাভাস্ক্রিপ্ট কনফারেন্সবক্স **


উদাহরণ : http://jsfiddle.net/kevalbutt18/qwkzw3rg/127/

<div id="id_confrmdiv">confirmation
    <button id="id_truebtn">Yes</button>
    <button id="id_falsebtn">No</button>
</div>

<button onclick="doSomething()">submit</button>

লিপি :

<script>

function doSomething(){
document.getElementById('id_confrmdiv').style.display="block"; //this is the replace of this line


document.getElementById('id_truebtn').onclick = function(){
   //do your delete operation
    alert('true');
};

document.getElementById('id_falsebtn').onclick = function(){
     alert('false');
   return false;
};
}
</script>

সিএসএস :

body { font-family: sans-serif; }
#id_confrmdiv
{
    display: none;
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #aaa;
    position: fixed;
    width: 300px;
    left: 50%;
    margin-left: -150px;
    padding: 6px 8px 8px;
    box-sizing: border-box;
    text-align: center;
}
#id_confrmdiv button {
    background-color: #ccc;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #aaa;
    padding: 2px;
    text-align: center;
    width: 80px;
    cursor: pointer;
}
#id_confrmdiv .button:hover
{
    background-color: #ddd;
}
#confirmBox .message
{
    text-align: left;
    margin-bottom: 8px;
}


2
খুব সুন্দর .. খুব সহজ, খাঁটি জাভাস্ক্রিপ্ট এবং এত বেশি CSS নয়। এটি পছন্দ করুন: ডি
এম

আইটেম টিপে একবার নিশ্চিত করা বাক্সগুলি অদৃশ্য হয়ে যাবে। এছাড়াও, আপনার আইডি নয় ক্লাস ব্যবহার করা উচিত।
rybo111

@ আরগারডপ্যাক আমি ফ্রিডল আপডেট করেছি আমার পক্ষ থেকে কিছু দরকার আছে কিনা তা আমাকে জানিয়ে দিন :)
কেভাল ভট্ট

@ আরগারডপ্যাক যদি আপনার উত্তর পছন্দ হয় তবে আপনি ভোট দিতে পারবেন: পি
কেভাল ভট্ট

@ কেভেলভট্ট, আমি আপনার 'খাঁটি জেএস' সংস্করণটি পছন্দ করি। কোনও বোতাম চাপার পরে ডায়ালগটি সরিয়ে / আড়াল করার কোনও উপায় আছে কি? যদি আমি document.getElementById('id_confrmdiv').style.display="none";ডায়ালগটি লুকিয়ে রাখি তবে একটি বোতামের জন্য পদ্ধতিতে সমস্ত কমান্ড কার্যকর করা হবে।
Andrii Muzychuk


8

বা সহজভাবে:

<a href="https://some-link.com/" onclick="return confirm('Are you sure you want to go to that link?');">click me!</a>

1
ধন্যবাদ! আমি ভীত ছিলাম যে আমার সহজ সিআরইউডি অ্যাপ্লিকেশনটিতে jQuery অন্তর্ভুক্ত করতে হবে কেবল একটি সাধারণ-আপনি-নিশ্চিত-আপনি চান-এটি মুছতে চাই।
উইথ ম্যাথসন

7

আপনি onSubmitইভেন্টটি জেএসকে বাধা দিতে পারেন । তারপরে একটি নিশ্চিতকরণ সতর্কতা কল করুন এবং তারপরে ফলাফলটি ধরুন।


5

এটি করার আরেকটি উপায়:

$("input[name='savedata']").click(function(e){
       var r = confirm("Are you sure you want to save now?");

       //cancel clicked : stop button default action 
       if (r === false) {
           return false;
        }

        //action continues, saves in database, no need for more code


   });

5

ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে এটি একটি সম্পূর্ণ প্রতিক্রিয়াশীল সমাধান:

// Call function when show dialog btn is clicked
document.getElementById("btn-show-dialog").onclick = function(){show_dialog()};
var overlayme = document.getElementById("dialog-container");

function show_dialog() {
 /* A function to show the dialog window */
    overlayme.style.display = "block";
}

// If confirm btn is clicked , the function confim() is executed
document.getElementById("confirm").onclick = function(){confirm()};
function confirm() {
 /* code executed if confirm is clicked */   
    overlayme.style.display = "none";
}

// If cancel btn is clicked , the function cancel() is executed
document.getElementById("cancel").onclick = function(){cancel()};
function cancel() {
 /* code executed if cancel is clicked */  
    overlayme.style.display = "none";
}
.popup {
  width: 80%;
  padding: 15px;
  left: 0;
  margin-left: 5%;
  border: 1px solid rgb(1,82,73);
  border-radius: 10px;
  color: rgb(1,82,73);
  background: white;
  position: absolute;
  top: 15%;
  box-shadow: 5px 5px 5px #000;
  z-index: 10001;
  font-weight: 700;
  text-align: center;
}

.overlay {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.85);
  z-index: 10000;
  display :none;
}

@media (min-width: 768px) {
  .popup {
    width: 66.66666666%;
    margin-left: 16.666666%;
  }
}
@media (min-width: 992px) {
  .popup {
    width: 80%;
    margin-left: 25%;
  }
}
@media (min-width: 1200px) {
  .popup {
    width: 33.33333%;
    margin-left: 33.33333%;
  }
}

.dialog-btn {
  background-color:#44B78B;
  color: white;
  font-weight: 700;
  border: 1px solid #44B78B;
  border-radius: 10px;
  height: 30px;
  width: 30%;
}
.dialog-btn:hover {
  background-color:#015249;
  cursor: pointer;
}
<div id="content_1" class="content_dialog">
    <p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
    <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti.</p>
</div>

<button id="btn-show-dialog">Ok</button>


<div class="overlay" id="dialog-container">
  <div class="popup">
    <p>This will be saved. Continue ?</p>
    <div class="text-right">
      <button class="dialog-btn btn-cancel" id="cancel">Cancel</button>
      <button class="dialog-btn btn-primary" id="confirm">Ok</button>
    </div>
  </div>
</div>


3

xdialog একটি সাধারণ API xdialog.confirm () সরবরাহ করে । কোড স্নিপেট অনুসরণ করছে। আরও ডেমো এখানে পাওয়া যাবে

document.getElementById('test').addEventListener('click', test);

function test() {
  xdialog.confirm('Are you sure?', function() {
    // do work here if ok/yes selected...
    console.info('Done!');
  }, {
    style: 'width:420px;font-size:0.8rem;',
    buttons: {
      ok: 'yes text',
      cancel: 'no text'
    },
    oncancel: function() {
      console.warn('Cancelled!');
    }
  });
}
<link href="https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.js"></script>
<button id="test">test</button>


আপনি যা বলতে চাইছেন তা আপনাকে বর্ণনা করতে হবে // do work here..। জন্য কাজ YES TEXTএবং NO TEXTসেখানে যান?
কেভ

1
@ কেভ, ব্যবহারকারী যখন ওকে বোতামটি নির্বাচন করবেন তখন কলব্যাক কার্যকর করা হবে।
xia xiongjun

এবং যুক্তি কোথায় NO TEXTযেতে হবে?
কেভ

আপনি oncancelসর্বশেষ প্যারামিটার বিকল্পগুলিতে একটি বিকল্প যুক্ত করতে পারেন xdialog.confirm(text, onyes, options)। আরও তথ্যের জন্য দেখুন: xdialog ডিফল্ট-বিকল্পগুলি
xia xiongjun

-2
document.getElementById("button").addEventListener("click", function(e) {
   var cevap = window.confirm("Satın almak istediğinizden emin misiniz?");
   if (cevap) {
     location.href='Http://www.evdenevenakliyat.net.tr';       
   }
});

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