I am making a Modal Form that pops up on Click of a button and opens up a input field.
On Save it pushes the values to webpage URL that it is poping up from.
I am trying to capture that value and update on the database.
Which is happening perfectly fine.
But I want to refresh the page as the URL still holds the value for from the Modal form.
<div id="custom-modal" class="modal-demo">
<button type="button" class="close" onclick="Custombox.close()"><span>×</span><span class="sr-only">Close</span></button>
<h4 class="custom-modal-title">Add New Category</h4>
<div class="custom-modal-text text-left">
<form role="form">
<div class="form-group" method="post">
<label for="name">Category Name</label>
<input type="text" class="form-control" id="cat_name" name="cat_name" placeholder="Enter category name">
</div>
<button type="submit" class="btn btn-default waves-effect waves-light" name="btn-savecat" id="btn-savecat">Save</button>
<button type="button" class="btn btn-danger waves-effect waves-light m-l-10">Cancel</button>
<?php
if(isset($_GET['cat_name']))
{
try
{
$id=$_GET['cat_name'];
$result = $DB_con->prepare("INSERT INTO category(cat_name,cat_status)
VALUES(:userid,'Active')");
$result->bindParam(':userid', $id);
$result->execute();
}
catch(PDOException $e)
{
echo $e->getMessage();
}
}
?>
</form>
</div>
I think you should be able to do it with new HTML5. There is an option for rewriting url without reloading the page. You cannot however change the domain name for security reasons. Look up history api.
I think it would be something like the following:
history.replaceState("object or string", "title", "/another-new-url");
Check this one out.
Related
I am trying to have a pop up modal for confirmation if the user wants to delete a certain item. However, when user clicks delete the modal pops up for a split second and directly deletes the item. The button is the hyperlink form.
Code for the delete button:
<a onclick="confirmDelete(this);" href="add_equipment_process.php?delete=<?php echo $data['id']; ?>" class="btn btn-danger" data-id="<?php echo $data['id'];?>" > Delete
Code for delete process:
if (isset($_GET['delete'])) {
$id = $_GET['delete'];
$mysqli->query("DELETE FROM equipment WHERE id=$id") or die($mysqli->error);
$_SESSION['message'] = "Equipment has been deleted successfully.";
$_SESSION['message_type'] = "success";
header("Location: add_equipment.php");
}
Delete function
function confirmDelete(self) {
var id = self.getAttribute("data-id");
document.getElementById("deletedata").id.value = id;
$("#myModal").modal("show");
Code for the confirmation modal:
<div id="myModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Delete User</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this equipement ?</p>
<form method="POST" action="add_equipment.php" id="deletedata">
<input type="hidden" name="id">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" id="deletedata" name="delete" form="deletedata" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
The add_equipment.php is the file which has the delete button, add_equipment_process.php is the file that has the deletion process.
I have also tried another way with button for which all the code above is same just the button code is like this:
<button type="button" class="btn btn-danger" data-id="<?php echo $data['id']; ?>" onclick="confirmDelete(this);" href="add_equipment_process.php?delete=<?php echo $data['id']; ?>">
Delete
</button>
The problem with the button is that it shows the modal but when I click on the delete button it doesn't do anything. :( Please tell me what I am doing wrong. I want my code to ask user for confirmation for deleting certain item before deleting.
I have seen several solutions for this on here, but most of them were just to add scripts. And I already have the necessary scripts in my head tag.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
I made changes to the modal and put the buttons inside form tag
<div class="modal-body">
<p>Are you sure you want to delete this equipement?</p>
<form method="POST" action="add_equipment.php" id="deletedata">
<input type="hidden" name="id">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" class="btn btn-success">Close </button>
<button type="submit" id="deletedata" name="delete" form="deletedata" class="btn btn-danger">Delete </button>
</div>
For delete process I used prepared statements, to avoid sql injection problem.
if (isset($_POST['delete'])) {
$stmt = $mysqli->prepare('DELETE FROM equipment WHERE id= ?');
$stmt->bind_param("i", $_POST['id']);
$stmt->execute();
$_SESSION['message'] = "Equipment has been deleted successfully.";
$_SESSION['message_type'] = "success";
$stmt->close();
}
Then it worked.
Im trying to fix a strange error with my code with the Bootstrap 4 Modal code. I've simply just copied and pasted the code from here: https://getbootstrap.com/docs/4.0/components/modal/#events
This is for an automotive website and Im trying to pass stock and VIN via the data attribute as requested. The question is how this works with a foreach loop. It works on a single Wordpress page or post but won't pull the data from each section of the loop.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-stock="<?php echo $vehicle['stock_number'];?>">Check Availability</button>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Stock</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
And my Jquery code
(function($) {
$('#exampleModal').on('modal.fade.show', function (event) {
alert( "clicked" );
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('stock') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use $ here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})})( jQuery );```
Functionality wise this works, just not within the dynamic pages that are being generated in the foreach loop. The buttons have the proper data-attribute applied but the data doesn't seem to pass to the modal from the loop. I have a development page up where you can take a live look here, the button in question is the "Check Availability" http://windsor.sixomedia.ca/inventory/New/
Try this
var recipient = button.data('data-stock');
Hope that helps.
I'm using angular with a MySQL backend.
I think I'm missing something regarding ng-model.
When I click add new idea, nothing happens. Any ideas. I'd had it working, but then I changed some things, so I know it's registering to the database. Additionally, when it did work, it would only update without a refresh occasionally. My main goal is getting the adding working again, but if there's something else blatantly wrong, please feel free to give me a hard time.
thanks, all.
html
<form>
<div>
<input type="text" class="form-control" name="idea" ng-model="ideaInput">
<button class="btn btn" type="submit" ng-click="addIdea(ideaInput)">Add
New Idea</button>
</div>
</form>
php
<?php
require_once 'db.php'; // The mysql database connection script
if(isset($_GET['idea'])){
$task = $_GET['idea'];
$status = "0";
$created = time();
$query=mysql_query("INSERT INTO ideas(idea,status,created_at) VALUES ('$idea', '$status', '$created')") or die(mysql_error());
}
js controller
app.controller('ideasController', function($scope, $http) {
getIdea(); // Load all available ideas
function getIdea(){
$http.get("ajax/getIdea.php").success(function(data){
$scope.ideas = data;
});
};
$scope.addIdea = function (idea) {
$http.get("ajax/addIdea.php?idea="+idea).success(function(data){
getIdea();
$scope.ideaInput = "";
});
};
?>
This is what used to work.
<div class="col-sm-3">
<button ng-click="addNewClicked=!addNewClicked;" class="btn btn-sm btn-danger header-elements-margin"><i class="glyphicon glyphicon-plus"></i> Add New Idea</button>
</div>
<div class="col-sm-3">
<input type="text" ng-model="filterIdea" class="form-control search header-elements-margin" placeholder="Filter Ideas">
</div>
</div></div>
<div class="widget-body ">
<form ng-init="addNewClicked=false; " ng-if="addNewClicked" id="newIdeaForm" class="add-idea">
<div class="form-actions">
<div class="input-group">
<input type="text" class="form-control" name="comment" ng-model="ideaInput" placeholder="Add New Idea" ng-focus="addNewClicked">
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="addIdea(ideaInput)"><i class="glyphicon glyphicon-plus"></i> Add New Idea</button>
</div>
</div>
</div>
</form>
try to add your controller reference in the div:
<form>
<div ng-controller="ideasController">
<input type="text" class="form-control" name="idea" ng-model="ideaInput">
<button class="btn btn" ng-click="addIdea(ideaInput)">Add
New Idea</button>
</div>
</form>
I'm building a form within a Boostrap Modal, it has 3 INPUT fields and a Submit button for each row. Each Submit is POST onto another page. What I then want to do is use the variables to return data into a table which will show all the results for that particular search ie Postcode, StreetName. Within the table I have a SUBMIT button which will return the output into my main form on the main page.
The section I'm struggling with is to get the variable from the INPUT (from my modal, which I'm using on jobdetailssearch.php) to POST onto the search page (search.php). Once this is return then I'm going to show all the results in the form on my jobdetails page (jobdetails.php)
This below is my code for the 3 pages.
jobdetailssearch.php
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Search Projects</h4>
</div>
<div class="modal-body">
<form class="modal-form" id="searchform" name="searchform" action="includes/search.php" method="post">
<div class="form-group">
<label class="col-md-4 control-label">Project Number</label>
<div class="col-md-6">
<input type="text" class="form-control input-inline input-medium" name="searchprojno" id="searchprojno" placeholder="Enter Project Number">
</div>
<button type="submit" class="btn blue" id="submitsearchprojno" name="submitsearchprojno" >Search <i class="m-icon-swapright m-icon-white"></i></button>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Address</label>
<div class="col-md-6">
<input type="text" class="form-control input-inline input-medium" name="searchaddress" id="searchaddress" placeholder="Enter Address">
</div>
<button type="submit" class="btn blue" id="submitsearchadd" name="submitsearchadd" >Search <i class="m-icon-swapright m-icon-white"></i></button>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Postcode</label>
<div class="col-md-6">
<input type="text" class="form-control input-inline input-medium" name="searchpostcode" id="searchpostcode" placeholder="Enter Postcode">
</div>
<button type="submit" class="btn blue" id="submitsearchpc" name="submitsearchpc" >Search <i class="m-icon-swapright m-icon-white"></i></button>
</div>
<div class="form-group">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-striped table-bordered table-advance table-hover">
<thead>
<tr>
<th width="100px"><i class="fa fa-list-alt"></i> Address</th>
<th width="50px"></th>
</tr>
</thead>
<tbody>
<tr>
<td width="100px"></td>
<td width="50px">Select Address</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer right">
<button type="button" data-dismiss="modal" class="btn default">Cancel</button>
<!--<button type="submit" class="btn blue">Select</button>-->
</div>
</form>
</div>
search.php
<?php
require '../core/cnn.php';
if(isset($_POST['submitsearchprojno'])) {
$searchprojno = $_POST["searchprojno"];
}
if(isset($_POST['submitsearchadd'])) {
$searchaddress = $_POST["searchaddress"];
}
if(isset($_POST['submitsearchpc'])) {
$searchpostcode = $_POST["searchpostcode"];
}
$searchpostcode = mysql_real_escape_string($searchpostcode);
$searchaddress = mysql_real_escape_string($searchaddress);
$searchprojno = mysql_real_escape_string($searchprojno);
$searchrs = mysql_query("SELECT ProjectNo, CONCAT(COALESCE(HouseNoName, ''), ' ', COALESCE(StreetName, ''), ' ',
COALESCE(TownOrCity, ''), ' ', COALESCE(Postcode, '')) AS Display,
PropID, AreaID, AWGMember, Householder, HouseNoName, StreetName, TownOrCity,
Postcode, ContactTelephone, AlternatePhone, Email, PropertyTenure, PropertyNotes
FROM prop_property
WHERE IsActive = 1
AND (Postcode = '".$searchpostcode."'
OR StreetName = '".$searchaddress."'
OR ProjectNo = '".$searchprojno."')
") or die(mysql_error());
$checkrs = mysql_query("SELECT * FROM prop_property WHERE IsActive = 0");
if(!mysql_num_rows($checkrs) > 0) {
echo '<td> No record found!</td><td></td>';
}
else {
while ($results = mysql_fetch_array($searchrs)) {
echo '
<td>'.$results['Display'].'</td>
<td>
<form action="jobdetails.php" method="post">
<input type="hidden" name="searchhouse" value=" '.$results['HouseNoName'].'" >
<input type="hidden" name="searchstreet" value=" '.$results['StreetName'].'" >
<input type="hidden" name="searchtown" value=" '.$results['TownOrCity'].'" >
<input type="hidden" name="searchpostcode" value=" '.$results['Postcode'].'" >
<input type="hidden" name="searchpropid" value=" '.$results['PropID'].'" >
<input type="hidden" name="searchprojectno" value=" '.$results['ProjectNo'].'" >
<button type="submit" class="btn default btn-xs blue-stripe" name="viewsearch">View Address</button>
</form>
</td>';
}
}
?>
The modal opens fine and shows the form in the way I want. What's the best way I should go about this to input the search criteria and show the results in a table for me to select and pull on to my main form on jobdetails.php (I've not included this as it's too big and not sure its needed to be seen)?
Let me know if I understood your issue, you have your form in a modal view of bootstrap and you want send the data in the form to another page, process the search and then return the data that you find to the same modal and put it into the < tables> that's your issue?
Well, if that is. Look I think the easier way to do this is using jquery, and change the input submit for a input button, because I don't remember very well but when you send a submit inside the modal, the modal it's closed. That's true? if that the problem change the submit for a button. Then you have to create a function .click() to the button to catch the event click, with the .serialize() (if you want to check that you really are recieving the data you can make a die(var_dump($_POST)); in the php and check it in the console with firebug or something like that.) you get the data of your < form> and then you have to send it with a .post() to the other file, in the php you recive the data and When you recive the response you can put it into the table with .html().
So the code that I'm thinking should look like this, uou can change it to make it how you need it, but this can be the base:
JQUERY CODE:
$(document).ready(function(){
$("#yourButtonID").click(function(){
data = $("#yourFormID").serialize();
$.post("yourPHPfileToSearch.php",data,function(dataReturn)){
$("#yourTableID").html(dataReturn);
});
});
});
Let me know if you need more helpe. Regards. Have a nice day.
I'm using twitter's bootstrap to make a WebApp, on one of the features of the App I need to have some modals with form's inside. Those forms will be filled with data through some PHP scripts. I'm having problems using the modal feature with forms, the data for edition is correctly displayed in the fields, but I'can't seem to submit the form.
This is my code:
<a href="#edit_user_<?php echo $row['id_user'] ?>" role='button' data-toggle='modal' data-original-title='Edit User' class='btn btn-small btn-info time-link'><i class='icon-pencil icon-white'></i></a>
<button data-toggle='tooltip' data-original-title='Delete User' class='btn btn-small btn-danger time-link'><i class='icon-trash icon-white'></i></button>
<?php
echo "</td>";
echo "</tr>";?>
<div id="edit_user_<?php echo $row['id_user']; ?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<form action="" method="POST">
<label for="name">Name</label>
<input type="text" name="name" value="<?php echo $row['name']?>"/>
<label for="email">Email</label>
<input type="text" name="email" value="<?php echo $row['email']?>">
<button type="submit" name="update_btn">Submit</button>
<?php
if (isset($_POST['update_btn'])) {
if (isset($_POST['name']) && $_POST['name'] !="") {
if (isset($_POST['email']) && $_POST['email'] !="") {
$qstr_updateuser = "UPDATE `host_register`.`users` SET `name`=".$_POST['name'].", `email`= ".$_POST['email']." WHERE `users`.`id_user` = ".$row['id_user']."";
echo $qstr_updateuser;
$update_user = mysqli_query($dbc,$qstr_updateuser);
}
}
}?>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
And for some reason I can't understand, the browser output's this:
<div class="modal-body">
<form method="POST" action=""></form>
<label for="name">Name</label>
<input type="text" value="Pedro Oliveira" name="name">
<label for="email">Email</label>
<input type="text" value="pedro.oliveira#est.pt" name="email">
<button name="update_btn" type="submit">Submit</button>
</div>
I'm kind of clueless here! Is it a problem with bootstrap or with my code?
Fortunately, I found out that, since the Modal was inside a tag because of a while loop was causing this disturbance, but I could quite understand why that was happening. Fortunately I restarted my work from scratch and decided to create a different while loop to do the same Job, as it seems the problem was really the table tag.
If browser output's is that, you can't submit because submit button is not inside the form tag, even the inputs. Unless that your problem is really that.