i have a form and I need to send value to bootstrap modal in this page.
now i don't know how to type action="" or modal or submit.
thanks.
<form action="">
First name:<br>
<input type="text" name="firstname" value="sirdash">
<br>
Last name:<br>
<input type="text" name="lastname" value="azari">
<br><br>
<input type="submit" value="Submit">
</form>
<!-- Modal -->
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p>write some code html and php and use form post firstname and lastname in this area</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Related
I have a edit page like this
i have a comment button in this page,which is a modal form ,where users can leave their comment
when i submit the Comment form,the entire page is reloading and im losing the edit page content.
Im handling edit page content and comment box in two different forms.
So when i submit the comment form,the modal should open as it is and also the edit page content should not be gone.
This is my modal
<div class="modal modal_outer right_modal fade" id="information_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content ">
<div class="modal-header bg-warning" style="height:50px;padding:10px 5px;font-family:'Delivery';">
<h4 class="modal-title">Comments:</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body get_quote_view_modal_body">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100">
<h5><i class="fas fa-user"></i> User 1</h5>
<small class="ml-auto">1 days ago</small>
</div>
<p>This is for testing.Please ignore this.</p>
</a>
</div>
<form asp-page-handler="SubmitChat">
<div class="form-group mt-2">
<label for="TxtAreaChatBox"><b>Leave Your Comments</b></label>
<textarea asp-for="RequestChatBox.Comments" class="form-control" id="TxtAreaChatBox" rows="4"></textarea>
<input id="hdnCommentReqID" type="hidden" asp-for="RequestChatBox.RequestID" value='#Request.Query["RequestID"]' />
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-window-close mr-2"></i> Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
------------Edited-------------------
<!---COMMENT BOX STARTS HERE-->
<div class="modal modal_outer right_modal fade" id="information_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content ">
<div class="modal-header bg-warning" style="height:50px;padding:10px 5px;font-family:'Delivery';">
<h4 class="modal-title">Comments:</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body get_quote_view_modal_body">
<div class="list-group">
#if (Model.ShowRequestChatBox != null){
#foreach (var item in Model.ShowRequestChatBox)
{
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100">
<h6><i class="fas fa-user"></i> <i>#Html.DisplayFor(modelItem => item.CommentedUser)</i></h6>
<small class="ml-auto">#Html.DisplayFor(modelItem => item.LastModifiedTimeStamp)</small>
</div>
<p>#Html.DisplayFor(modelItem => item.Comments)</p>
</a>
}
}
</div>
<form asp-page-handler="SubmitChat" data-ajax="true" data-ajax-method="post" data-ajax-complete="Completed">
<div class="form-group mt-2">
<label for="TxtAreaChatBox"><b>Leave Your Comments</b></label>
<textarea asp-for="RequestChatBox.Comments" class="form-control" id="TxtAreaChatBox" rows="4"></textarea>
<input id="hdnCommentReqID" type="hidden" asp-for="RequestChatBox.RequestID" value='#Request.Query["RequestID"]' />
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-window-close mr-2"></i> Cancel</button>
<button type="submit" id="BtnChatSubmit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--COMMENT BOX ENDS HERE-->
Javascript
function Completed(event) {
if (event.responseText != "") {
alert("Some Error Has Occured.Please Check Your Entered Values.");
} else {
alert("Your Comment Has Been Added Successfully");
}
}
Thanks,
Teena
I have been trying to make this work but the submit button is not working at all.
The bootstrap modal window I am using is:
<div class="modal fade" id="search" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4><span class="fa fa-search"></span> Search Anything...</h4>
</div>
<form name='searchdata' action="webarch/search.php" method="post" id="form1">
<div class="modal-body">
<div class="input-with-icon success-control">
<input type="text" class="form-control" id="form1Amount" name="searchvalue" placeholder="Search in users or #hashtags"><br/>
<button type="submit" name='user_search' form="form1" id="user_search" value='user' class="btn btn-danger btn-cons"><i class="fa fa-user"></i> User</button>
<button type="submit" name='tag_search' form="form1" value='tag' class="btn btn-default"><i class="fa fa-tag"></i> Tags</button>
</div>
</div>
</form>
</div>
</div>
Whenever I click the submit buttons, nothing happens and the form doesn't post the values.
Let me know how to make this work.
Try this using javascript. It worked for me:
<form name='searchdata' id="search_form" action="search.php" method="get">
<div class="input-with-icon success-control">
<input type="text" class="form-control" id="form1Amount" name="searchvalue" placeholder="Search in users or #hashtags"><br/>
</div>
<button onclick="form_submit()" name='user_search' value='user' class="btn btn-danger"><i class="fa fa-user"></i> User</button>
<button onclick="form_submit()" name='tag_search' value='tag' class="btn btn-default"><i class="fa fa-tag"></i> Tags</button>
</form>
<script type="text/javascript">
function form_submit() {
document.getElementById("search_form").submit();
}
</script>
Submit button is not in the form. Place form="modal-details" to the button, which is form id. You should not have data-dismiss="modal" on submit button, which is a bootstrap handler for closing the modal box. It is working for me.
<div class="modal fade" id="filterModal" 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">Client Filter</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-action="Details" asp-controller="Client" method="get" id="modal-details">
<div class="form-group">
<label for="recipient-name" class="col-form-label">Branch:</label>
<select asp-for="NetworkUnitId" class="custom-select form-control">
<option value="0">All</option>
#foreach (var client in classifierService.GetClients())
{
<option value="#client.Id">#client.Name</option>
}
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" form="modal-details">Search</button>
</div>
</div>
</div>
</div>
You have not mentioned modal-content here. I think that's why you may be getting the error.
<button type="button" class="btn btn-primary" data-target="#search" data-toggle="modal" name="button">modal</button>
<div class="modal fade" id="search" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<div class="modal-title">
<a class="close" data-dismiss="modal">×</a>
<h4><span class="fa fa-search"></span> Search Anything...</h4>
</div>
</div>
<form name='searchdata' action="webarch/search.php" method="post" id="form1">
<div class="modal-body">
<form class="frm-group" action="index.html" method="post">
<div class="modal-content">
<input type="text" name="" value="">
<button type="submit" name='user_search' form="form1" id="user_search" value='user' class="btn btn-danger btn-cons"><i class="fa fa-user"></i> User</button>
<button type="submit" name='tag_search' form="form1" value='tag' class="btn btn-default"><i class="fa fa-tag"></i> Tags</button>
</div>
</form>
</div>
</div>
I have a small contact modal on my website that does not appear. It was working before, but I must have changed something and now it won't work.
I've looked over it multiple times and I can't figure out why it's not working.
HTML:
<span data-toggle="modal">Contact</span>
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<h4>Contact the Developers</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="contact-name" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="contact-email" placeholder="you#example.com">
</div>
</div>
<div class="form-group">
<label for="contact-msg" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea class="form-control" rows="8"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<button class="btn btn-primary" type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
You are missing the data-target attribute. Plus, you shouldn't be linking to a page when you want to open a modal ;)
<span data-toggle="modal" data-target="#contact">Contact</span>
Should fix this. See http://www.bootply.com/UED0aevXsG
I have a simple modal form :
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content modal-lg">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Address Maintenance</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" id="maintainAddress" method='GET' action="test.php">
<div class="form-group">
<label for="addressID" class="col-sm-2 control-label input-sm">Address ID</label>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="addressID" placeholder="Address ID">
</div>
<label for="houseNo" class="col-sm-2 control-label input-sm">House No</label>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="houseNo" placeholder="House No">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default">SAVE</button>
<button type="button" class="btn btn-default" data-dismiss="modal">CANCEL</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
test.php is :
<?
$addressID=$_GET["addressID"];
$houseNo=$_GET["houseNo"];
echo $addressID . " " . $houseNo;
?>
test.php does get invoked on clicking 'SAVE' button but test.php is unable to receive any field values of addressID and houseNo. Error message is "
Notice: Undefined index: addressID in D:\proto\xampp\htdocs\scorecard\test.php on line 3
Notice: Undefined index: houseNo in D:\proto\xampp\htdocs\scorecard\test.php on line 4
I have tried changing GET to POST but still it doesn't work.
The form-elements should have the name-attribute set. So this:
<input type="text" class="form-control input-sm" id="houseNo" placeholder="House No">
Should be changed to:
<input type="text" class="form-control input-sm" id="houseNo" name = "houseNo" placeholder="House No">
I'm trying to get my bootstrap 3.0 form to:
1. Submit the form data when the submit button is clicked AND
2. Open a modal window where I deliver the confirmation message
Right now I can only get one or the other.
Here's my form code:
<form class="form-inline" role="form" action="https://dr113.infusionsoft.com/app/form/process/c187fc8ec993976a148e2c952f89e9fb" method="POST">
<input name="inf_form_xid" type="hidden" value="c187fc8ec993976a148e2c952f89e9fb" />
<input name="inf_form_name" type="hidden" value="Sign-up 50 Design Report" />
<input name="infusionsoft_version" type="hidden" value="1.29.6.37" />
<div class="form-group">
<label class="sr-only" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" name="inf_field_Email">
</div>
<input type="submit" data-target="#myModal" data-toggle="modal" value="Download Your Guide" class="btn btn-primary btn-large" />
</form>
<!-- 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">
<p><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></p>
</div>
<div class="modal-body">
<h4 class="text-center">Share this Guide with your readers</h4>
<p class="text-center">Twitter | Facebook | LinkedIn</p>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- JS Code -->
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>$('#myModal').modal(options)</script>
The HTML,
<form class="form-inline" role="form" action="https://dr113.infusionsoft.com/app/form/process/c187fc8ec993976a148e2c952f89e9fb" method="POST" id="myForm">
<input name="inf_form_xid" type="hidden" value="c187fc8ec993976a148e2c952f89e9fb" />
<input name="inf_form_name" type="hidden" value="Sign-up 50 Design Report" />
<input name="infusionsoft_version" type="hidden" value="1.29.6.37" />
<div class="form-group">
<label class="sr-only" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" name="inf_field_Email">
</div>
<input type="submit" id="sbm" value="Download Your Guide" class="btn btn-primary btn-large" />
</form>
<!-- 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">
<p><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></p>
</div>
<div class="modal-body">
<h4 class="text-center">Share this Guide with your readers</h4>
<p class="text-center">Twitter | Facebook | LinkedIn</p>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
And the SCRIPT,
$("#sbm").click(function(e){
e.preventDefault();
// validate form inputs
// if validated
$("#myForm").submit()
$('#myModal').modal('show');
});
Try like this. Don't forget to include jQuery, Bootstrap and make validations also.
Read http://api.jquery.com/submit/