如何将值从boostrap模态子传递给父级?

时间:2016-02-05 15:48:42

标签: javascript php html twitter-bootstrap-3

我一直试图将窗口模态子项中的任何值传递给父窗口,但它不起作用。点击modal后,hide不会Save或将值发送到父窗口。

application.php

<body>
<h3 class="h3 black">Application</h3>
<form class="form-horizontal" method="post" action="admin-controller.php" name="f1">
<input type="text" name="p_name" id="n1" > 
<?php 
    include 'includes/calendar.php';
    $calendar = new Calendar();
    echo $calendar->show();
?>   
</form>
</body>   
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0  /jquery.validate.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript"> 
function post_value(){
    window.opener.document.f1.p_name = document.myform.skill_id_t.value;
    $('#modal_1').modal('hide');
}
</script>

calendar.php

<?php
class Calendar {    
public function show() {
    //some code
    $html .=$this->_showDay($someValues);
    //some code      
}

private function _showDay($cellNumber){      
   // Build up the html.
    $html = '<td id="' . $this->currentDate . '" class="td-top-text ' . $classNameOne .  $classNameTwo . '">';
    //Radio button that open the Modal window
    $html .= '<input type="radio" data-toggle="modal" data-target="#modal_1" name="schedule_id" value="'. $shedule_id.'">'; 
    //singleModal
    $html .=$this->_singleModal();
    $html .= '</td>';       
    return $html; 
 }

 //child window
 public function _singleModal(){
    //Single Modal
    $html = '<form name="myform" method="post" action="">';
    $html .= '<div class="modal fade" id="modal_1" role="dialog">';//Modal open
        $html .= '<div class="modal-dialog">';//Modal Dialog open
            $html .= '<div class="modal-content">';//Modal-Content Open
                $html .= '<div class="modal-header">';//Modal-Header open
                    $html .= '<button type="button" class="close" data-dismiss="modal">&times;</button>';//bbutton
                    $html .= '<h4 class="modal-title bold cyan">Sign Up (Single)</h4>';//Title H4
                $html .= ' </div>';//Modal-header Close      
                $html .= '<div class="modal-body">';//Modal-body open

                //Type something to pass to parent window 
                $html .= '<input name="skill_id_t" type="text">';

                $html .= '</div>';//Modal-body close

                $html .= '<div class="modal-footer">';//Footer open
                    $html .= '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';//button
                    $html .= '<input onclick="post_value();" id="save" type="button" name="save-details" value="Save">';//input
                $html .= '</div>';//Footer Close
            $html .= '</div>';//Modal-content close
        $html .= '</div>';//Modal Dialog Close
    $html .= '</div>';//Modal close
    $html .= '</form>';
    return $html;  
   }
  }

我阅读了其他帖子,根据他们的说法,问题可能是javascript,因为我无法将data-target="#modal_1"javascript一起使用,所以我尝试删除target并添加onclick<input name="schedule_id">中的函数调用$(#modal_1).modal('show');,但$(#modal_1).modal('hide');仍无效。

我还有标记php,因为根据其他帖子,我需要将javascript添加到我的phpcalendar.php)而不是application.php }

修改 每次点击Save

我都会收到一些错误
  

TypeError:opener为null

试图通过添加window.opener...来修复它,但它无法正常工作

新编辑:

我已将js代码更改为:

$(function() {
$('#btnLaunch_1').click(function() {
  $('#modal_1').modal('show');
});

$('#btnSave_1').click(function() {
  opener.document.f1.p_name = document.myform.skill_id_t.value;
  $('#modal_1').modal('hide');
});

 $('#cancel_1').click(function() { 
     $('#modal_1').modal('hide');
 });
});

我删除了data-target必须包含的所有内容,包括关闭窗口data-dismiss的内容。并且,我意识到问题是这一行opener.document.f1.p_name = document.myform.skill_id_t.value;由于某种原因,该行因上述错误而失败。 ...opener is null

Pleaseeee helpp = / II我在这里努力....

2 个答案:

答案 0 :(得分:0)

因此,在谷歌搜索越来越多并遵循第一条评论中的一些建议后,我相信从引导模态子窗口获取值并将其添加到父窗口的最佳方法是使用$(function() { //open modal $('#btnLaunch_1').click(function() { $('#modal_1').modal('show');//no need data-target just <input id=""> }); $('#btnSave_1').click(function() { //Get the value from the child into a variable value = $('[name="skill_id_1"]').val(); //Set the value to the parent window $('[name="p_name"]').val(value); //make the modal dismiss (no need data-target) $('#modal_1').modal('hide'); }); //if user click cancel instead of use data-dismiss, just hide it $('#cancel_1').click(function() { $('#modal_1').modal('hide'); }); }); 这样:

{{1}}

如果您找到了更好的解决方案,请告诉我

由于

答案 1 :(得分:0)

你的开场白名称是错误的;

更改

window.opener.document.f1.p_name

window.opener.document.myform.p_name

,如你所述

<form name="myform" method="post" action="">