I'm using modal from bootstrap. The modal opens but it doesn't close either with the cross or close button.
This is what I have on my index.php file:
<div id="editar" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
</div>
And this is the modal which is in a separated .php file:
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Editar Accion</h4>
<button type="button" class="close" data-dismiss="modal" id="cerrar">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="hidden" name="editar" value="<?php echo $id; ?>">
<div class="form-group">
<label for="item_name">Accion:</label>
<input type="text" class="form-control" id="accion" value="<?php echo $accion; ?>">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary mb-3" name="update" id="btn-editar"><span class="glyphicon glyphicon-edit"></span> Editar</button>
<button type="button" class="btn btn-secondary mb-3" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span> Cancelar</button>
</div>
</div>
</div>
I have to keep them in two files.
If you noticed my comment, I have told you its headache to use two different pages. Also it is not recommended way.
I have created a button for you and on the button click the modal shows up with cancel button that goes away when you click it. It is the way exactly you wanted afterwards.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Click Me
</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Editar Accion</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<input type="hidden" name="editar" value="<?php echo $id; ?>">
<div class="form-group">
<label for="item_name">Accion:</label>
<input type="text" class="form-control" id="accion" value="<?php echo $accion; ?>">
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary mb-3" name="update" id="btn-editar"><span class="glyphicon glyphicon-edit"></span> Editar</button>
<button type="button" class="btn btn-secondary mb-3" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span> Cancelar</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hope this helps.
I think it is better to make use of JQuery so that you can have more control over what happens (e.g: clear fields, etc) on the modal on close.
$(document).on('click','#button_id',function(e){
e.preventDefault();
//you can clear fields first if you need to
$('#accion').val('');
$('#modal_id').hide(); //close modal
});
Please remember to include the file into the index.php. Keeping modal in separate file will help you reuse the same somewhere in your code, that is if you keep your modal code dynamic enough.
Related
I have the following database:
| fund_name | fund_description | amount_received | actual_amount
Bootstrap With PHP :
<div class="card-deck">
<?php
$sql = "SELECT * FROM fundraiser;";
$result = mysqli_query($conn,$sql);
while($row = mysqli_fetch_assoc($result)){
echo '<div class="card">
<img class="card-img-top" >
<div class="card-body text-center">
<h5 class="card-title">'.$row['fund_name'].'</h5>
<div class="card-text">
<p>'.$row['fund_description'].'</p>
<h6>Amount:'.$row['actual_amount'].'</h6>
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width:'.$row['amount_received'].'%;"aria-
valuenow="0" aria-valuemin="0" aria-
valuemax="1000">
</div>
</div>
<div class="mt-2">
<button type="button" class="btn btn-md btn-primary" data-
toggle="modal" data-target="#exampleModalCenter"> Donate
</button>
</div>
</div>
</div>
</div>';
}
?>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1"
role="dialog" aria-labelledby="exampleModalCenterTitle" aria-
hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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>
<div class="form-group">
<label for="formGroupExampleInput">Enter Amount</label>
<input type="number" class="form-control" id="formGroupExampleInput"
placeholder="Enter Amount">
</div>
<div class="form-group">
<input type="submit" class="form-control btn btn-primary btn-small"
id="formGroupExampleInput" >
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Here In my above code im obtaining data from database and displaying the fundraisers using the bootstrap 4. Each fundraisers is displayed using the cards and each card has a donate button. Donate button links to a modal which has a form to pay amount to fundraisers.
My Question is how to differentiate the donate button of a particular card that payment is going on for that so that i can store 'amount_received' field in database for a particular row of fundraiser?
You can use data-id to store the id of each fundraiser. When a user click on the button to open the modal, you will get the value of data-id. In the modal form I add <input type="hidden" name="fundid" id="fundid"> to store the data-id. Try the following code:
Here is a replicate of your data in php array:
<?php
$fundraiser = array(
array('id'=>1,'fundname'=>"Anyname","description"=>"About fund","actual_amount"=>50.00,'amount_receive'=>40),
array('id'=>2,'fundname'=>"Anyname2","description"=>"About fund3","actual_amount"=>100.00,'amount_receive'=>90),
array('id'=>3,'fundname'=>"Anyname3","description"=>"About fund3","actual_amount"=>20.00,'amount_receive'=>10)
);
?>
The HTML:
<!DOCTYPE html>
<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/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="card-deck">
<?php
foreach($fundraiser as $key=>$val):
echo '<div class="card">
<img class="card-img-top" >
<div class="card-body text-center">
<h5 class="card-title">'.$val['fundname'].'</h5>
<div class="card-text">
<p>'.$val['description'].'</p>
<h6>Amount:'.$val['actual_amount'].'</h6>
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width:'.$val['amount_receive'].'%;"aria-
valuenow="0" aria-valuemin="0" aria-
valuemax="1000">
</div>
</div>
<div class="mt-2">
<button type="button" class="btn btn-md btn-primary fundid" data-toggle="modal" data-target="#exampleModalCenter" data-id="'.$val['id'].'"> Donate
</button>
</div>
</div>
</div>
</div>';
endforeach; ?>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form method="POST" action='updatedb.php'>
<div class="modal-body">
<div class="form-group">
<label for="formGroupExampleInput">Enter Amount</label>
<input type="number" name="amount" class="form-control" id="formGroupExampleInput" placeholder="Enter Amount">
</div>
<input type="hidden" name="fundid" id="fundid">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="form-control btn btn-primary btn-small" id="formGroupExampleInput">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
To get data-id and store in the form
<script type="text/javascript">
$('.fundid').on('click', function (e) {
$('#fundid').val($(this).attr("data-id"));
});
We don't want to leave trace of the data-id when we close the modal dialog
$('#exampleModalCenter').on('hidden.bs.modal', function () {
$('#fundid').val('');
});
</script>
When you submit the form, it will submit the data to updatedb.php. In updatedb.php, to get the form data:
the content of updatedb.php
<?php
$fundid = $_POST['fundid'];
$amount = $_POST['amount'];
echo "ID=>".$fundid."<br> Amount=>".$amount;
?>
I have the following form code:
<div class="modal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<form action="/admin/menuContent.php?id=<?php echo $menuId ?>" method="post">
//few inputs...
<div class="col-sm-1">
<input id="editButton" class="btn btn-success editButton" type="submit" value="Save" data-toggle="modal" data-target="#myModal" role="button">
</div>
<div class="col-sm-1">
Cancel
</div>
</form>
And my problem is that after click save button the modal appears but just for a second or less, what can be a problem? Thanks for helps! :)
that error come just because of url passed in form action.try to figure out that.whether you have passed correct url or not.
i have tried this.
<!DOCTYPE html>
<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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container">
<div class="modal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="col-sm-1">
<input id="editButton" class="btn btn-success editButton" type="submit" value="Save" data-toggle="modal" data-target="#myModal" role="button">
</div>
</div>
</div>
</body>
</html>
You should not trigger form submit and modal with a single submit button.When you trigger the submit button the modal disappears and direct to menuContent.php.You should use some client side programs to pass the parameters into the php.
When you click the save button, the form was submitted.
So this goes to action page. (action="/admin/menuContent.php?id=")
Please refer this and solve your problem: https://www.w3schools.com/bootstrap/bootstrap_modal.asp
I have a form that I submit using a bootstrap button, I have a modal that I link to in order to print using another button. I want the printer button to save the form like the submit button does, but instead of redirecting to another page, it should redirect to the print modal (So the print contents are up to date).
This is my code I have that submits/prints currently. If I make changes to a loaded form, the print button will only print the prior form.
<!-- Save Project -->
<div class='form-group text-center'>
<input data-loading-text="Saving Project..." type="submit" name="invoice_btn" value="Save Project" class="btn btn-success submit_btn invoice-save-btm" />
<!-- Print Project -->
<div style="position:absolute; left:500px; top:200px;"><a title="Print Invoice" class="print_class" role="menuitem" tabindex="-1" data-uuid="<?php echo isset($invoice['Invoice']['uuid']) ? nl2br( $invoice['Invoice']['uuid'] ): ''; ?>" href="javascript:;"> <i class="fa fa-print fa-4x"></i><br>Print</a></div>
</div>
</div>
Modal Print :
<!-- Modal Print -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width:900px;height:auto">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Print Proposal</h4>
</div>
<div class="modal-body" id="print_content">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="printBtn" onclick="printInvoice('print_content')" class="btn btn-primary" data-loading-text="Printing...">Print</button>
</div>
</div>
</div>
</div>
Hello,
I created a bootstrap 3 modal and it works on my mobile device but on my desktop when you click the button it does not open the modal.
I've tried resizing the modal box even adjusting it's zindex but those did not fix the problem.
Does anyone know what the issue is i'm having?
<div class="container-fluid formbox ">
<div id="cageModal" class="modal fade" role="dialog" class="col-sm-10 col-sm-offset-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Cage The Great</h4>
</div>
<div class="modal-body">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/VqghSmwdnpg" frameborder="no" allowfullscreen></iframe>
<button type="button" class="btn btn-default" data-dismiss="modal">See More</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid formbox ">
<div class="col-xs-12 col-sm-12">
<h3>Get Familiar with the artists below.</h3>
<div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3">
<div> <button type="button" class="btn btn-block btn-info btn-lg" data-toggle="modal" data-target="#cageModal">Cage The Great</button>
</div>
</div>
</div>
</div>
Non-working code on jfiddle
Your code is correct. But your bootstrap references (CDN) are not.
replace your references to Bootstrap with the latest. Or better yet, use Bootstrap locally and never touch it!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Here is your broken jfiddle, now working
First let me start by saying I know this is going to be a really basic question. I am new to PHP and struggling a little with this task.
Intro:
I am making a little app on a local WAMP server to manage a basic client database and also manage all my VHOST enntries for development. I know there are security issues with editing Windows Hosts file as I'm about to request but this will be strictly a local site.
I have the following PHP
<?php include 'template-parts/header.php' /** calling of header(to make it uniform in all template file) **/?>
<div class="container home">
<h3> Delete </h3>
<div class="btn-group">
<button data-toggle="modal" class="btn btn-primary btn-sm" name="hostsedit" data-target="#modalhost"><span class="glyphicon glyphicon-user"></span> Edit Windows Host File</button>
<button data-toggle="modal" class="btn btn-primary btn-sm" name="vhostsedit" data-target="#modalvhost"><span class="glyphicon glyphicon-trash"></span> Edit VHOST.conf</button>
</div>
<?php
// configuration
$url = 'delete.php';
$file = 'C:/Windows/System32/Drivers/etc/hosts';
// check if form has been submitted
if (isset($_POST['text']))
{
// save the text contents
file_put_contents($file, $_POST['text']);
// redirect to form again
header(sprintf('Location: %s', $url));
printf('Moved.', htmlspecialchars($url));
exit();
}
// read the textfile
$text = file_get_contents($file);
?>
<!-- Modal 1 -->
<div class="modal fade" id="modalhost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">Delete Host File Entry</h4>
</div><!-- /modal-header -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-12">
<!-- HTML form -->
<form action="" method="post">
<textarea name="text" class="form-control" rows="15"><?php echo htmlspecialchars($text) ?></textarea><br />
<p><strong>NOTE:</strong> Ensure only lines similar to <kbd>127.0.0.1 www.dev.xxxxx</kbd> are deleted</p>
</div>
</div>
</div>
</div><!-- /modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
<!-- Modal 2 -->
<div class="modal fade" id="modalvhost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">Delete VHOST File Entry</h4>
</div><!-- /modal-header -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-12">
<!-- HTML form -->
<form action="" method="post">
<textarea name="text" class="form-control" rows="15"><?php echo htmlspecialchars($text) ?></textarea><br />
</div>
</div>
</div>
</div><!-- /modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
</div>
</div>
</body>
</html>
The first modal works perfectly, I click the button <button data-toggle="modal" class="btn btn-primary btn-sm" name="hostsedit" data-target="#modalhost"><span class="glyphicon glyphicon-user"></span> Edit Windows Host File</button> and this opens up the Bootstrap Modal, presents the Windows Host file within the textarea and allows me to add and delete at will, I click the modal's save button and it works.
The question I need to acheive this same action with the second modal window however this one needs would need to edit C:/wamp/bin/apache/apache2.4.9/conf/extra/httpd-vhosts.conf'.
I simply don't know how to duplicate the first correctly working PHP to now also work with the VHOST editing requirement.
Any help or pointers would be greatly appreciated.
EDIT
Hi Neal, I tried putting your solution into place and got some errors that I'm not entirely sure how to get past...
I currently have this in my PHP file:
<div class="container home">
<h3> Delete </h3>
<div class="btn-group">
<button data-toggle="modal" class="btn btn-primary btn-sm" name="hostsedit" data-target="#modalhost"><span class="glyphicon glyphicon-user"></span> Edit Windows Host File</button>
<button data-toggle="modal" class="btn btn-primary btn-sm" name="vhostsedit" data-target="#modalvhost"><span class="glyphicon glyphicon-trash"></span> Edit VHOST.conf</button>
</div>
<?php
// check if form has been submitted
if (!empty($_POST['hostinput'])){ //i prefer to use empty rather than isset you can read about it
// configuration
$url = 'delete.php';
$file = 'C:/Windows/System32/Drivers/etc/hosts';
// check if form has been submitted
if (isset($_POST['hostinput']))
{
// save the text contents
file_put_contents($file, $_POST['hostinput']);
// redirect to form again
header(sprintf('Location: %s', $url));
printf('Moved.', htmlspecialchars($url));
exit();
}
// read the textfile
$text = file_get_contents($file);
}
else if(!empty($_POST['vhostinput'])){
// configuration
$url = 'delete.php';
$file = 'C:/wamp/bin/apache/apache2.4.9/conf/extra/httpd-vhosts.conf';
// check if form has been submitted
if (isset($_POST['vhostinput']))
{
// save the text contents
file_put_contents($file, $_POST['vhostinput']);
// redirect to form again
header(sprintf('Location: %s', $url));
printf('Moved.', htmlspecialchars($url));
exit();
}
// read the textfile
$text = file_get_contents($file);
}
?>
<!-- Modal 1 -->
<div class="modal fade" id="modalhost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">Delete Host File Entry</h4>
</div><!-- /modal-header -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-12">
<!-- HTML form -->
<form action="" method="post">
<textarea id="hostinput" name="hostinput" class="form-control" rows="15"><?php echo htmlspecialchars($text) ?></textarea><br />
<p><strong>NOTE:</strong> Ensure only lines similar to <kbd>127.0.0.1 www.dev.xxxxx</kbd> are deleted</p>
</div>
</div>
</div>
</div><!-- /modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
<!-- Modal 2 -->
<div class="modal fade" id="modalvhost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">Delete VHOST File Entry</h4>
</div><!-- /modal-header -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-12">
<!-- HTML form -->
<form action="" method="post">
<textarea id="vhostinput" name="vhostinput" class="form-control" rows="15"><?php echo htmlspecialchars($text) ?></textarea><br />
</div>
</div>
</div>
</div><!-- /modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
</div>
And the error I get on the second call is:
Notice: Undefined variable: text in C:\Users\xxx\xxx\xxx\devlogs\delete.php on line 116
<button class="btn btn-primary btn-sm" data-target="#myModal1" data-toggle="modal" type="button"> Edit</button> <!-- first button for the first modal-->
<button class="btn btn-primary btn-sm" data-target="#myModalA1" data-toggle="modal" type="button"> Comment</button> <!-- second button for the second modal-->
<div id="myModal1" class="modal fade bs-example-modal-lg" aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1">
<div id="myModalA1" class="modal" aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1">
This code seems similar to your code but im not too sure if there is some differences (this one i am 100% sure that its working perfectly fine).
Now for your question where you want to submit the form for the second modal. There are many ways to handle this ( like using ajax and saving everything without the need of forms or refreshing the page.) but since you said you are new to php and you already started in this way so... what i can suggest is that....
1) for every input you have you must give it an id and name. so your inputs should look like this (you can set the same name and id for the same field but every field must be unique):
<textarea class="form-control" rows="15" id="hostinput" name="hostinput"></textarea>
<textarea class="form-control" rows="15" id="vhostinput" name="vhostinput"></textarea>
2)Then in your php code you type:
// check if form has been submitted
if (!empty($_POST['hostinput'])){ //i prefer to use empty rather than isset you can read about it
// save the text contents
file_put_contents($file, $_POST['text']);
// redirect to form again
header(sprintf('Location: %s', $url));
printf('Moved.', htmlspecialchars($url));
exit();
}
esleif(!empty($_POST['vhostinput'])){
//SAVE THE VHOST
}
This way what you are doing is whenever a submit button pressed you try and check the two values and save them again both of them.
WARNING: this method is a bit dangerous.... lets say that the user edited the first text but then he clicked cancel.... then edited the second text then he clicked submit for the second text.... you will actually save both of them....
The way i usually do this is by using javascript and ajax so i dont have to refresh the page also...
Hope i helped....