javascript - how to pass value from a boostrap modal child to parent? -
i been trying pass value window modal child parent window, doesn't work. modal doesn't hide or send value parent window when click 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 html. $html = '<td id="' . $this->currentdate . '" class="td-top-text ' . $classnameone . $classnametwo . '">'; //radio button open 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">×</button>';//bbutton $html .= '<h4 class="modal-title bold cyan">sign (single)</h4>';//title h4 $html .= ' </div>';//modal-header close $html .= '<div class="modal-body">';//modal-body open //type pass 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; } } i read other posts , according them, problem javascript because cant use data-target="#modal_1" javascript tried delete target , add onclick call function <input name="schedule_id"> $(#modal_1).modal('show'); still $(#modal_1).modal('hide'); doesn't work.
i had tag php because according other posts, need include javascript php (calendar.php) , not in application.php
edit got error every time click on save
typeerror: opener null
tried fix adding window.opener... didn't work either
new edit:
i have change js code this:
$(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'); }); }); and remove have data-target including 1 close window data-dismiss. and, realized problem line opener.document.f1.p_name = document.myform.skill_id_t.value; reason line fail giving above error. ...opener null
pleaseeee helpp =/ ii trying hard here....
so, after googling more , more , follow suggestions first comment, believe best way values bootstrap modal child window , add parent window using jquery in way:
$(function() { //open modal $('#btnlaunch_1').click(function() { $('#modal_1').modal('show');//no need data-target <input id=""> }); $('#btnsave_1').click(function() { //get value child variable value = $('[name="skill_id_1"]').val(); //set value parent window $('[name="p_name"]').val(value); //make modal dismiss (no need data-target) $('#modal_1').modal('hide'); }); //if user click cancel instead of use data-dismiss, hide $('#cancel_1').click(function() { $('#modal_1').modal('hide'); }); }); if find better solution one, please let me know
thanks
Comments
Post a Comment