Bootstrap Snippet Ventana modal con metodos using HTML Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="modal" id="newrow">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title">Add Survey Question</h4>
                    </div>
                    <link href="js/libs/jqueryui/css/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
                    <div class="modal-body">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-3" id="inputTo">Question</label>
                                <div class="col-sm-9"><input type="email" class="form-control" id="nQ" title="Enter question to be asked" onchange="utext();"></div>
                                <label class="col-sm-3">Control Type</label>
                                <div class="col-sm-9">
                                    <select class="form-control" id="nCT" onchange='showcontrol();' title="Select the type of input control for the user (either textbox or dropdown listbox)">
                                        <option>Text Box</option>
                                        <option>Drop Down List</option>
                                    </select>
                                </div>
                                <label class="col-sm-3" >Options</label>
                                <div class="col-sm-9"><textarea class="form-control" id="nOpt" rows="2" title="Comma separated list of selectable items"></textarea></div>
                            </div>
                            <div class="panel panel-primary">
                                <div class="panel-heading">Sample</div>
                                <div class="panel panel-body">
                                <div id="questionspace"><label id="samplequestion">Question...</label></div>
                                <div id="controlspace"></div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script src="js/libs/jquery/jquery.min.js" type="text/javascript"></script>
        <script src="js/libs/jqueryui/jquery-ui.min.js" type="text/javascript"></script>
        <script src="js/libs/twitter-bootstrap/js/bootstrap.js" type="text/javascript"></script>
        <script type='text/javascript'>
            $(document).ready(function() {
                $( document ).tooltip();
                $('#dlgbtn').click(function() {
                    addrow();
                    return false;
                });
                $('#newrowbutton').click(function() {
                    $('#newrow').modal({show: true});
                });
            });
            
            function showcontrol(){
                if ($("#nCT").value()==1){
                    $("#nOpt").hide();
                }else{
                    $("#nOpt").show();
                }
                      
            }
            
            $rows = 1;
            function addrow() {
                $QuestionText = $('#nQ').val();
                $ControlType = $('#nCT option:selected').text();
                $Options = $('#nOpt').val();
                $nr = '<tr><td>' + $rows + '</td><td>' + $ControlType + '</td><td>' + $QuestionText + '</td><td>' + $Options + '</td></tr>';
                $('#qtable tbody').append($nr);
                $rows++;
                $('#newrow').modal('hide');
            }
            
        </script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Ventana modal con metodos"
Bootstrap 4.0.0 Snippet by jefer23

Related: See More

Questions / Comments:

"Ventana modal con metodos" Bootstrap 4.0.0 Snippet by jefer23

Related: See More

Questions / Comments:

"Ventana modal con metodos"
Bootstrap 4.0.0 Snippet by jefer23