I am trying to submit my modal title as post data, however it isn't being sent.
I have given the element a name attribute. Elements in the modal body are submitting as I would expect. Trying to submit the element whose name is "editModalTitle" below
HTML:
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<form action="/editItem" method="post" id ="editModalForm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" name="eModalTitle"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Quantity:</label>
<div class="row">
<div class="col">
<select class="form-control" id="qtSelect">
<option>Set to</option>
<option>Add</option>
<option>Subtract</option>
</select>
</div>
<div class="col" id= "qtD">
<input type="text" class="form-control" id="qt" name="quantityTB" placeholder="Quantity">
</div>
</div>
</div>
<div class="form-group" id="prD">
<label>Price:</label>
<input type="text" class="form-control" id="pr" name="priceTB" placeholder="Enter new price here...">
</div>
<div class="form-group">
<label>Notes:</label>
<div class="row">
<div class="col">
<select class="form-control" id="ntSelect">
<option>Set notes to:</option>
<option>Add to notes:</option>
</select>
</div>
<div class="col">
<input type="text" class="form-control" id="ntInput" name="notesTB"placeholder="Enter notes here...">
</div>
</div>
</div>
<div class="form-group">
<label>Location:</label>
<input type="text" class="form-control" id="loc" name="locationTB" placeholder="Enter new location here...">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="eSvBtn" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
Form data here
Edit 1: Added full html for modal.
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<form action="/editItem" method="post" id ="editModalForm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" name="eModalTitle"></h5>
<!-- hidden value for modal title to post -->
<input type="hidden" id="Modal_title_to_post" name="Modal_title_to_post" value="eModalTitle">
<!-- hidden value for modal title to post -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Quantity:</label>
<div class="row">
<div class="col">
<select class="form-control" id="qtSelect">
<option>Set to</option>
<option>Add</option>
<option>Subtract</option>
</select>
</div>
<div class="col" id= "qtD">
<input type="text" class="form-control" id="qt" name="quantityTB" placeholder="Quantity">
</div>
</div>
</div>
<div class="form-group" id="prD">
<label>Price:</label>
<input type="text" class="form-control" id="pr" name="priceTB" placeholder="Enter new price here...">
</div>
<div class="form-group">
<label>Notes:</label>
<div class="row">
<div class="col">
<select class="form-control" id="ntSelect">
<option>Set notes to:</option>
<option>Add to notes:</option>
</select>
</div>
<div class="col">
<input type="text" class="form-control" id="ntInput" name="notesTB"placeholder="Enter notes here...">
</div>
</div>
</div>
<div class="form-group">
<label>Location:</label>
<input type="text" class="form-control" id="loc" name="locationTB" placeholder="Enter new location here...">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="eSvBtn" class="btn btn-primary">Save changes</button>
</div>
</div>
</form>
</div>
</div>
Updated code with hidden value for the modal title :)
Related
I have a bootstrap datetimepicker in my form. But when i select datetime, input box size keeps changing. After input it, i can't change the datetime with datetimepicker. I think, it's because datatble.min.js conflict with datetimepicker.js. But, but i still haven't solved it. Any help would be appreciated.
Before
Before add datetimepicker
Add
Add Date
Add Time
After
Input box size changed
Modal
<div id="modal_form" class="modal fade" role="dialog" aria-hidden="true" aria labelledby="formModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="formModalLabel"></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="form" role="form" action="<?= base_url("catalog/insert") ?>" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label class="col-md-3 control-label">Start Date</label>
<div class="col-md-9">
<div class="input-group date form_datetime form_datetime bs-datetime">
<input type="text" size="16" class="form-control" name="start">
<span class=" input-group-addon">
<button class="btn default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">End Date</label>
<div class="col-md-9">
<div class="input-group date form_datetime form_datetime bs-datetime">
<input type="text" size="16" class="form-control" name="end">
<span class="input-group-addon">
<button class="btn default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Descirption</label>
<div class="col-md-9">
<textarea class="form-control" rows="3" name="desc" id="desc" val=""></textarea>
<span class="help-block"></span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn grey-salsa btn-outline" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn green btn-primary" data-dismiss="modal" type="submit" id="btnsave">Save</button>
</div>
</div>
</div>
</div>
I suggest you use some special libraries which are made for this. https://www.daterangepicker.com/
https://flatlogic.com/blog/best-javascript-datepicker-libraries/
I'm having problem with my code because in mobile view the input text fields doesn't have readonly attribute but when I open it in mobile view the fields becomes readonly. Here is the code:
<div class="modal fade" id="modal-transaction" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
<div class="modal-dialog" role="document">
<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="exampleModalLabel1">Pay</h4>
</div>
<div class="modal-body block5">
<form method="post" id="myLevel">
<div class="form-body">
<div class="row">
<div class="col-sm-12 col-xs-12 col-lg-12">
<div class="form-group">
<label class="control-label">Amount to Pay</label>
<p class="text-danger">You'll be charge 5% of every Credit/Debit Card/E-Wallets Transaction. </p>
<input type="number" name="payment" class="form-control" id="payment" placeholder="Amount to Pay" data-error="Required!" required/>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class="form-actions">
<button type="button" id="save-transaction" class="btn btn-success"> <i class="fa fa-check"></i> Pay</button>
</div>
</form>
</div>
</div>
</div>
Good day pips. I am struggling on printing after I click create.
the ui for creating and printing
When I click the create button, it will add to the database and print a number or ticket. All I know is dompdf but that one is downloading pdf
<div class="modal fade" id="callModal" tabindex="-1" role="dialog" aria-labelledby="callModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="callModalLabel">New Call</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<!--start of the form-->
<form id="form-data" class="form-horizontal" method="POST" action="{{ route('call.store') }}">
{{ csrf_field() }}
<div class="row form-group">
<div class="col-md-12">
<input type="hidden" class="form-control" id="trans-id" name="trans_id" readonly>
</div>
<div class="col-md-12">
<label>Transaction Type:</label>
<input type="text" class="form-control" id="trans-name" readonly>
</div>
<div class="col-md-12">
<input type="hidden" id="called" name="called" value="NO">
</div>
<div class="col-md-12">
<label>Department:</label>
<select class="form-control" id="dept_id" name="dept_id" required>
<option value="" data-hidden="true"
selected="selected">-- Select Department --
</option>
#foreach($departments as $department)
<option value= "{{ $department->id }}">
{{ $department->dept_name }}
</option>
#endforeach
</select>
</div>
<div class="col-md-12">
<label>RFID</label>
<input type="text" id="rfid" class="form-control" name="rfid" required>
</div>
<div class="col-md-12">
<label>Student First Name</label>
<input type="text" id="firstname" class="form-control" name="firstname" required="">
</div>
<div class="col-md-12">
<label>Student Last Name</label>
<input type="text" id="lastname" class="form-control" name="lastname" required>
</div>
<div class="col-md-12">
<label>Amount</label>
<input type="number" id="amount" class="form-control" name="amount" step=".01" required>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success btn-fill pull-right" id="form-button-add" name="form-button-add" onclick="window.print()">
CREATE <!--CREATE, SAVE AND PRINT THE TICKET-->
</button>
<button data-dismiss="modal" aria-hidden="true" class="btn btn-basic pull-right" style="margin-right: 2%">
CANCEL
</button>
<div class="clearfix"></div>
</form>
<!-- end of the form -->
</div>
</div>
</div>
</div>
I already code the javascript onclick in my create button. My problem is it prints the current page of the ui. I just want to print the details such as C-1, counter 1. Another problem is that is show the preview but it doesn't add on the database.
I have the following modal and when user clicks on Submit, I want to redirect to another page.
My HTML Code:
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Add new card</h4>
</div>
<form action="addCard" method="post" id="addcard" class="form-horizontal" role="form">
<div class="modal-body" style="height: 190px;">
<div class="form-group" style="height: 30px;">
<label for="title" class="col-md-3 control-label">Title</label>
<div class="col-md-9">
<input type="text" class="form-control" name="title" placeholder="Enter Card title here...">
</div>
</div>
<div class="form-group" style="height: 30px; margin-bottom:30px;">
<label for="title" class="col-md-3 control-label">Description</label>
<div class="col-md-9">
<textarea class="form-control" name="desc" placeholder="Enter Card description here..."></textarea>
</div>
</div>
<div class="form-group">
<label for="priority" class="col-md-3 control-label">Priority</label>
<div class="col-md-9">
<select name="priority" class="form-control">
<option value="critical">Critical</option>
<option value="high">High</option>
<option value="normal">Normal</option>
<option value="low">Low</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="formSubmit" type="submit">Submit</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
app.js:
app.post('/addCard', routes.addCard);
index.js:
exports.addCard = function (req,res)
{
res.render('index');
}
When I click on 'Submit' button of the modal, no action is happening. Please advice. Thanks.
in
<button type="button" class="btn btn-primary" id="formSubmit" type="submit">Submit</button>
you have type=button ,and then type=submit
remove type=button
I have got the following HTML code. I have no idea why the POST is sent with no parameters (I checked the parameters are not being sent with the firefox debugger):
<div class="modal fade"id="myModal"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">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title"id="myModalLabel">Add opinion</h4>
</div>
<form role="form" action="api/sendEntry" method="post">
<div class="modal-body">
<div class="form-group">
<label for="user_message">The following: </label>
<input type="text" class="form-control" id="user_message" placeholder="In next...">
<label for="user_date">Until: </label>
<input type="date" class="form-control" id="user_date">
</div>
</div>
<div class="modal-footer">
<button type="submit"class="btn btn-default">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close </button>
</div>
</form>
</div>
</div>
</div>
I suspect the nested input fields may have something to do with it, but I need to have them nested to have proper formatting.
You need to assign a name to your input fields. For example:
<input type="text" class="form-control"
id="user_message" name="user_message" placeholder="In next..." />
Form data is posted as name/value pairs. If you don't provide name attributes, nothing will be posted.
As a side note, I would also recommend you to correctly close your input tags.
<div class="modal fade"id="myModal"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">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title"id="myModalLabel">Add opinion</h4>
</div>
<form role="form" action="api/sendEntry" method="post">
<div class="modal-body">
<div class="form-group">
<label for="user_message">The following: </label>
<input type="text" class="form-control" id="user_message" placeholder="In next..." name="user_message">
<label for="user_date">Until: </label>
<input type="date" class="form-control" id="user_date" name="user_date">
</div>
</div>
<div class="modal-footer">
<button type="submit"class="btn btn-default">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close </button>
</div>
</form>
</div>
</div>
Receive your data with $_POST['user_date'] and $_POST['user_message']