I have structure like this, generated via php code. Onclick on checkbox I want to fetch the value of input text just above it using jQuery.
<input type="text" class="form-control ans_text" name="C-[Multi_1]-01" value="A" placeholder="..." onblur="this.value=removeSpaces(this.value);" autocomplete="off" onchange="check_blank();" tabindex="1">
</div><div class="form-check form-switch">
<input class="form-check-input checkbox_k" type="checkbox" value="A" id="C-[Multi_1]-01">
<label class="form-check-label" for="C-[Multi_1]-01"><small class="text-muted">Review Later</small></label>
</div>
<hr><div class="form-group">
<label style="font-size:14px;">C-[Multi_1]-<b>02</b></label>
<input type="text" class="form-control ans_text" name="C-[Multi_1]-02" value="AB" placeholder="..." onblur="this.value=removeSpaces(this.value);" autocomplete="off" onchange="check_blank();" tabindex="2">
</div><div class="form-check form-switch">
<input class="form-check-input checkbox_k" type="checkbox" value="AB" id="C-[Multi_1]-02">
<label class="form-check-label" for="C-[Multi_1]-02"><small class="text-muted">Review Later</small></label>
</div>
<hr><div class="form-group">
<label style="font-size:14px;">C-[Multi_1]-<b>03</b></label>
<input type="text" class="form-control ans_text" name="C-[Multi_1]-03" value="ABC" placeholder="..." onblur="this.value=removeSpaces(this.value);" autocomplete="off" onchange="check_blank();" tabindex="3">
</div><div class="form-check form-switch">
<input class="form-check-input checkbox_k" type="checkbox" value="ABC" id="C-[Multi_1]-03">
<label class="form-check-label" for="C-[Multi_1]-03"><small class="text-muted">Review Later</small></label>
</div>
<hr><div class="form-group">
<label style="font-size:14px;">C-[Multi_1]-<b>04</b></label>
<input type="text" class="form-control ans_text" name="C-[Multi_1]-04" value="" placeholder="..." onblur="this.value=removeSpaces(this.value);" autocomplete="off" onchange="check_blank();" tabindex="4">
</div><div class="form-check form-switch">
<input class="form-check-input checkbox_k" type="checkbox" value="" id="C-[Multi_1]-04">
<label class="form-check-label" for="C-[Multi_1]-04"><small class="text-muted">Review Later</small></label>
</div>
<hr>
You can use closest and prev
https://api.jquery.com/closest/
https://api.jquery.com/prev/#prev-selector
$('.checkbox_k').click(function () {
var test = $(this).closest('.form-check').prev('.form-group').find('.ans_text').val();
console.log(test);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control ans_text" name="C-[Multi_1]-01" value="A" placeholder="..." onblur="this.value=removeSpaces(this.value);" autocomplete="off" onchange="check_blank();" tabindex="1">
</div><div class="form-check form-switch">
<input class="form-check-input checkbox_k" type="checkbox" value="A" id="C-[Multi_1]-01">
<label class="form-check-label" for="C-[Multi_1]-01"><small class="text-muted">Review Later</small></label>
</div>
<hr><div class="form-group">
<label style="font-size:14px;">C-[Multi_1]-<b>02</b></label>
<input type="text" class="form-control ans_text" name="C-[Multi_1]-02" value="AB" placeholder="..." onblur="this.value=removeSpaces(this.value);" autocomplete="off" onchange="check_blank();" tabindex="2">
</div><div class="form-check form-switch">
<input class="form-check-input checkbox_k" type="checkbox" value="AB" id="C-[Multi_1]-02">
<label class="form-check-label" for="C-[Multi_1]-02"><small class="text-muted">Review Later</small></label>
</div>
<hr><div class="form-group">
<label style="font-size:14px;">C-[Multi_1]-<b>03</b></label>
<input type="text" class="form-control ans_text" name="C-[Multi_1]-03" value="ABC" placeholder="..." onblur="this.value=removeSpaces(this.value);" autocomplete="off" onchange="check_blank();" tabindex="3">
</div><div class="form-check form-switch">
<input class="form-check-input checkbox_k" type="checkbox" value="ABC" id="C-[Multi_1]-03">
<label class="form-check-label" for="C-[Multi_1]-03"><small class="text-muted">Review Later</small></label>
</div>
<hr><div class="form-group">
<label style="font-size:14px;">C-[Multi_1]-<b>04</b></label>
<input type="text" class="form-control ans_text" name="C-[Multi_1]-04" value="" placeholder="..." onblur="this.value=removeSpaces(this.value);" autocomplete="off" onchange="check_blank();" tabindex="4">
</div><div class="form-check form-switch">
<input class="form-check-input checkbox_k" type="checkbox" value="" id="C-[Multi_1]-04">
<label class="form-check-label" for="C-[Multi_1]-04"><small class="text-muted">Review Later</small></label>
</div>
<hr>
Related
I looked at the other forms on here and I still can't seem to get anywhere for whatever reason. I've tried several different methods that I've found on here and nothing is working >.< Can someone help me align these text boxes? Any help is greatly appreciated!
<h1>Registration</h1>
<div class="containter">
<form name=registration>
Username: <input type="text" name="username" value="">
<br><br> Password: <input type="text" name="password" value="">
<br><br> First Name: <input type="text" name="firstName" value="">
<br><br> Last Name: <input type="text" name="lastName" value="">
<br><br> Date of Birth: <input type="text" name="bDay" value="">
<br><br> Email: <input type="text" name="email" value="">
<br><br> Phone Number: <input type="text" name="firstName" value="">
<br><br>
</form>
</div>
You can just put it in a table:
<body>
<h1>Registration</h1>
<div class="containter">
<form name=registration>
<table style="width:100%">
<tr>
<td>Username: </td><td><input type="text" name="username" value=""></td>
</tr>
<tr>
<td>Password: </td><td><input type="text" name="password" value=""></td>
</tr>
<tr>
<td>First Name:</td><td> <input type="text" name="firstName" value=""></td>
</tr>
<tr>
<td>Last Name: </td><td><input type="text" name="lastName" value=""></td>
</tr>
<tr>
<td>Date of Birth: </td><td><input type="text" name="bDay" value=""></td>
</tr>
<tr>
<td>Email: </td><td><input type="text" name="email" value=""></td>
</tr>
<tr>
<td>Phone Number: </td><td><input type="text" name="firstName" value=""></td>
</tr>
</form>
</div>
You may want to use bootstrap and this is what you could get. Checkout this codepen
Bootstrap is used by a lot of companies and is an easier way to create responsive forms
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<h1>Registration</h1>
<form name=registration>
<div class="containter">
<div class="form-group row">
<label class="col-sm-2 col-form-labe">Username:</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="username" value="" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-labe">Password:</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="password" value="" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-labe">First Name:</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="firstName" value="" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-labe">Last Name:</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="lastName" value="">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-labe">Date of Birth:</label>
<div class="col-sm-10">
<input class="form-control" type="date" name="bDay" value="" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-labe">Email:</label>
<div class="col-sm-10">
<input class="form-control" type="email" name="email" value="">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-labe">Phone Number:</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="firstName" value="" />
</div>
</div>
</div>
</form>
</body>
</html>
I have a dynamic data table with a button that launches a Bootstrap Modal. In the modal is a form. I need the softwareID to pass from the page to the modal to a hidden field in the form. My modal opens and the form displays fine but, the softwareID field is empty. I have searched the Internet trying all types of code and nothing seems to work. Any help would be appreciated. Thank you.
Here is my code so far:
<div class="col">
<!-- Button trigger modal -->
<script type="text/javascript">
$('#upload').on('show.bs.modal', function (event) {
var myVal = $(event.relatedTarget).data('softwareID');
$(this).find(".modal-body").text(myVal);
});
</script>
<?php
if (("".($district_results_private->getColumnVal("paid") ."" == "Y") and "".($logged_user->getColumnVal("tec_member") ."" == "Y")) or ("".$_GET['state'] ."" != "MA" and ("".($logged_user->getColumnVal("tec_member") ."" == NULL) or "".($logged_user->getColumnVal("tec_member") ."" == "N")) and "".$_GET['state'] ."" != "NH" and "".$_GET['state'] ."" != "RI")) { // WebAssist Show If
?> <button data-softwareID="<?php echo($district_results_private->getColumnVal("softwareID")); ?>" type="button" class="btn-sm btn-primary" data-toggle="modal" data-target="#upload">Create New Request</button><?php
} // ("".($district_results_private->getColumnVal("paid") ."" == "Y") and "".($logged_user->getColumnVal("tec_member") ."" == "Y")) or ("".$_GET['state'] ."" != "MA" and ("".($logged_user->getColumnVal("tec_member") ."" == NULL) or "".($logged_user->getColumnVal("tec_member") ."" == "N")) and "".$_GET['state'] ."" != "NH" and "".$_GET['state'] ."" != "RI")
?>
<!-- Modal -->
<form enctype="multipart/form-data" method="post">
<div class="modal fade" id="upload" tabindex="-1" role="dialog" aria-labelledby="uploadlLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="uploadLabel">Create New Request</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Cancel"> <span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<label for="supporting_files">Please fill out the following optional information:</label>
<br><br>
<div class="input-group mb-3 col-sm">
<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon12">Principal/Dean</font></span></div>
<input name="principal_dean" type="text" class="form-control col-md-8" id="principal_dean" value="" date_approved="principal_dean" title="Principal/Dean">
</div>
<div class="input-group mb-3 col-sm">
<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon10">Paid By</span></div>
<input name="paid_by" type="text" class="form-control col-md-8" id="paid_by" value="" title="Paid By">
</div>
<div class="input-group mb-3 col-sm">
<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon11">Cost</span></div>
<input name="cost" type="text" class="form-control col-md-4" id="cost" value="" title="Cost">
</div>
<p> </p>
<div class="input-group mb-3 col-sm">
<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon7"><font color="#339933">Grades</font></span></div>
<label for="grade_level3"><i><font size="-1">Check all that apply</font></i></label>
<table width="60%" class="table table-striped">
<tr>
<td scope="row"><label>
<input type="checkbox" name="grade_level[]" value="K" id="grade_level_0" />
K</label></td>
<td scope="row"><label>
<input type="checkbox" name="grade_level[]" value="1" id="grade_level_1" />
1</label></td>
<td scope="row"><label>
<input type="checkbox" name="grade_level[]" value="2" id="grade_level_2" />
2</label></td>
<td scope="row"><label>
<input type="checkbox" name="grade_level[]" value="3" id="grade_level_3" />
3</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="grade_level[]" value="4" id="grade_level_4" />
4</label></td>
<td><label>
<input type="checkbox" name="grade_level[]" value="5" id="grade_level_5" />
5</label></td>
<td><label>
<input type="checkbox" name="grade_level[]" value="6" id="grade_level_8" />
6</label></td>
<td><label>
<input type="checkbox" name="grade_level[]" value="7" id="grade_level_7" />
7</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="grade_level[]" value="8" id="grade_level_8" />
8</label></td>
<td><label>
<input type="checkbox" name="grade_level[]" value="9" id="grade_level_9" />
9</label></td>
<td><label>
<input type="checkbox" name="grade_level[]" value="10" id="grade_level_10" />
10</label></td>
<td><label>
<input type="checkbox" name="grade_level[]" value="11" id="grade_level_11" />
11</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="grade_level[]" value="12" id="grade_level_12" />
12</label></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div class="input-group mb-3 col-sm">
<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon8"><font color="#339933">Content Area</font></span></div>
<label for="grade_level4"><i><font size="-1">Check all that apply</font></i></label>
<table width="80%" class="table table-striped">
<tr>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="English Language Arts" id="content_area_0" />
English Language Arts</label></td>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Health" id="content_area_1" />
Health</label></td>
</tr>
<tr>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Instructional Technology" id="content_area_2" />
Instructional Technology</label></td>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Library Media" id="content_area_3" />
Library Media</label></td>
</tr>
<tr>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Math" id="content_area_4" />
Math</label></td>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Science" id="content_area_6" />
Science</label></td>
</tr>
<tr>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Physical Education" id="content_area_5" />
Physical Education</label></td>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Visual Performing Arts" id="content_area_8" />
Visual Performing Arts</label></td>
</tr>
<tr>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Social Science" id="content_area_7" />
Social Science</label></td>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Other" id="content_area_10" />
Other</label></td>
</tr>
<tr>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="World Language" id="content_area_9" />
World Language</label></td>
<td width="50%" valign="top"><label>
<input type="checkbox" name="content_area[]" value="Computer Science" id="content_area_10" />
Computer Science</label></td>
</tr>
</table>
</div>
<div class="input-group mb-2 col-sm">
<div class="input-group-prepend"></div>
<input title="Requires Media Release" type="text" class="form-control" value="Requires Media Release?" aria-label="Requires Media Release?">
<div class="input-group-text"> Yes
<input name="media_release" type="checkbox" value="Y" aria-label="Requires Media Release">
</div>
</div><br>
<div class="input-group mb-3 col-sm">
<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon12">Purpose</font></span></div>
<textarea class="form-control col-md-5" aria-label="With textarea" name="purpose"></textarea>
</div><br>
<p><strong>VENDOR CONTACT'S INFORMATION</strong> (optional)</p>
<div class="input-group mb-3 col-sm">
<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon3">Contact Name</span></div>
<input title="Contact" name="contact" type="text" class="form-control col-md-8" id="contact" value="" aria-describedby="basic-addon3" placeholder="">
</div>
<div class="input-group mb-3 col-sm">
<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon4">Contact Email</span></div>
<input title="Email" name="contact_email" type="email" class="form-control col-md-8" id="contact_email" value="" aria-describedby="basic-addon3" placeholder="Enter a valid email address.">
</div>
<div class="input-group mb-3 col-sm">
<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon5">Contact Phone</span></div>
<input name="phone" type="text" class="form-control col-md-8" id="phone" value="" aria-describedby="basic-addon3" placeholder="" title="phone">
</div>
<div class="modal-footer">
<input name="statusID" type="hidden" value="6">
<input name="request_submitted_date" type="hidden" id="request_submitted_date" value="<?php echo date('Y-m-d'); ?>" />
<input type="hidden" name="districtID" id="districtID" value="<?php echo($logged_user->getColumnVal("districtID")); ?>">
<input type="text" name="softwareID" id="softwareID" value="">
<button class="btn btn-info" type="submit" name="submit" id="submit">Save New Request</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div></div>
</form>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<label class="sr-only">Email</label>
<input
type="text"
class="form-control mb-2 mr-sm-2"
placeholder="Email"
/>
<label class="sr-only">Password</label>
<input
type="password"
class="form-control mb-2 mr-sm-2"
placeholder="Password"
/>
<button type="submit" class="btn btn-dark mb-2">Sign In</button>
<div class="form-check mb-2 mr-sm-2">
<input
class="form-check-input"
type="checkbox"
id="inlineFormCheck"
/>
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
</form>
How to push the checkbox and 'Remember me' label to the next line, just below the Email label? I used line break after the Sign In button but it's not working.
One way would be to move checkbox outside .form-inline class, because it uses display: flex and flex-flow: row, which keeps all child elements in a single line.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-inline">
<label class="sr-only">Email</label>
<input
type="text"
class="form-control mb-2 mr-sm-2"
placeholder="Email"
/>
<label class="sr-only">Password</label>
<input
type="password"
class="form-control mb-2 mr-sm-2"
placeholder="Password"
/>
<button type="submit" class="btn btn-dark mb-2">Sign In</button>
</div>
<div class="form-check mb-2 mr-sm-2">
<input
class="form-check-input"
type="checkbox"
id="inlineFormCheck"
/>
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
</form>
I am new to Php and I am having a hard time setting up the form below. When I press send the form is not sent. I'd like the user to be sent on the same page. This is why I used $_SERVER["PHP_SELF"] but apparently somethig isn't working properly. Could you help me out?
<form method="POST" action="<?php echo $_SERVER["PHP_SELF"];?>" id="form_body_container">
<div class="form_icon_container"><img src='img/icon/fun_1200.png' class='icon_form iconq'></div>
<div class='box_form'>
<div class="box_form_inside">
<p class='form_question_title'>Q1 What do you do for fun?</p>
<input class="form_radios" type="radio" name="Q1" value="Play games"><p class='form_options'>Play games</p><br class="br_form">
<input class="form_radios" type="radio" name="Q1" value="Exercise"><p class='form_options'>Exercise</p><br class="br_form">
<input class="form_radios" type="radio" name="Q1" value="Go out"><p class='form_options'>Go out</p><br class="br_form">
<input class="form_radios" type="radio" name="Q1" value="Party"><p class='form_options'>Party</p>
</div>
</div>
<div class="form_icon_container"><img src='img/icon/food_1200.png' class='icon_form iconq'></div>
<div class='box_form'>
<div class="box_form_inside">
<p class='form_question_title'> Q2 Which food do you like?</p>
<input class="form_radios" type="radio" name="Q2" value="Lorem"><p class='form_options'>Starters</p><br class="br_form">
<input class="form_radios" type="radio" name="Q2" value="Lor"><p class='form_options'>Main courses</p><br class="br_form">
<input class="form_radios" type="radio" name="Q2" value="L"><p class='form_options'>Deserts</p><br class="br_form">
<input class="form_radios" type="radio" name="Q2" value="Lore"><p class='form_options'>Snacks</p>
</div>
</div>
<div class="form_icon_container"><img src='img/icon/genie_1200.png' class='icon_form iconq'></div>
<div class='box_form'>
<div class="box_form_inside">
<p class='form_question_title'>Q3 What do you wish?</p>
<input class="form_radios" type="radio" name="Q3" value="Lorem"><p class='form_options'>Money</p><br class="br_form">
<input class="form_radios" type="radio" name="Q3" value="Lor"><p class='form_options'>Become very smart</p><br class="br_form">
<input class="form_radios" type="radio" name="Q3" value="L"><p class='form_options'>Become immortal</p><br class="br_form">
<input class="form_radios" type="radio" name="Q3" value="Lore"><p class='form_options'>Possess super powers</p>
</div>
</div>
<div class="form_icon_container"><img src='img/icon/love_1200.png' class='icon_form iconq'></div>
<div class='box_form'>
<div class="box_form_inside">
<p class='form_question_title'>Q4 Your ideal relationship?</p>
<input class="form_radios" type="radio" name="Q4" value="Lorem"><p class='form_options'>Short but eventful</p><br class="br_form">
<input class="form_radios" type="radio" name="Q4" value="Lor"><p class='form_options'>Long but uneventful</p><br class="br_form">
<input class="form_radios" type="radio" name="Q4" value="L"><p class='form_options'>Not serious</p><br class="br_form">
<input class="form_radios" type="radio" name="Q4" value="Lore"><p class='form_options'>Being single</p>
</div>
</div>
<div class="form_icon_container"><img src='img/icon/work_1200.png' class='icon_form iconq'></div>
<div class='box_form'>
<div class="box_form_inside">
<p class='form_question_title'>Q5 Your ideal work situation?</p>
<input class="form_radios" type="radio" name="Q5" value="Lorem"><p class='form_options'>Making a lot of money</p><br class="br_form">
<input class="form_radios" type="radio" name="Q5" value="Lor"><p class='form_options'>Doing something you like</p><br class="br_form">
<input class="form_radios" type="radio" name="Q5" value="L"><p class='form_options'>Peaceful workplace</p><br class="br_form">
<input class="form_radios" type="radio" name="Q5" value="Lore"><p class='form_options'>Improving your skills</p>
</div>
</div>
<div class="form_icon_container"><img src='img/icon/language_1200.png' class='icon_form iconq'></div>
<div class='box_form'>
<div class="box_form_inside">
<p class='form_question_title'>Q6 What is your mother tongue?</p>
<input class="form_radios" type="radio" name="Q6" value="Lorem"><p class='form_options'>English</p><br class="br_form">
<input class="form_radios" type="radio" name="Q6" value="Lor"><p class='form_options'>French</p><br class="br_form">
<input class="form_radios" type="radio" name="Q6" value="L"><p class='form_options'>Chinese</p><br class="br_form">
<input class="form_radios" type="radio" name="Q6" value="Lore"><p class='form_options'>Other</p>
</div>
</div>
<div class="form_icon_container"><img src='img/icon/world_1200.png' class='icon_form iconq'></div>
<div class='box_form'>
<div class="box_form_inside">
<p class='form_question_title'>Q7 Where do you come from?</p>
<input class="form_radios" type="radio" name="Q7" value="Lorem"><p class='form_options'>USA</p><br class="br_form">
<input class="form_radios" type="radio" name="Q7" value="Lor"><p class='form_options'>UK</p><br class="br_form">
<input class="form_radios" type="radio" name="Q7" value="L"><p class='form_options'>France</p><br class="br_form">
<input class="form_radios" type="radio" name="Q7" value="Lore"><p class='form_options'>Other</p>
</div>
</div>
<button type="button" name="submit" value="Submit" id='button_form'>Submit</button>
<div class='clear'></div>
</form>
$_SERVER["PHP_SELF"]
returns the path relative to the root directory try concatenating $_SERVER["PHP_SELF"] with the root path.
if you are not sure what part is missing just echo $_SERVER["PHP_SELF"] on the top of webpage and see what part of the actual path is missing!
You have to make a "submit" type button instead of your actual button.
Your mistake
You have a normal button <button type="button" name="submit" value="Submit" id='button_form'>Submit</button>
Correction to make
You must have a 'submit' type button, something like <input type="submit" value="Submit" id="button_form" /> or <button type="submit" name="submit" value="Submit" id='button_form'>Submit</button> for example (note the type="submit")
Also, in HTML 5 the "action" attribute in the form is no longer required, it will send the form on the same page :) !
I have created a form and would like to ensure that all the spans line up and are square. But even though all the spans will add up to 12, each row is a different width. Is just the way it is, or am I doing something wrong?
<div class="container ">
<form class="well form-inline">
<div class="controls controls-row">
<label class="span1" for="input01">
Prefix
</label>
<input type="text" class="span1" id="input01" placeholder="Dr."><label class="span1" for="input02">
First Name
</label>
<input type="text" class="span3" id="input02" placeholder="John">
<label class="control-label span1" for="input03">
last Name
</label>
<input type="text" class="span3" id="input03" placeholder="Doe">
<label class="control-label span1" for="input04">
Suff
</label>
<input type="text" class="span1" id="input04" placeholder="Jr.">
</div>
<div class="controls controls-row">
<label class="span1" for="input01">
Company
</label>
<input type="text" class="span5" id="input01" placeholder="Sample LLC">
<label class="span1" for="input02">
Title
</label>
<input type="text" class="span5" id="input02" placeholder="Director of Samples">
</div>
<div class="controls controls-row">
<label class="span1" for="input01">
Address 1
</label>
<input type="text" class="span5" id="input01" placeholder="Address Line 1">
<label class="span1" for="input02">
Address 2
</label>
<input type="text" class="span5" id="input02" placeholder="Address Line 2">
</div>
<div class="controls controls-row">
<label class="span1" for="input01">
Cntry
</label>
<select class="input-medium span2 countries" data-country="US"></select>
<label class="span1" for="input01">
City
</label>
<input type="text" class="span2" id="input02" placeholder="City">
<label class="span1" for="input02">
St/Prv
</label>
<select class="input-medium span2 states" data-country="US" data-state="CA"></select>
<label class="span1" for="input01">
Zip
</label>
<input type="text" class="span2" id="input02" placeholder="City">
</div>
<div class="controls controls-row">
<label class="span1" for="input01">
Email
</label>
<input type="text" class="span5" id="input01" placeholder="you#yourdomain.com">
<label class="span2" for="input02">
Confirm Email
</label>
<input type="text" class="span4" id="input02" placeholder="you#yourdomain.com">
</div>
<div class="controls controls-row">
<label class="span1" for="input01">
Phone
</label>
<input type="text" class="span3" id="input01" placeholder="">
<label class="span1" for="input02">
Cell
</label>
<input type="text" class="span3" id="input02" placeholder="">
<label class="span1" for="input02">
Fax
</label>
<input type="text" class="span3" id="input02" placeholder="">
</div>
</form>
</div>
screen shot here: http://www.flickr.com/photos/92503149#N07/8409032538/in/photostream
You only posted a snippet, so I do not know how you integrat the form in the rest of your page, but a row-fluid could help:
<form class="well form-inline row-fluid">
I tried it out, looks much nicer already.
More hints:
some labels are missing the class control-label. This is overall important due to the line-height adjustment that control-label does.
depending on the complete width of the form, some labels might not fit into span1 on one line (was the case in my quick tests)
and a general design hint: the last line with 3 label/input pairs breaks the layouting a bit. Usually, you try to stick to certain vertical positioning.
Hope this helps