बूटस्ट्रैप मॉडल - जावास्क्रिप्ट

Question

का उपयोग करके मोडल में डेटा पास करें मैं जावा-स्क्रिप्ट के उपयोग के साथ बूटस्ट्रैप मोडल में चयन/ड्रॉप-डाउन डेटा पास करना चाहता हूं। मैं पुष्टि संदेश के रूप में मोडल का उपयोग कर रहा हूँ।

मेरे चयन/ड्रॉप-डाउन है,

<select class="form-control" id="project" name="project_id"> 
    <option value="1"> ABCD </option> 
    <option value="2"> EFGH </option> 
    <option value="3"> IJKL </option> 
    <option selected="selected" value="#">Please Select</option> 
</select> 

और मैं नीचे के रूप में जावास्क्रिप्ट का उपयोग कर बूटस्ट्रैप मोडल बोल रहा हूँ,

$('#project').change(function(){ 
    var e  = document.getElementById("project"); 
    var p_id = e.options[e.selectedIndex].value; 
    var p_name = e.options[e.selectedIndex].text; 

    $('#myModal').modal('show'); 
}); 

बूटस्ट्रैप मोडल रूप में नीचे है,

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel"></h4> 
     </div> 
     <div class="modal-body modal-mt-hgt"> 
     <form action="" method="post"> 
      <p> Are you sure to comment on <b id="p_name">...PROJECT NAME HERE</b> </p> 
      Enter Your Comment : <textarea rows="3"></textarea> 
      <input type="hidden" name="country" value=""> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Add Task</button> 
     </div> 
     <?= form_close(); ?> 
    </div> 
    </div> 
</div> 

मैं क्या करना चाहता हूं पास/शो var p_id हाय में डीडीएन फ़ील्ड और var p_name मोडल के <b id="p_name"></b> के साथ दिखाएं।

इसके अलावा p_id, p_name जब उपयोगकर्ता ऊपर और केवल बात मैं क्या करने की जरूरत मॉडल पर परियोजना का नाम दिखाने के लिए और आवंटित करने के लिए कैसे है जावास्क्रिप्ट समारोह का उपयोग कर चयन/ड्रॉप-डाउन से किसी भी विकल्प का चयन करता प्राप्त कर सकते हैं के मोडल

सादर

Answer 1

छिपा क्षेत्र में p_id मैं बहुत यह सब करने के लिए नया हूँ तो यह शायद सबसे अच्छा समाधान नहीं है, लेकिन यह एक समाधान है।

$('#project').on('change', function() { 
    var p_id = $(this).val(); 
    var p_name = $(this).find(':selected').text(); 

    $('#myModal').on('show.bs.modal', function() 
    { 
     $(this).find('#p_name').text(p_name); 
     $(this).find('#p_id').val(p_id); 
    }); 

    $('#myModal').modal('show'); 
}); 

आपको छिपे हुए क्षेत्र में कक्षा या आईडी जोड़ने की आवश्यकता होगी ताकि इसकी पहचान की जा सके। ऊपर मैंने इसे पी_आईडी की एक आईडी दी है।

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel"></h4> 
     </div> 
     <div class="modal-body modal-mt-hgt"> 
     <form action="" method="post"> 
      <p> Are you sure to comment on <b id="p_name">...PROJECT NAME HERE</b> </p> 
      Enter Your Comment : <textarea rows="3"></textarea> 
      <input type="hidden" id="p_id" name="country" value=""> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Add Task</button> 
     </div> 
     <?= form_close(); ?> 
    </div> 
    </div> 
</div> 

मुझे लगता है कि यह सब आत्म व्याख्यात्मक है, लेकिन यदि नहीं, तो हम जांच को देखने के लिए जब परियोजना ड्रापडाउन परिवर्तन, हम तो चयनित आइटम $ का उपयोग कर के मूल्य और पाठ आवंटित जोड़ने (यह) अलग-अलग राज्य के लिए कि यह # प्रोजेक्ट ड्रॉप डाउन आईडी के भीतर है।

अगला, हम यह देखने के लिए एक श्रोता जोड़ते हैं कि मोडल कब दिखाया जाता है, वहां से हम उस मोडल को कुशल बना सकते हैं जिसे हम चाहते हैं। इस उदाहरण में हमने p_name टेक्स्ट सेट किया है और p_id का मान सेट किया है।