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>
Related
I have a scrollable modal but it doesn't scrollable if I put a form inside it, how to make it scrollable?
<div class="modal fade" id="assignModal" data-coreui-backdrop="static" data-coreui-keyboard="false" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<form id="form-assignModal" method="post" autocomplete="off" novalidate="novalidate">
<div class="modal-header bg-warning">
<h5 class="modal-title" id="staticBackdropLabel">Ticket assignment</h5>
</div>
<div class="modal-body">
<div class="form-group">
<label for="input-assignment_to">Assign to</label>
<select class="form-control select2-single" id="assignment_to" name="assignment_to" data-placeholder="Select an user" required></select>
</div>
...
</div>
</form>
</div>
</div>
</div>
This works fine for me (default bootstrap scrolling modal):
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"><form id="form-assignModal" method="post" autocomplete="off" novalidate="novalidate">
<div class="modal-header bg-warning">
<h5 class="modal-title" id="staticBackdropLabel">Ticket assignment</h5>
</div>
<div class="modal-body">
<div class="form-group">
<label for="input-assignment_to">Assign to</label>
<select class="form-control select2-single" id="assignment_to" name="assignment_to" data-placeholder="Select an user" required=""></select>
</div>
...
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
It could be the modal-dialog-centered that is messing things up for you
I am using bootstrap and my modal won't show up the way it is supposed to, I have tried using the form that is inside the modal on the page, and there it shows up correctly but inside the modal, the form is also displayed as deformed, I have already tried solutions to similar questions here but they didn't work. The modal looks like this,
Expected to look something like this but without the footer:
The bootstrap code:
<!-- Modal -->
<div class="modal fade" id="exampleModal" 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">
<div class="container">
<div>
<div class="styled-input wide">
<input type="email" id="email" required />
<label>Email</label>
</div>
</div>
<div>
<div class="styled-input wide">
<input type="number" id="phone" required />
<label>Phone Number</label>
</div>
</div>
<div>
<div class="styled-input wide">
<input type="number" id="monthlyTurnOver" required />
<label>Monthly Turnover</label>
</div>
</div>
<div>
<div class="styled-input wide">
<input type="text" id="purpose" value="B2B collection" required />
<label>Purpose</label>
</div>
</div>
<div class="col-md-12 d-flex justify-content-center">
<input class="enalo-small-btn" style="height: 2.4375rem; margin-bottom: .4rem;" type="submit" value="Submit" onclick="contactUs()">
</div>
</div>
</div>
</div>
</div>
</div>
I am not sure what I did differently but I copied code from the modal I had built earlier on the same site which made it appear a lot better, than I overrode some styles and now it's visible properly, Thank you for your help,
The new code:
<div class="modal fade" style="font-size: 14px;" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog d-flex justify-content-center" role="document">
<div class="modal-content px-2" style="max-width: 300px;" id="modal">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<div class="ml-auto">
<button type="button" class="close" data-dismiss="modal" id="crossclose" aria-label="Close" style="width: 83px;
height: 50px;
margin-top: 0px;
border: none;">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<div class="modal-body">
<div class="container">
<div>
<div class="styled-input wide">
<input placeholder="Email" type="email" id="email" required />
</div>
</div>
<div>
<div class="styled-input wide">
<input placeholder="Phone Number" type="number" id="phone" required />
</div>
</div>
<div>
<div class="styled-input wide">
<input placeholder="Monthly Turnover" type="number" id="monthlyTurnOver" required />
</div>
</div>
<div>
<div class="styled-input wide">
<input placeholder="Purpose" type="text" id="purpose" value="B2B collection" required />
</div>
</div>
<div class="col-md-12 d-flex justify-content-center">
<button class="enalo-small-btn" style="height: 2.4375rem; margin-bottom: .4rem;" type="submit" onclick="contactUs()">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
Looks like this:
I tried to make a modal form using bootstrap (horizontal form) and the field are shown under the labels. Any idea how can I fix it so the input text boxes will be at the right of the labels and not under them?
I've been trying all day to get it aligned with the boxes but to no avail. Pls help.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Update Staff</button>
<div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body form-horizontal">
<form class="form-horizontal" id="step2">
<div class="form-group">
<label for="name" class="col-sm-2 control-label" >Name</label>
<div class="col-sm-10">
<input id="name" class="form-control" type="text" placeholder="Enter Your Full Name" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email-Id</label>
<div class="col-sm-10">
<input id="email" class="form-control" type="email" placeholder="Enter Your Email-Id" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="Submit" class="btn btn-primary">Done</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="form-group d-flex align-items-baseline">
you can add them to the form-group class.
Also, label and input have to be inline-block to come together. the form-control class in bootstrap makes the display block of the given element. also you can use this. here I just added the form-group row class :
<div class="form-group row"> // just added the row class
<label for="name" class="col-sm-2 control-label" >Name</label>
<div class="col-sm-10">
<input id="name" class="form-control" type="text" placeholder="Enter Your Full Name" />
</div>
</div>
Try the following code. it will work for you. You haven't inserted the row class in order to get the two fields in the same line and you will need to you col-md classes in order to fit your message box in medium-size screens. You can use flex-box classes in order to center the text as bellow.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Update Staff</button>
<div
class="modal fade bd-example-modal-lg"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body form-horizontal">
<form class="form-horizontal" id="step2">
<div class="form-group row">
<label
for="name"
class="col-sm-2 control-label d-flex align-items-center justify-content-center"
>Name</label
>
<div class="col-sm-10">
<input
id="name"
class="form-control"
type="text"
placeholder="Enter Your Full Name"
/>
</div>
</div>
<div class="form-group row">
<label
for="email"
class="col-sm-2 control-label d-flex align-items-center justify-content-center"
>Email-Id</label
>
<div class="col-sm-10">
<input
id="email"
class="form-control"
type="email"
placeholder="Enter Your Email-Id"
/>
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary mr-2"
data-dismiss="modal"
>
Close
</button>
<button type="Submit" class="btn btn-primary">Done</button>
</div>
</form>
</div>
</div>
</div>
</div>
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 :)
I have two bootstrap modal forms on the same html document.
I want to get these forms to work independently, however, form 1 does not
submit and form2 submits the data entered in both forms.
How do I get these forms to work independently without interfering with the actions
of one another?
Here is the HTML:
<!------------------------form1----------------------------------->
<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="orderLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="panel panel-primary">
<div class="panel-heading">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="panel-title" id="registerLabel"><span class="glyphicon glyphicon-info-sign"></span> Register</h4>
</div>
<form id="form1" action="register.php " method="post" accept-charset="utf-8">
<div class="modal-body" style="padding: 5px;">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
<input class="form-control" name="name" placeholder="Name" type="text" required />
</div>
</div>
<div class="panel-footer" style="margin-bottom:-14px;" data-target="form1" >
<input type="submit" class="btn btn-success" value="Send"/>
<!--<span class="glyphicon glyphicon-ok"></span>-->
<input type="reset" class="btn btn-danger" value="Clear" />
<!--<span class="glyphicon glyphicon-remove"></span>-->
<button style="float: right;" type="button" class="btn btn-default btn-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!------------------------form2----------------------------------->
<div class="modal fade" id="buy" tabindex="-1" role="dialog" aria-labelledby="buyLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="panel panel-primary">
<div class="panel-heading">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="panel-title" id="buyLabel"><span class="glyphicon glyphicon-info-sign"></span> Buy</h4>
</div>
<form id="form2" action="buy.php " method="post" accept-charset="utf-8">
<div class="modal-body" style="padding: 5px;">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
<input class="form-control" item="item" placeholder="Name" type="text" required />
</div>
</div>
<div class="panel-footer" style="margin-bottom:-14px;" data-target="form1" >
<input type="submit" class="btn btn-success" value="Send"/>
<!--<span class="glyphicon glyphicon-ok"></span>-->
<input type="reset" class="btn btn-danger" value="Clear" />
<!--<span class="glyphicon glyphicon-remove"></span>-->
<button style="float: right;" type="button" class="btn btn-default btn-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
I can't see the forms ending somewhere.
Please close form before starting another so that it will be independent.