Title could be misleading. I do have a button with onclick event that calls a function to dump some values into POST variable. It also toggles a modal which have a form that POSTs to current document. A brewer example looks like this:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$_POST = [];
function send_id(var1, var2) {
$_POST['mainpart'] = var1;
$_POST['subpart'] = var2;
console.log($_POST);
};
function evaluate_form() {
alert($_POST['numsales']);
};
function post_test() {
console.log($_POST);
};
})
</script>
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="form1" action="" method="POST">
<div class="form-group">
<label for="address">Address for sale:</label>
<textarea class="form-control" id="address" name="address" rows="6"></textarea>
</div>
<div class="form-group">
<label for="numsales">Number of sales:</label>
<input type="number" value="1" class="form-control only-number" id="numsales" name="numsales">
</div>
<div class="form-group">
<label for="quota">Quota:</label>
<input type="number" value="1" class="form-control only-number" id="quota" name="quota">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" onclick="evaluate_form()">Save</button>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Performance Calculation Form</h2>
<div class="tables">
<div id="1">
<form>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th class="col-md-10" colspan="2">1. Sales</th>
<th class="col-md-2"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-8">a) Sales to a </td>
<td class="col-md-2">
<p class="text-center">20</p>
</td>
<!-- <td class="col-md-2"><input name = "SCI_adedi" type="number" class="form-control" id="usr"></td> -->
<td style="text-align: center">
<div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1" style="position: center;" onclick="send_id('1','a')">Add</button>
</div>
</td>
</tr>
<tr>
<td class="col-md-10" colspan="2">Subtotal </td>
<td class="col-md-2"><input type="text" class="form-control" id="usr"></td>
</tr>
</tbody>
</table>
<button type="submit" id="submit" name="submit" value="KAYDET"> Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
modal part:
<!-- Modal -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="form1" action="<?php echo htmlspecialchars($_SERVER[" PHP_SELF "]); ?>" method="POST">
<div class="form-group">
<label for="address">Address for sale:</label>
<textarea class="form-control" id="address" name="address" rows="6"></textarea>
</div>
<div class="form-group">
<label for="numsales">Number of sales:</label>
<input type="number" value="1" class="form-control only-number" id="numsales" name="numsales">
</div>
<div class="form-group">
<label for="quota">Quota:</label>
<input type="number" value="1" class="form-control only-number" id="quota" name="quota">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" onclick="evaluate_form()">Save</button>
</form>
</div>
</div>
</div>
</div>
There is an 'Add' button that onclick event fires up send_id(val1,val2) function. I'm trying to dump table name and row with this send_id() function via POST method onto same page (Don't know if I implemented it correctly). This Add button also pops-up the modal. Modal have a form in it and its save button submits form with post into same page (Again not sure if I did it right way). And now I need to take all these variables and manipulate them to execute a SQL query. So I also defined an onclick event to modal save button to read all variables inside POST and write down a query via evaluate_form. Too see if I can access POST array I've used alert($_POST); but it bring nothing.
This may be a bad implementation but what I want to accomplish is;
Save info about which add buttton is clicked. A variable is needed so I can use it when executing SQL statements(Writing into correct table).
A model should pop after clicking add button.
Modal should include a form and it should be submitted via POST into same page.
After modal submission, all of these variables (variable of save info and modal form variables) could be acceessed via a function so SQL statements could be arranged.
Thanks.
Related
Hi everyone just want you guys to check out and see what is wrong with my form tag. What I'm trying to do here is to submit values from 2 main divs, I'm using bootstrap.
This one doesn't work:
<form class="" action="" id="pos_data" method="post">
<div class="input-group barcode">
<input type="text" class="form-control" id="txtSearch" name="txtSearch" placeholder="barcode" autofocus>
<span class='input-group-addon' style='cursor: pointer;' data-toggle='modal' data-target='#myModal'><i class='fa fa-pencil'></i> Edit</span>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">The Value that would be Inputed will be added to the current value.</h4>
</div>
<div class="modal-body">
<input type="text" id="addtoQuantity" class="form-control" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
</form>
But when I do this
<form class="" action="" id="pos_data" method="post">
<div class="input-group barcode">
<input type="text" class="form-control" id="txtSearch" name="txtSearch" placeholder="barcode" autofocus>
<span class='input-group-addon' style='cursor: pointer;' data-toggle='modal' data-target='#myModal'><i class='fa fa-pencil'></i> Edit</span>
</div>
</form>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">The Value that would be Inputed will be added to the current value.</h4>
</div>
<div class="modal-body">
<input type="text" id="addtoQuantity" class="form-control" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
EDITED
I'm using ENTER button as submit. so if I click on the edit span the MODAL div would show and I can enter a value on the textbox of that div. after clicking the add button I put on what I want to search on the txtSearch of the input-group then press enter. The second form structure works but I want the value from the text box in the MODAL div to be submitted to. Does this make sense?
Check this .. i think this will help you ..
$(document).on('click','#add-qty-btn',function(){
var qty = $('#addtoQuantity').val();
var txtsearch = $('#txtSearch').val();
alert('TextSearch is: ' + txtsearch + ' - Quantity: ' + qty);
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br /><br />
<form class="" action="" id="pos_data" method="post">
<div class="input-group barcode">
<input type="text" class="form-control" id="txtSearch" name="txtSearch" placeholder="barcode" autofocus>
<span class='input-group-addon' style='cursor: pointer;' data-toggle='modal' data-target='#myModal'><i class='fa fa-pencil'></i> Edit</span>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">The Value that would be Inputed will be added to the current value.</h4>
</div>
<div class="modal-body">
<input type="text" name="addtoQuantity" id="addtoQuantity" class="form-control" />
</div>
<div class="modal-footer">
<button id="add-qty-btn" type="button" class="btn btn-default" data-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
</form>
If you want the text box from modal to be included so put the end that of the form after the end of the modal div
Else if you want to remove it and you don't want to include it value so remove it on submit with this jquery function
$("form").submit(function() {
$(this).children('#your input id').remove();
});
With CSS give display none to the modal
Then with the button edit modal click event set the modal display to block
I want to set dirty flag for edited cells in the table. When I click the save button I need to check the edited field is dirty is true or not. Because X-editable is updating entire table cell values both edited and unedited cell values.I need to check what are all the edited fields using dirty flag and if that field is dirty then that fields only i have to save in to mongodb.
for that I used this line to set the $dirty:
$scope.Form.username.$dirty = true; // this throwing TypeError:$dirty is undefined error
$scope.Form.$dirty = true;
//it is working
html code:
<form name="profileform">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" id="myModal">
<!-- Modal content-->
<div class="modal-content" style="margin-top:135px">
<div class="modal-header">
<h4 class="modal-title pull-left"> Add New Role</h4>
<button type="button" class="close pull-right"
data-dismiss="modal" aria-hidden="true">
x
</button>
</div>
<div class="modal-body">
<div class="row" style="margin-bottom:1%">
<div class="col-xs-3">
<h6><strong>Role<span style="color:green;">*</span></strong></h6>
</div>
<div class="col-xs-9">
<input type="text" name="Name" class="form-control" ng-model="Role.RoleName" />
<!--<span class="error" ng-show="profileform.RoleName.$invalid ">Please enter a Role Name</span>-->
</div>
</div>
<div class="row" style="margin-bottom:1%">
<div class="col-xs-3">
<h6><strong> Description</strong></h6>
</div>
<div class="col-xs-9">
<textarea name="Description" style="width: 100%; max-height: 200px; max-width: 100%;"
ng-model="Role.Description" maxlength="255"></textarea>
</div>
</div>
<div class="row" style="margin-bottom:1%">
<div class="col-xs-3">
<h6><strong>IsActive?</strong></h6>
</div>
<div class="col-xs-9">
<input type="checkbox" name="IsActive" class="form-control" ng-model="Role.IsActive" style="width:20px;" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="AddRole()" ng-disabled="profileform.$invalid" data-dismiss="modal">Save</button>
<button class="btn btn-primary" data-dismiss="modal" ng-click="deselect()">Cancel</button>
</div>
</div>
</div>
</div>
</form>
controller code:
$scope.AddRole = function () {
debugger;
console.log($scope.profileform.RoleName.$dirty);
console.log($scope.profileform.Description.$dirty);
$http.post('/AddNewRole', $scope.Role).then(function (response) {
//console.log(response);
$notify.success('Success', 'record inserted Successfully');
refresh();
});
};
Because $dirty is not defined in username object,or username is itself not defined, To fix the issue you need to first define the username into the Form object also please make sue Form is also into the $scope.
$scope.Form.username = {};
Then you can add $dirty into the username object like below
$scope.Form.username['$dirty'] = true
$dirty : It will be TRUE, if the user has already interacted with the form or if the field has been modified.
Try this :
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function MyCtrl($scope) {
$scope.FormSubmit = function () {
console.log($scope.form.username.$dirty);
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="form" novalidate class="simple-form">Name:
<input type="text" name="username" ng-model="user.name" required />
<br />
<input type="submit" ng-click="FormSubmit()" value="Save" />
</form>
</div>
Try with names not ng-model.
angular.module('exApp',[]).controller('ctrl', function($scope){
$scope.name="Mani"; $scope.emails = "mani#gmail.com";
$scope.sub = function(){
console.log($scope.frm.yourname.$dirty, $scope.frm.mail.$dirty);
$scope.frm.yourname.$dirty = true;
console.log("I was set '#true': " + $scope.frm.yourname.$dirty);
}
$scope.AddRole = function(){
console.log("Role name dirty check: "+ $scope.profileform.Name.$dirty);
console.log("Description dirty check: "+ $scope.profileform.Description.$dirty);
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="exApp" ng-controller="ctrl">
<form name="frm" novalidate ng-submit="sub()">
<input type="text" name="yourname" ng-model="name">
<input type="email" name="mail" ng-model="emails" required>
<input type="submit">
</form>
<br><br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Add role
</button>
<form name="profileform">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" id="myModal">
<!-- Modal content-->
<div class="modal-content" style="margin-top:135px">
<div class="modal-header">
<h4 class="modal-title pull-left"> Add New Role</h4>
<button type="button" class="close pull-right"
data-dismiss="modal" aria-hidden="true">
x
</button>
</div>
<div class="modal-body">
<div class="row" style="margin-bottom:1%">
<div class="col-xs-3">
<h6><strong>Role<span style="color:green;">*</span></strong></h6>
</div>
<div class="col-xs-9">
<input type="text" name="Name" class="form-control" ng-model="Role.RoleName" />
<!--<span class="error" ng-show="profileform.RoleName.$invalid ">Please enter a Role Name</span>-->
</div>
</div>
<div class="row" style="margin-bottom:1%">
<div class="col-xs-3">
<h6><strong> Description</strong></h6>
</div>
<div class="col-xs-9">
<textarea name="Description" style="width: 100%; max-height: 200px; max-width: 100%;"
ng-model="Role.Description" maxlength="255"></textarea>
</div>
</div>
<div class="row" style="margin-bottom:1%">
<div class="col-xs-3">
<h6><strong>IsActive?</strong></h6>
</div>
<div class="col-xs-9">
<input type="checkbox" name="IsActive" class="form-control" ng-model="Role.IsActive" style="width:20px;" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="AddRole()" ng-disabled="profileform.$invalid" data-dismiss="modal">Save</button>
<button class="btn btn-primary" data-dismiss="modal" ng-click="deselect()">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</body>
I want to pass loop index to the function Createprofile(). I want to do this using angular controller.
HTML
<li ng-repeat = "proteam in proteams | filter:filtText | filter:filtText1" ng-init="counter">
<p>{{proteam.description}}</p>
<div class="modal fade" id="collaborateForm" role="dialog" hidden="true" style="overflow: auto;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content fade in">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">COLLABORATION FORM</h4>
</div>
<div class="modal-body" >
<!-- Collaborate FORM -->
<form ng-submit="createProfile(counter)" onkeypress="return event.keyCode != 13;">
<label>Enter team Name:</label>
<input type="text" class="form-control" id="teamName" required="required">
<button type="submit" class="btn btn-primary btn-xs" dismiss="modal" onClick="turnDivOff()">Collaborate</button>
</form>
</div>
</div>
</div>
</div>
</li>
Try this as
<form ng-submit="createProfile($index)" onkeypress="return event.keyCode != 13;">
ng-repeat expected an array so it have an index associated with it
you can use track by in ng-repeat
<li ng-repeat = "proteam in proteams | filter:filtText | filter:filtText1 track by $index" ng-init="counter">
then you can use it inside the ng-repeat
<form ng-submit="createProfile($index)"
Check the below code. On every click the index of the form is alerted.
angular.module('myApp', [])
.controller('myCtrl',function($scope) {
$scope.createProfile = function(html) {
alert(html);
}
$scope.proteams =[{'description':'stack'}, {'description':'overflow'}]
});
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<ul>
<li ng-repeat = "proteam in proteams" ng-init="counter">
<p>{{proteam.description}}</p>
<div class="modal fade" id="collaborateForm" role="dialog" style="overflow: auto;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content fade in">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">COLLABORATION FORM</h4>
</div>
<div class="modal-body" >
<!-- Collaborate FORM -->
<form ng-submit="createProfile($index)" onkeypress="return event.keyCode != 13;">
<label>Enter team Name:</label>
<input type="text" class="form-control" id="teamName" required="required">
<button type="submit" class="btn btn-primary btn-xs" dismiss="modal" onClick="turnDivOff()">Collaborate</button>
</form>
</div>
</div>
</div>
</div>
</li></ul>
Bootstrap Modal code
<!-- Signup Modal -->
<div class="modal fade" id="signUpForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h3 class="modal-title" id="myModalLabel">Please Sing Up</h3>
</div>
<div class="modal-body">
<?php echo form_open('Registration')?>
<div class="form-group">
<label for="login-email" class="control-label">Email:</label>
<input type="text" class="form-control" name="login-email" id="login-email">
</div>
<div class="form-group">
<label for="username" class="control-label">Username:</label>
<input type="text" class="form-control" name="username" id="username">
</div>
<div class="form-group">
<label for="password" class="control-label">Password:</label>
<input type="password" class="form-control" name="password" id="password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Signup</button>
</div>
<?php echo form_close()?>
</div>
</div>
</div>
And I have controller named Registration. when I click on button to launch the modal nothing happens. Button code that launches the modal.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signUpForm">Signup
</button>
You should add jQuery bootstrap "REQUEST"
More info here http://getbootstrap.com/2.3.2/javascript.html#modals
Add reference to jquery and bootstrap.min.js files in header and also add links for bootstrap css files.
I have a delete link , for that I am using bootstrap modal window . Here window appearing fine When I click yes button of window the record should be delete. So I have to call servlet in yes button along with a parameter Id here I am able to call servlet but parameter is not passing. How can I pass parameter to yes button of modal window. Here is code for it.
The bootstrap modal where I am calling,
<td>Edit
</td>
<td> Delete
</td>
in the same jsp page the markup of modal is,
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<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" id="myModalLabel">Delete Teacher Record</h4>
</div>
<div class="modal-body">
<h3>Are you sure?</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
<a href="<%=request.getContextPath()%>/controller/TeacherManagementController?flowName=DELETE_TEACHER_INFO&teacherId=${teacherId.getTeacherId()}"
class="btn btn-primary">Yes</a>
</div>
</div>
</div>
</div>
The problem I am facing is the modal is appearing but record is not delete because of not able to pass the teacherId. Please any one help me in this.
I am using like this call function and assign value to hidden fields
Html:
<div id="add_button" >
<a data-toggle="modal" href="#myModal_new" onClick="pop_up('<?php echo $section_value['subject_name']; ?>','<?php echo $section_value['section_id']; ?>')">Add Subjects</a>
</div>
<script>
function pop_up(name,id){
var standard = document.getElementById("standard");
var standard_id = document.getElementById("standard_id");
var standard_id_new = document.getElementById("standard_id_new");
standard.value = name;
standard_id.value = id;
standard_id_new.value = id;
}
</script>
<div id="myModal_new" class="modal hide fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Create Sections</h3>
</div><br><br>
<div id="errorContainers">
<p>Please correct the errors and try again:</p>
<ul />
</div>
<div class="modal-body" style="margin-left: 17%;">
<!-- Modal Form Starts Here -->
<form name="modalForm" id="formss" method="post">
<input type="hidden" name="standard" id="standard">
<input type="hidden" name="standard_id" id="standard_id">
<input type="hidden" name="standard_id_new" id="standard_id_new">
<fieldset>
<div class="division_center"><div class="division_left"><label class="form-signin-signup" for="input1">Sections </label> </div>
<div class="division_right">
<input type="text" name="standard_new" id="standard_new"> </div></div>
</fieldset>
<!-- Modal Form Ends Here -->
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal" >Close</a>
<input type="submit" name="newsubmit" class="btn btn-primary btn-large" value="Create">
</div>
</form>
</div>
</div>
</div>