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 :) !
Related
I have a form that requires validation and works fine for text and textareas but not for inline radio buttons.
<form class="needs-validation" novalidate method="POST">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" required>
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" required>
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" required>
<label class="form-check-label" for="inlineRadio3">3</label>
</div>
<div class="invalid-feedback">
Radio button is required.
</div>
<button class="btn btn-primary" type="submit">Validate</button>
</form>
I see that the controls and labels turn red when submitted but the text in the invalid-feedback is not there. I also want it to be aligned all the way to the left.
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>
I'm setting up a contact form and I want this form to be centered on my page. But I don't want the full width (col-md-12) of the page. I only want the width of a col-md-6 at the center of the page. Problem is that because I select col-md-6, the form display on the left hand side of the page. How can I center it?
HTML:
<div class="container">
<div class="row">
<div class="col-md">
<form action="contact" method="post"> {{--action = where the data must go--}}
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="mobile">Mobile Nr:</label>
<input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
</div>
<div class="form-group">
<label for="message">Your message...</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</form>
</div>
</div>
</div>
The easiest way I see is adding two more divisions with col-md-3 on either side of your form div like this:
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<form action="contact" method="post"> {{--action = where the data must go--}}
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="mobile">Mobile Nr:</label>
<input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
</div>
<div class="form-group">
<label for="message">Your message...</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</form>
</div>
<div class="cold-md-3">
</div>
</div>
Try adding "m-auto" class in your col-md-6 div. Like this:
<div class="container">
<div class="row">
<div class="col-md-6 m-auto">
<form action="contact" method="post"> {{--action = where the data must go--}}
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input t`enter code here`ype="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="mobile">Mobile Nr:</label>
<input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
</div>
<div class="form-group">
<label for="message">Your message...</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</form>
</div>
</div>
I am trying to design a form but it is not being well formed. I need to make it responsive. But checkbox is not aligned well in horizontal.
<form class="ng-pristine ng-scope ng-pending">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input_force"><i class="ti-pin"></i></span>
<input type="text" id="mapInput" class="form-control input_force_text_edit ng-pristine ng-untouched ng-isolate-scope ng-pending ng-empty" value="" g-places-autocomplete="" placeholder="Please enter drop off address WITHOUT Apt/Suite number" ng-model="order.drop_off_address"
name="drop_off_address" autocomplete="off" validator="required" aria-invalid="false"><span></span>
<input type="text" id="drop_off_address_line_2" class="form-control ng-pristine ng-untouched ng-valid ng-empty" placeholder="Apartment/Suite etc." ng-model="order.drop_off_address_line_2" name="drop_off_address_line_2" autocomplete="off" aria-invalid="false">
</div>
</div>
<div class="row">
<div class="form-group" style="display: block; width: 100%;">
<div class="col-sm-8">
<div class="input-group" style="width: 100%;">
<span class="input-group-addon"><i class="ti-mobile"></i></span>
<input type="text" id="message_for_driver" class="form-control " placeholder="Message For Driver" ng-model="order.message_for_driver" name="message_for_driver" autocomplete="off" aria-invalid="false" style=" width: 100%;">
</div>
</div>
<div class="col-md-3">
<div class="checkbox">
<label >
<input type="checkbox" style="" id="is_ok_to_leave_at_the_door" class="form-control ng-pristine ng-untouched ng-valid ng-empty" checked="checked" ng-model="order.is_ok_to_leave_at_the_door"> Ok to leave at the door
</label>
</div>
</div>
</div>
</div>
</form>
you can checkout my code over this URL.
https://jsfiddle.net/ahmeric/Lrgdk6uh/
here is the solution. You can see the related part in this URL.
https://jsfiddle.net/ahmeric/Lrgdk6uh/5/
<form class="ng-pristine ng-scope ng-pending">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input_force"><i class="ti-pin"></i></span>
<input type="text" id="mapInput" class="form-control input_force_text_edit ng-pristine ng-untouched ng-isolate-scope ng-pending ng-empty" value="" g-places-autocomplete="" placeholder="Please enter drop off address WITHOUT Apt/Suite number" ng-model="order.drop_off_address"
name="drop_off_address" autocomplete="off" validator="required" aria-invalid="false"><span></span>
<input type="text" id="drop_off_address_line_2" class="form-control ng-pristine ng-untouched ng-valid ng-empty" placeholder="Apartment/Suite etc." ng-model="order.drop_off_address_line_2" name="drop_off_address_line_2" autocomplete="off" aria-invalid="false">
</div>
</div>
<div class="row mb-5">
<div class="form-group">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="input-group">
<span class="input-group-addon"><i class="ti-mobile"></i></span>
<input type="text" id="message_for_driver" class="form-control " placeholder="Message For Driver" ng-model="order.message_for_driver" name="message_for_driver" autocomplete="off" aria-invalid="false" >
</div>
</div>
</div>
<div class="form-group ml-20">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 pull-right pt-5">
<div>
<label class="checkbox-inline">
<input type="checkbox" style="" id="is_ok_leave_at_the_door" checked="checked" ng-model="order.is_ok_leave_at_the_door"> Ok to leave at the door
</label>
</div>
</div>
</div>
</div>
</form>
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