I've tried this but still the submit button won't work. I've recycled my code from the previous PHP I've worked but this time it isn't working, it just redirect me to my index.php page.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form method="post" id="form1" action="actions/add_lab_test.php" class="form-horizontal row-border">
<div class="modal-body">
<h4>Add lab test</h4>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Result</label>
<div class="col-sm-6">
<textarea class="form-control autosize" name="c" id="c"></textarea>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">HIDDEN ID</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="a" id="a" value="<?php echo $a; ?>">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
I've took the advice of wrapping the form from the content/body but still no luck, it isn't proceeding to the designated action.
Here is the button to trigger the modal
<div class="col-sm-2">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Add Lab Test</a>
</div>
Even if I remove the <form></form> tags it still redirecting to the index.php
Related
While submitting a form on a pop-up modal the page gets expired on laravel, I am sending a post request.
Can someone please help? i have added a csrf token too..
View Blade
<div id="reviewModal-{{$ecgparticipant->getoriginal()['id']}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" >
</div>
<div class="modal-body">
<form id="ecgreviewform" class="ecgreview" action="{{ route('ecg.reviewstore') }}" method="POST">
#csrf
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="tesdt" id="exampleInputEmail1" aria-describedby="emailHelp" value="{{auth()->user()->name}}">
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-md-6">
<button type="button" style = "width:50%;" class="btn btn-primary btn-outline-blue btn-close-modal" data-dismiss="modal">Cancel</button>
</div>
<input type="hidden" name="participant_id" value="{{$ecgparticipant->getoriginal()['id']}}">
<div class="col-md-6">
</div>
</div>
<button type="submit" form="ecgreviewform" style = "width:50%;" name="submit" value="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
Route page
Route::get('ecg/pendingreview', 'EcgReviewController#index')->name('ecg.pendingreview');
Route::post('ecg/pendingreview', 'EcgReviewController#store')->name('ecg.reviewstore');
is there any reason
assign in your form 'method' like this:
<form method="post">
#csrf <!-- {{ csrf_field() }} -->
</form>
try with
{{ csrf_field() }}
Here's the button that brings up the modal:
<li>Practice Schedule</li>
When I hit Practice Schedule button, the background fades out but the modal window does not show up.
Here's the modal code. Can you please see whats wrong with my code here?
<!-- Modal Practice Schedule Block Begin -->
<div class="modal" id="PrctcSched" tabindex="-1" role="dialog" aria-labelledby="lblPrctcHdr" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<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="lblPrctcHdr">
My Availability
</h4>
</div>
<!-- Modal Body Block Begin -->
<div class="modal-body">
<form class="form-horizontal" role="form" action="#" method="POST">
<div class="form-group">
<div class="col-sm-10">
<input type="checkbox" class="form-control" name="chbxDt1" Id="chbxDt1" value="chbxDt1chkd" class="col-sm-2 control-label">
<label for="chbxDt1">1</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="checkbox" class="form-control" name="chbxDt2" Id="chbxDt2" value="chbxDt2chkd" class="col-sm-2 control-label">
<label for="chbxDt2">2</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="checkbox" class="form-control" name="chbxDt3" Id="chbxDt3" value="chbxDt3chkd" class="col-sm-2 control-label">
<label for="chbxDt3">3</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Update My Availability</button>
</div>
</div>
</form>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"> Close </button>
</div>
</div>
<!-- Modal Body Block End -->
</div>
</div>
</div>
I just put your code into a page i am working on and it works fine. you can add the "fade" class to it to ensure that the modal fades in rather than just appearing, but the link triggered the modal for me.
<div class="modal fade" id="PrctcSched"...
Check your version of bootstrap and ensure that you have jquery,bootstrap.js AND bootstrap.css in your document head.
I want to submit data in database using bootstrap modal popup but when i press submit buttons nothing happens and i think that page which is used to submit a record is also not called. Below is the code of modal popup: i have called addProducts.php page but it is not called on click of a submit buttom please help to solve it. Thanks..
<div class="modal fade" id="myModal">
<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 Products Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<form role="form" name="Insertdb" method="post" action="Insert_code/add-products.php">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodName" placeholder="Enter product Name">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Price</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodPrice" placeholder="Enter product price">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Type</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productType" placeholder="Enter product type">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Description</label>
</div>
</div>
<div class="col-lg-6">
<textarea class="form-control" name="productDesc" rows="3"></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input name="button1" type="submit" class="btn btn-primary">
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
<?
require_once('user.inc.php');
$Users = new Users();
$name=$_REQUEST['prodName'];
$price=$_REQUEST['prodPrice'];
$type=$_REQUEST['productType'];
$description=$_REQUEST['productDesc'];
$query="INSERT INTO tbl_product(`product_name`,`product_desc`,`product_price`,`product_type`)
VALUES('".$name."','".$description."','".$price."','".$type."')";
if(!executeQuery($query))
{
echo '<script language="javascript">';
echo 'alert("An error occured. Please try again")';
echo '</script>';
else
{
echo '<script language="javascript">';
echo 'alert("Record Successfully Inserted")';
echo '</script>';
}
?>
I am using Twitter Bootstrap for both tabs and modals. I have two tabs that use identical code. In the first tab the modals work perfectly, but in the second tab the screen will darken but the modal does not appear.
here is my code for calling the modal (same code used in both tabs) in list.php:
<a type="button" href="edit.php?id='.$id.'" data-target="#edit_modal" data-toggle="modal">Edit</a>
here is my modal in list.php
<div class="modal hide fade" id="edit_modal" 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>Edit Testimonials</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
</div>
and here is edit.php where the true body of the modal is
<div id="edit_modal">
<div class="modal-body">
<?php echo ($name_error != "") ? $name_error : ""; ?>
<form class="form-horizontal" action="edit.php?id=<?php echo $id; ?>" method="post">
<div class="control-group">
<label class="control-label">Testimonial</label>
<div class="controls">
<textarea class="input-xlarge" name="body" cols=100 rows=5><?php echo $testimonial['body']?></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label">Author</label>
<div class="controls">
<textarea class="input-xlarge" name="author" cols=100 rows=5><?php echo $testimonial['author']?></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Update Testimonial" name="submit-form" />
Close
</div>
</form>
</div>
I am using TB 2.0 on a signup page. I have added links at the bottom of the signup page, to allow users to refer to our terms etc.
This is a snippet of the markup I am using:
<div class="container">
<!-- First 2 rows are modal elements -->
<div class="row">
<div class="span12">
<div id="userAgreement" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="userAgreementLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="userAgreementLabel">User Agreement</h4>
</div>
<div class="modal-body">
<p><?php echo file_get_contents(url_for('#legal',true)); ?></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="privacyPolicy" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="privacyPolicyLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="privacyPolicyLabel">Privacy Policy</h4>
</div>
<div class="modal-body">
<p><?php echo file_get_contents(url_for('#privacy', true)); ?></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
<h3 align="center">Sign up to Foobar</h3>
<br />
<div class="row">
<div class="span5 offset1 gray-1px-rh-border">
<form class="form-horizontal" action="#" method="post">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputUsername">Username</label>
<div class="controls">
<input type="text" id="inputUsername" placeholder="Username">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputConfirmPassword">Confirm Password</label>
<div class="controls">
<input type="password" id="inputConfirmPassword" placeholder="ConfirmPassword">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="chk-agree">Agree Terms*
</label>
<button type="submit" class="btn btn-success" id="signup-button">Get Access</button>
</div>
</div>
</form>
</div>
<div class="span4">
<div class="container shift-right">
</div>
</div>
</div>
<br />
<div class="row">
<div class="span10 offset1">
<div class="sign-up-agreement">
<small>*By signing up, you are indicating that you have read, understood and agree to our
<a id="lpl1" href="#userAgreement" data-toggle="modal">user agreement</a> and
<a id="lpl2" href="#privacyPolicy" data-toggle="modal">privacy policy</a>.
</small>
</div>
</div>
</div>
</div>
The popup dialog is temporarily shown (for approx one second), before it disappears, it appears to be scrolling from bottom to up (I had to do this a few times, since it happens so quickly). The dialog appears to scroll from bottom to up, the last thing I see is the dialog box header with the title, and then it disappears, and the page remains darkened - until I click on the screen.
[[Edit]]
After further investigation using Firebug, I have narrowed down the problem to be something to do with javascript. I notice that the #display# style attribute applied to the element is (very briefly), set to block, and then very quickly (for some unknown reason), the #display# attribute is set to none - this then causes the dialog to disappear.
I manually set the display attribute to block in the firebug console, and the popup dialog appeared, and behaved as normal. So the question is this: what is causing the display attribute to be reset to 'none' after about 1 second?
[[Edit 2]]
When i replace the file_get_content() function call with simple text like 'hello world' and 'hello 2' for the two popups, they work as expected (i.e. correctly). So it is definitely something to do with the HTML text being returned in the get_file_content() function.
Any help appreciated.
Sometimes this is caused by including jQuery more than once make sure this is not the case.
Also, you can manually change the position of the modal to ensure that it starts on the screen. You just need to alter the margins. Take a look at my tutorial: change twitter bootstrap position I hope this helps.
In the end, I solved this by placing the content retrieved by file_get_contents() in an iframe. Don't know if that is there is a better way, but this is the only thing I found that works.