Bootstrap Modal Form Post/GET doesn't send field values - forms

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">

Related

how to send form data with submit to bootstrap modal

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>

Form submit button not working in bootstrap modal window

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>

submit a form pressing ENTER

I have a submit form, when I click on the button "log in" it works, $_POST['login'] contains something, but when I press ENTER key it is empty.
form
<form class="form-vertical login-form" action="conexio.php" method="post">
<h3 class="form-title">Login to your account</h3>
<div class="alert alert-error hide">
<button class="close" data-dismiss="alert"></button>
<span>Enter any username and password.</span>
</div>
<div class="control-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Username</label>
<div class="controls">
<div class="input-icon left">
<i class="icon-user"></i>
<input class="m-wrap placeholder-no-fix" type="text" autocomplete="off" placeholder="Username" name="username"/>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<div class="controls">
<div class="input-icon left">
<i class="icon-lock"></i>
<input class="m-wrap placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password"/>
</div>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn blue pull-right" name="login">
Login <i class="m-icon-swapright m-icon-white"></i>
</button>
</div>
</form>
Try replacing <button> with <input type='submit'>.

Bootstrap 3 contact modal is not showing up

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

Bootstrap Form Submission and Modal

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/