I am a noob in web development so I am stuck at getting data from a modal and saving it to database.
I have made model with bootstrap. Below is the code of the modal
code of modal
<form name="form" action="post" method="">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add part</button>
</form>
<div id="myModal" class="modal fade" 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">Add parts</h4>
</div>
<div class="modal-body">
<input type="text" name="field1" placeholder="Part Name" id="pName" />
<br>
<br>
<input type="text" name="field2" placeholder="Piece Code" />
<br>
<br>
<input type="text" name="field3" placeholder="Piece Price" />
<br>
<br>
<input type="text" name="field4" placeholder="Quatity" />
<br>
<br>
<input type="text" name="field5" placeholder="Total" />
<br>
<br>
<input type="text" name="field6" placeholder="Comments" />
<br>
<br>
<input type="text" name="field7" placeholder="Shipped" />
<br>
<br>
</div>
<div class="modal-footer">
<button onclick="saveit()" type="button" name="saveBtn" class="btn btn-default" data-dismiss="modal">save</button>
</div>
</div>
</div>
</div>
What I am trying to accomplish is get the data entered in this popup modal save it in database by pressing save button in the modal and clear the pop so that user can enter data again. I want to save the data by using PHP Query .Kindly suggest me a way to get it done . I have seen a lot of tutorials and almost every question on stack overflow as well but I am unable to get it done.
You can use ajax to do that; Try this
Your contact page
<div id="contact">
<h3>Contact Us For Any Query</h3>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add part</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script>
$(function(){
$(document).on("click", ".button", function(e) {
e.preventDefault();
var info = $("#form").serialize();
$.ajax({
type: "POST",
url: "add.php",
data: info,
success: function(result){
//$("#form")[0].reset();
$('#notification').html(result);
}
});
e.preventDefault();
});
});
</script>
<!--div for notification -->
<div id="notification"></div>
<div id="form" class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add parts</h4>
</div>
<div class="modal-body">
<input type="text" name="field1" placeholder="Part Name" id="pName" />
<br>
<br>
<input type="text" name="field2" placeholder="Piece Code" />
<br>
<br>
<input type="text" name="field3" placeholder="Piece Price" />
<br>
<br>
<input type="text" name="field4" placeholder="Quatity" />
<br>
<br>
<input type="text" name="field5" placeholder="Total" />
<br>
<br>
<input type="text" name="field6" placeholder="Comments" />
<br>
<br>
<input type="text" name="field7" placeholder="Shipped" />
<br>
<br>
</div>
<div class="modal-footer">
<button type="button" name="saveBtn" class="btn btn-default button" data-dismiss="modal">save</button>
</div>
</div>
</div>
</div>
</div>
And the PHP page i.e. add.php for adding the data
<?php
//connection to your database
//remember to change the host, dbname, and password to yours,
$db = new PDO('mysql:host=localhost;dbname=databasename;charset=UTF-8',
'root',
'',
array(PDO::ATTR_EMULATE_PREPARES => false,
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
?>
<?php
if (isset($_POST['field1'])) {
$field1 = $_POST['field1'];
$field2 = $_POST['field2'];
$field3 = $_POST['field3'];
$field4 = $_POST['field4'];
$field5 = $_POST['field5'];
$field6 = $_POST['field6'];
$field7 = $_POST['field7'];
$stmt = $conn->prepare("INSERT INTO `table` (field1,field2,field3,field4,field5,field6,field7)
VALUES (:field1, :field2, :field3, :field4, :field4, :field5, :field6, :field7)");
$stmt->bindParam(':field1', $field1);
$stmt->bindParam(':field2', $field2);
$stmt->bindParam(':field3', $field3);
$stmt->bindParam(':field4', $field4);
$stmt->bindParam(':field5', $field5);
$stmt->bindParam(':field6', $field6);
$stmt->bindParam(':field7', $field7);
$stmt->execute();
echo 'added';
}
?>
Hope my answer would be of some help to you:
Keep form inside modal, and give a php file(ex: test.php) as action.
Here is the code I would suggest you to try:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add part</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<form action="test.php" method="POST">
<!-- Modal content-->
</form>
</div>
</div>
Write a test.php file and retrieve values using $_POST method.
Related
I'm trying to get a value from the database: SenderDriver->total_trips.
And all great, but I want to get a specific id so I have to put it into onClick(), then it set the value from the database variable: SenderDriver->total_trips.
This is the code
<span onclick="readd( amounts{{$referral_detail->SenderDriver->total_trips}});"
data-target="#addMoneyModel" data-toggle="modal" id="{{$referral_detail->GetterDriver->id }}">
<a data-original-title="Add Money" data-toggle="tooltip" id="{{ $referral_detail->GetterDriver->id }}" data-placement="top" class="btn text-white btn-sm btn-success menu-icon btn_detail action_btn">
<i class="fa fa-money-bill"></i>
</a>
</span>
Now I want the val to change a specific text when it's clicked using the above code. Btw all this is in .blade.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
function readd(){
$("input:text").val(amounts);
}
</script>
I tried a lot nothing working any help?
The input
<div class="modal fade text-left" id="addMoneyModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="modal-title text-text-bold-600" id="myModalLabel33">#lang('admin.message200')</label>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{ route('merchant.AddMoney') }}" method="post">
#csrf
<div class="modal-body">
<label>#lang('admin.message203'): </label>
<div class="form-group">
<select class="form-control" name="payment_method" id="payment_method" required>
<option value="1">#lang('admin.message201')</option>
<option value="2">#lang('admin.message202')</option>
</select>
</div>
<label>#lang('admin.message204'): </label>
<div class="form-group">
<input type="text" name="receipt_number" value="0"
class="form-control" required>
</div>
<label>#lang('admin.message205'): </label>
<div class="form-group">
<input type="text" id="amount" name="amount"
class="form-control" required>
<input type="hidden" name="add_money_driver_id" id="add_money_driver_id">
</div>
<label>#lang('admin.message206'): </label>
<div class="form-group">
<input class="form-control" id="title1" rows="3" name="description"
value="Refer Gift">
</div>
</div>
<div class="modal-footer">
<input type="reset" class="btn btn-outline-secondary btn-lg" data-dismiss="modal" value="close">
<input type="submit" class="btn btn-outline-primary btn-lg" value="Add">
</div>
</form>
</div>
</div>
</div>
Not 100% sure what you're trying to accomplish, but here are my thoughts anyway.
In your onclick implementation you provide an argument to the function readd, which you're not using/defining in your javascript code at the bottom.
It appears that you try to push the value into the input text field of your bootstrap modal with the id="amount"
Here is the improved JavaScript section:
<script type="text/javascript">
function readd(amount){
$("#amount").val(amounts);
}
</script>
I'm not sure if the bootstrap toggle possibly overrides the onclick event of the span element. If that's the case you need to approach that issue a bit different
<script type="text/javascript">
function readd(amount){
$("#amount").val(amounts);
// Do something with the id
const some_important_id = $(this).attr('data-id');
console.log(some_important_id);
$('#addMoneyModel').modal('show');
}
</script>
and remove the modal stuff from your Span element.
<span onclick="readd( {{$referral_detail->SenderDriver->total_trips}});" data-id="{{$referral_detail->GetterDriver->id }}">
I am creating an attendance system for our staff system programming in PHP and JS.
I have a button called ADD - to add new record
and EDIT button to edit the record inserted
I need to do something so when staff will record time-start by clicking ADD button, I want to hide time-end and shows when click only EDIT button >
HOW to do that ?
$(document).ready(function() {
$('#add_button').click(function() {
$('#product_form')[0].reset();
$('.modal-title').text("Add record");
$('#action').val("Add");
$('#operation').val("Add");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Add record form in fact it same when click edit same form but I need to hide time-end when click ADD .
<div id="productModal" class="modal fade">
<div class="modal-dialog">
<form method="post" id="product_form">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">ADD NEW RECORD</h4>
</div>
<div class="modal-body" dir="rtl">
<label>STAFF NAME</label>
<input type="text" name="attendance_name" id="attendance_name" class="form-control" value="<?php echo $_SESSION['user']['fname'];?> <?php echo $_SESSION['user']['lname'];?>" />
<br />
<label>ID NO</label>
<input type="text" name="attendance_username" id="attendance_username" class="form-control" value="<?php echo $_SESSION['user']['username'];?>" />
<br />
<label>TIME LOGIN </label>
<input type="text" value="<?php echo " " . date("h:i:s ");
?>" name="attendance_start" id="attendance_start" class="form-control" />
<br />
<label>TIME LOGOFF </label>
<h1>Here I need to hide input for add record and show when click button EDIT</h1>
<br />
</div>
<div class="modal-footer">
<input type="hidden" name="attendance_id" id="attendance_id" />
<input type="hidden" name="operation" id="operation" />
<input type="submit" name="action" id="action" class="btn btn-success" value="Add" />
</div>
</div>
</form>
</div>
</div>
I have a form in a modal. When I press the submit button the php file runs with the following errors:
Notice: Undefined index: phone1 in C:\xampp\htdocs\site\bank.php on line 2
Notice: Undefined index: charge1 in C:\xampp\htdocs\site\bank.php on line 4
Here is the PHP code in bank.php:
<?php
echo $_POST["phone"];
echo "</br>";
echo $_POST["charge"];
?>
Here is the modal contents:
<!-- Modal content-->
<div class="modal fade" id="register" role="dialog">
<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">Modal title here</h4>
</div>
<div class="modal-body">
<form id="modal-form" class="form-horizontal" method="POST" action="bank.php">
<div class="form-group col-md-12">
<div class="form-group">
<div class="col-xs-6" style="float:right;">
<label>phone numer:</label>
<input id="phone" type="text" class="form-control" name="phone" value="pre filled value" disabled/>
<span id='display'></span>
</div>
<div class="col-xs-6" style="float:left;">
<label>charge:</label>
<input style="font-size:17px; font-weight:bold;" id="charge" type="text" class="form-control" name="charge" value="some other prefilled value" disabled/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<button class="btn btn-danger btn-default pull-right" data- dismiss="modal" style="margin-left:10px;">close</button>
<button type="submit" class="btn btn-success"> submit </button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
modal footer
</div>
</div>
</div>
</div>
I would be thankful if some one help me figure out what;s wrong with this
Not relevant anymore, OP edited his question. see edit for relevant answer!
the name of the post variable is defined by the nameattribute of the input, not the id.
therefore in your bank.php you will have $_POST['phone1'] and $_POST['charge1']available.
you can always just var_dump($_POST); to see all available post variables.
Edit: Also, disabled inputs are not being sent on submit. You can work around that fact by just adding a second hidden input for each disabled one like that:
<!-- Modal content-->
<div class="modal fade" id="register" role="dialog">
<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">Modal title here</h4>
</div>
<div class="modal-body">
<form id="modal-form" class="form-horizontal" method="POST" action="bank.php">
<div class="form-group col-md-12">
<div class="form-group">
<div class="col-xs-6" style="float:right;">
<label>phone numer:</label>
<input id="phoneDisabled" type="text" class="form-control" name="phoneDisabled" value="pre filled value" disabled/>
<input id="phone" type="hidden" class="form-control" name="phone" value="pre filled value" disabled/>
<span id='display'></span>
</div>
<div class="col-xs-6" style="float:left;">
<label>charge:</label>
<input style="font-size:17px; font-weight:bold;" id="chargeDisabled" type="text" class="form-control" name="chargeDisabled" value="some other prefilled value" disabled/>
<input style="font-size:17px; font-weight:bold;" id="charge" type="hidden" class="form-control" name="charge" value="some other prefilled value" disabled/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<button class="btn btn-danger btn-default pull-right" data- dismiss="modal" style="margin-left:10px;">close</button>
<button type="submit" class="btn btn-success"> submit </button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
modal footer
</div>
</div>
</div>
</div>
Edit2: Or, just change disabled attribute to readonly
The name in your $_POST variable and the html input name are both different. Please try to make them the same and hopefully, your code will work.
Change name=phone1 to name=phone or whatever.
You have set both of those inputs as disabled. Forms by default won't post those. You probably need to grab the vars with JavaScript, or remove the disabled attributes, again, with JavaScript.
I have a modal which is supposed to pop up when I click the button. However, when I click the button; nothing happens:
Heres what I did:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class = "row text-center">
<input class="btn btn-primary" id="submit-button" name="submit-button" type="submit" value="Save">
<input class="btn btn-danger" id="reset-button" type="reset" value="Reset">
<div class="well well-large">
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add transaction</h3>
</div>
<div class="modal-body">
<form class="transaction" name="transaction">
<input type="hidden" name="trans_date" value=<?php echo date("Y-m-d H:i:s");?>><br>
<label class="label" for="trans_payment_mode">Payment mode</label><br>
<select class="form-control" name="trans_payment_mode" id="payment_mode" class="required">
<option value="">Select</option>
<option value="cash">Cash</option>
</select><br>
<label class="label" for="trans_amt">Transaction amount</label><br>
<input type="text" name="trans_amt" class="input-xlarge"><br>
<label class="label" for="trans_details">Transaction details</label><br>
<textarea name="trans_details" class="input-xlarge"></textarea>
<input type="hidden" name="trans_cust_id" value=<?php echo $cid;?>><br>
<input type="hidden" name="trans_admin_person" value=<?php echo $aid;?>><br>
</form>
</div>
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send" id="submit_trans">
Cancel
</div>
</div>
</div>
<div id="thanks">
<p><a data-toggle="modal" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p>
</div>
</div>
</body>
I have the above modal containing add-transaction which will populate a modal. Please help.
CSS needs a bit work but you are missing a data_target class in your button. Add a div with an id and another div with the class modal-dialog.
Also change the line
<div id="form-content" class="modal hide fade in" style="display: none;">
to
<div id="modal-content">
Other code changes
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
...
<p><a data-toggle="modal" data-target="#myModal" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p>
You can see it in the fiddle below
https://jsfiddle.net/4peLpye5/1/
EDIT - There is no php in the JSFiddle
It's a combination of a few issues.
No need for the hide class on the modal
No need for the display:none style on the modal
Missing id of add-transaction on the modal
I have an HTML form and on Clicking the button would generate a Modal window.The Button is as follows.
<button type="button" class="btn" id="gs_one" data-toggle="modal" data-target="#BASIC">Get Started</button>
The modal type that launched would be the "basic" type. Modal is actually another form, which would then be submitted to another PHP page via a POST method. The Modal is as below.
<div class="modal fade" id="BASIC" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Header</h4>
</div>
<div class="modal-body">
<form class="contact-work-form2 mar" id="contact-form" action="" method="post">
<div class="text-input">
<div class="float-input">
<input type="text" placeholder="Name" id="name2" name="name" required>
</div>
<div class="float-input2">
<input type="text" placeholder="Email" id="mail2" name="mail" required>
</div>
</div>
<div class="text-input">
<div class="float-input">
<input type="text" placeholder="Phone" id="phone" name="phone" required>
</div>
<div class="float-input2">
<input type="text" placeholder="Company" id="company" name="company" required>
</div>
</div>
<div class="text-input">
<div class="float-input1">
<input type="text" required name="country" id="country" placeholder="Country">
</div>
</div>
<input type="submit" value="Submit" class="submit_contact main-form" name="mailing-submit">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I can POST to the PHP page. However, while posting, I also need to pass a variable which has the value or the ID of button that launched the modal.
you can access the button id by
$(document).ready(function(){
$('.btn').click(function(){
var a=$(this).attr('id');
alert(a);
});
});
Try following code,
When you click on the button it will fetch corresponding id of the modal.
That id will be added as hidden field into the form.
When you submit the form, you can access the data in server-side.
<script type="text/javascript">
function appendHiddenDiv(){
var modalNameWithHash = $(this).attr('data-target');
var modalName = modalNameWithHash.substring(1)
$('<input>').attr({
type: 'hidden',
name: 'plan',
value: modalName
}).appendTo(modalNameWithHash+' '+'form');
}
$(document).on("click",'button[data-toggle="modal"]', appendHiddenDiv);
</script>
I hope this helps.