html Input form wont submit? - html

So simply trying to make a html form submit but my layout uses a lot of divs and classes and doesn't seem to be getting the names / ids of them to post i think its not working due to everything inside the form the div's etc but of course this is the layout its late in the morning so could be missing something/ missed something out
<?php
if (isset($_POST["submit"]) && !empty($_POST["submit"])) {
echo "testing";
}
?>
<h3 class="widget-title text-dark">
Cart summary
</h3>
<div class="clearfix"></div>
</div>
<div class="widget-body">
<div class="row">
<form action="checkout.php" method="POST">
<div class="col-sm-6 margin-b-30">
<div class="row">
<div class="col-sm-6">
<label>First Name*</label>
<input type="text" class="form-control" id="fname" name="fname" placeholder="John"> </div>
<!--/form-group-->
<div class="col-sm-6">
<div class="form-group">
<label>Last Name*</label>
<input type="text" class="form-control" id="lname" name="lname" placeholder="Doe"> </div>
<!--/form-group-->
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label>Full Address*</label>
<input type="text" class="form-control" id="Address" placeholder="124, Lorem Street.."> </div>
<!--/form-group-->
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Post code*</label>
<input type="text" class="form-control" id="Post code" placeholder="G52 2LW"> </div>
<!--/form-group-->
</div>
<div class="col-sm-6">
<div class="form-group">
<label>phone*</label>
<input type="text" class="form-control" id="phone" placeholder="123-345-3322"> </div>
<!--/form-group-->
</div>
<div class="payment-option">
<ul class=" list-unstyled">
<li>
<label class="custom-control custom-radio m-b-20">
<input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Payment on delivery</span>
<br> <span>Please send your cheque to Store Name, Store Street, Store Town, Store State / County, Store Postcode.</span> </label>
</li>
<li>
<label class="custom-control custom-radio m-b-10">
<input name="radio-stacked" name="submit2" type="radio" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Paypal <img src="images/paypal.jpg" alt="" width="90"></span> </label>
</li>
</ul>
<p class="text-xs-center"> Pay now </p>
</div>
</div>
</form>
A big thank you in advance
http://prntscr.com/g7gc12

ok i fixed it it was the button i changed this
<p class="text-xs-center"> Pay now </p>
to
<div class="col-xs-12">
<button class="btn btn-lg theme-btn" type="submit">Update Info</button>
</div>
Problem fixed thank you

Related

Html Input Required Attribute is not working

Although button type is submit, name attributes are same for radio buttons, there is action and method attributes for form, and all other requirements are done, input required attribute is still not working.
there is no novalidate attribute in the form as well.
<form action="" method="">
<div class="form-group">
<div class="form-checkbox">
<label for="resheadpay1">
<input id="resheadpay1" type="radio" id="payinthecar" name="flight-type" required/>
<span></span>Pay in the Car
</label>
<label for="resheadpay2">
<input id="resheadpay2" type="radio" id="paybycreditcard" name="flight-type" />
<span></span>Pay by Credit Card
</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input id="txtSource" class="form-control" name="pickLocation" type="text" placeholder="Pickup Location" required/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="txtDestination" class="form-control" type="text" name="dropLocation" placeholder="Dropoff Location" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<input id="txtdate" class="form-control" placeholder="Date" type="date" name="datepick" required/>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input id="txttime" class="form-control" type="text" id="datetimepicker" name="timepick" placeholder="hh:mm" required/>
</div>
</div>
<div class="col-md-3">
<div class="form-btn">
<button class="submit-btn" onclick="GetRoute(); showres(); hidebooking(); changeText();" type="submit">Book Now </button>
</div>
</div>
</div>
</form>

Submit only select form by checkbox

i have this problem on form validation.
as you can see from image number 1, the user can make a choice. depending on the choice you make, change the form. (image number 2 and 3)
The fields, I put them as mandatory, and the two sections, are display: none, until the user clicks on one of the two buttons.
How can I activate only one form based on the choice made?
If I click on the submit button, while completing the fields of the first form, it asks me for the fields of the second form, as they are mandatory.
Many thanks in advance
jquery code for show button:
$( "#button-ritira" ).click(function() {
$( "#ricevi" ).hide( 1000 );
$( "#ritira" ).show( 400 );
});
$( "#button-ricevi" ).click(function() {
$( "#ritira" ).hide( 1000 );
$( "#ricevi" ).show( 400 );
});
the HTML code:
<div class="row mb-45">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 offset-lg-2 text-center">
<label class="label-space-radio-ritira mb-25">
<input type="radio" name="ritira" id="button-ritira" autocomplete="off">
<span class="radiocustom-ritira"></span>
</label>
</div>
<div class="col-lg-4 text-center">
<label class="label-space-radio-ritira mb-25">
<input type="radio" name="ritira" id="button-ricevi" autocomplete="off">
<span class="radiocustom-ricevi"></span>
</label>
</div>
</div>
</div>
</div>
<div class="row" id="ritira">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 offset-lg-2">
<div class="input-form-ricevi-ritira">
<label>Nome</label>
<input type="text" name="nome" placeholder="Nome" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Cognome</label>
<input type="text" name="cognome" placeholder="Cognome" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Email</label>
<input type="text" name="email" placeholder="Email" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Cellulare</label>
<input type="text" name="cellulare" placeholder="Cellulare" required autocomplete="off">
</div>
</div>
<div class="col-lg-4">
<img src="img/assets/titolo-quando.svg" alt="titolo quando cremeria opera" class="titolo-quando">
<div class="row m-giorno-ora">
<div class="col-lg-6">
<div class="input-form-ricevi-ritira ">
<label>Giorno</label>
<input type="text" name="giorno" placeholder="gg/mm/aaaa" class="input-giorno" required autocomplete="off">
</div>
</div>
<div class="col-lg-4">
<div class="input-form-ricevi-ritira ">
<label>Ora</label>
<input type="text" name="ora" placeholder="00:00" class="input-ora" required autocomplete="off">
</div>
</div>
</div>
<img src="img/assets/titolo-dove.svg" alt="titolo dove cremeria opera" class="titolo-dove">
<label class="label-space-radiodove ">Sant'Anna
<span class="inner-light-title-check">Viale Gaetano Luporini, 951 - Lucca</span>
<input type="radio" name="ritiro" autocomplete="off">
<span class="radiodove"></span>
</label>
<label class="label-space-radiodove mb-25">Sant'Alessio
<span class="inner-light-title-check">Via di Sant'Alessio, 927 - Lucca</span>
<input type="radio" name="ritiro" autocomplete="off">
<span class="radiodove"></span>
</label>
</div>
</div>
</div>
</div>
<div class="row" id="ricevi">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 offset-lg-2">
<div class="input-form-ricevi-ritira">
<label>Nome</label>
<input type="text" name="nome" placeholder="Nome" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Cognome</label>
<input type="text" name="cognome" placeholder="Cognome" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Email</label>
<input type="text" name="email" placeholder="Email" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Cellulare</label>
<input type="text" name="cellulare" placeholder="Cellulare" required autocomplete="off">
</div>
</div>
<div class="col-lg-4">
<img src="img/assets/titolo-quando.svg" alt="titolo quando cremeria opera" class="titolo-quando">
<div class="row m-giorno-ora">
<div class="col-lg-6">
<div class="input-form-ricevi-ritira ">
<label>Giorno</label>
<input type="text" name="giorno" placeholder="gg/mm/aaaa" class="input-giorno" required autocomplete="off">
</div>
</div>
<div class="col-lg-4">
<div class="input-form-ricevi-ritira ">
<label>Ora</label>
<input type="text" name="ora" placeholder="00:00" class="input-ora" required autocomplete="off">
</div>
</div>
</div>
<img src="img/assets/titolo-dove.svg" alt="titolo dove cremeria opera" class="titolo-dove">
<div class="input-form-ricevi-ritira input-indirizzo">
<label>Indirizzo</label>
<input type="text" name="indirizzo" placeholder="Inserisci l'indirizzo completo" required>
</div>
</div>
</div>
</div>
</div>
Apart from hiding and showing give your one form class disabled on all input fields. The other one disabledtwo. When you show and hide the form you also enable/disable input filed of other so it wont get posted.
You can see the demo without hiding the fields get disabled.
If by any chance (I doubt) they still ask to be filed because of required, you can also remove/add required on them the same way
$( "#button-ritira" ).click(function() {
//$( "#ricevi" ).hide( 1000 );
//$( "#ritira" ).show( 400 );
$(".disabled").prop('disabled', true);
$(".disabledtwo").prop('disabled', false);
});
$( "#button-ricevi" ).click(function() {
//$( "#ritira" ).hide( 1000 );
//$( "#ricevi" ).show( 400 );
$(".disabledtwo").prop('disabled', true);
$(".disabled").prop('disabled', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mb-45">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 offset-lg-2 text-center">
<label class="label-space-radio-ritira mb-25">
<input type="radio" name="ritira" id="button-ritira" autocomplete="off">
<span class="radiocustom-ritira"></span>
</label>
</div>
<div class="col-lg-4 text-center">
<label class="label-space-radio-ritira mb-25">
<input type="radio" name="ritira" id="button-ricevi" autocomplete="off">
<span class="radiocustom-ricevi"></span>
</label>
</div>
</div>
</div>
</div>
<div class="row" id="ritira">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 offset-lg-2">
<div class="input-form-ricevi-ritira">
<label>Nome</label>
<input type="text" name="nome" class="disabled" placeholder="Nome" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Cognome</label>
<input type="text" name="cognome" class="disabled"placeholder="Cognome" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Email</label>
<input type="text" name="email" class="disabled"placeholder="Email" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Cellulare</label>
<input type="text" name="cellulare" class="disabled" placeholder="Cellulare" required autocomplete="off">
</div>
</div>
<div class="col-lg-4">
<img src="img/assets/titolo-quando.svg" alt="titolo quando cremeria opera" class="titolo-quando">
<div class="row m-giorno-ora">
<div class="col-lg-6">
<div class="input-form-ricevi-ritira ">
<label>Giorno</label>
<input type="text" name="giorno" class="disabled" placeholder="gg/mm/aaaa" class="input-giorno" required autocomplete="off">
</div>
</div>
<div class="col-lg-4">
<div class="input-form-ricevi-ritira ">
<label>Ora</label>
<input type="text" name="ora" class="disabled" placeholder="00:00" class="input-ora" required autocomplete="off">
</div>
</div>
</div>
<img src="img/assets/titolo-dove.svg" alt="titolo dove cremeria opera" class="titolo-dove">
<label class="label-space-radiodove ">Sant'Anna
<span class="inner-light-title-check">Viale Gaetano Luporini, 951 - Lucca</span>
<input type="radio" name="ritiro" class="disabled" autocomplete="off">
<span class="radiodove"></span>
</label>
<label class="label-space-radiodove mb-25">Sant'Alessio
<span class="inner-light-title-check">Via di Sant'Alessio, 927 - Lucca</span>
<input type="radio" name="ritiro" class="disabled" autocomplete="off">
<span class="radiodove"></span>
</label>
</div>
</div>
</div>
</div>
<div class="row" id="ricevi">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 offset-lg-2">
<div class="input-form-ricevi-ritira">
<label>Nome</label>
<input type="text" name="nome" placeholder="Nome" class="disabledtwo" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Cognome</label>
<input type="text" name="cognome" placeholder="Cognome" class="disabledtwo" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Email</label>
<input type="text" name="email" placeholder="Email" class="disabledtwo"required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Cellulare</label>
<input type="text" name="cellulare" placeholder="Cellulare" class="disabledtwo"required autocomplete="off">
</div>
</div>
<div class="col-lg-4">
<img src="img/assets/titolo-quando.svg" alt="titolo quando cremeria opera" class="titolo-quando">
<div class="row m-giorno-ora">
<div class="col-lg-6">
<div class="input-form-ricevi-ritira ">
<label>Giorno</label>
<input type="text" name="giorno" placeholder="gg/mm/aaaa" class="disabledtwo"class="input-giorno" required autocomplete="off">
</div>
</div>
<div class="col-lg-4">
<div class="input-form-ricevi-ritira ">
<label>Ora</label>
<input type="text" name="ora" placeholder="00:00" class="disabledtwo" class="input-ora" required autocomplete="off">
</div>
</div>
</div>
<img src="img/assets/titolo-dove.svg" alt="titolo dove cremeria opera" class="titolo-dove">
<div class="input-form-ricevi-ritira input-indirizzo">
<label>Indirizzo</label>
<input type="text" name="indirizzo" placeholder="Inserisci l'indirizzo completo" class="disabledtwo" required>
</div>
</div>
</div>
</div>
</div>

issue with forms in bootstrap and html

I have a bit of a problem and i need some help. I am learning new things and trying to get some skills with the time spend on learning.
I want to make this picture and forms look the same as the picture. I am posting my code
enter image description here
index.html
<div class="jumbotron">
<div class="row">
<div class="col-md-6 col-sm-6">
<img class="img-responsive" src="img/lqvopodravnenasnimka.jpg" alt="smiley face">
</div> <!--col-md-5-->
<div class="col-md-6 col-sm-6">
<h3>Send Request</h3>
<p id="mainparagraph">Заповядайте в нашия нов хотел Grand Hotel Gergana. Ние Ви предлагаме отлични условия, където можете да прекарате своите ценни свободни дни.</p>
<form name="myForm" action="#" onsubmit="return validateForm()" method="post">
<div class="row">
<div class="col-md-6">
<div class="form-group form-group-sm" style="margin-top:20px;">
<label for="firstname" class="control-label">Name</label> <!--name-->
<br>
<input type="text" class="form-control" id="firstname" style="width:100%;" name="fname">
</div><!-- form-group-->
</div><!--col-md-5-->
<div class="col-md-6">
<div class="form-group form-group-sm" style="margin-top:20px;">
<label for="surname" class="control-label">Surname</label> <!--surname -->
<br>
<input type="text" class="form-control" id="surname" style="width:100%;" name="sname">
</div><!-- form-group-->
</div><!--col-md-5-->
</div><!--row-->
<div class="row">
<div class="col-md-12">
<div class="form-group form-group-sm" style="margin-top:20px;">
<label for="email" class="control-label">Email</label>
<br>
<input type="text" class="form-control" id="email" style="width:100%;" name="mail">
</div>
</div>
</div><!--row-->
<div class="row">
<div class="col-sm-12">
<div class="form-group form-group-sm" style="margin-top:20px;">
<label for="phone" class="control-label">Mobile phone</label>
<!--<span class="glyphicon glyphicon-arrow-right"><p style="color:gray; font-style:italic; font-size:0.7em;">Sample: +352XXXXXXXXX</p> -->
<br>
<input type="phone" class="form-control" id="phone" style="width:100%;" name="mphone">
</div>
</div>
</div><!--row-->
<div class="row">
<div class="col-md-6">
<div class="form-group form-group-sm" style="margin-top:20px;">
<label for="date" class="control-label">Date of birth</label>
<br>
<input type="number" class="form-control" id="number" Placeholder="DD" style="width:55px;" name="day">
<input type="number" class="form-control" id="number" Placeholder="MM" style="width:55px;" name="month">
<input type="number" class="form-control" id="number" Placeholder="YYYY" style="width:90px;" name="year">
</div>
</div><!--col-md-6-->
<div class="col-md-6">
<div class="form-group form-group-sm" >
<label for="text" class="control-label" style="margin-top:20px;">Nationality</label>
<br>
<select class="options" name="cars" style="width:100%;">
<option value="България">България</option>
<option value="Румъния">Румъния</option>
<option value="Гърция">Гърция</option>
<option value="Сърбия">Сърбия</option>
</select>
</div><!--form-group-->
</div>
<div class="col-md-12">
<input type="submit" value="SAMPLE BUTTON">
</div>
</div><!--row-->
</form>
</div><!--col-md-7-->
Its quite a simple fix. You were really close! Firstly with Bootstrap you need to have a container, so that's a class that would be on your main div that holds everything so for this instance it would be your jumbotron div.
<div class="jumbotron container">
This will format 90% of what you are trying to achieve into a neat box where all the cols work in harmony with each other.
As for the input boxes, I see you were having difficulty with your date inputs. This too is an easy fix. Simply add the following code to your css:
#number {
float: left;
}
This will push them close together as seen in your picture.
Working example here - https://codepen.io/anon/pen/MoqRMK
I am sure you are experienced enough to make any other required changes.

My bootstrap row and column occupied same space it doesn't adjust size automatically

<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="welcome-tag">
<p> Create a Havedocs Account to discover </p>
</div>
<div class="logInfDiv">
<div class="pull-left"><i class="fa fa-desktop"></i></div>
<div class="media-body"> <strong>Access Quality Content</strong><br>
Browse and download millions of crowd-sourced study materials tagged to specific courses at universities all over the world </div>
</div>
<div class="logInfDiv">
<div class="media">
<div class="pull-left"><i class="fa fa-clock-o"></i></div>
<div class="media-body"> <strong>Study Whenever You Want</strong><br>
Havedocs's services are available 24/7 - you can ask a tutor for homework help at 3 a.m. or review flashcards over lunch </div>
</div>
</div>
<div class="logInfDiv">
<div class="media">
<div class="pull-left"><i class="fa fa-users"></i></div>
<div class="media-body"> <strong>Build a Better Community</strong><br>
Share educational content with fellow students to make Havedocs stronger and earn free Premier membership </div>
</div>
</div>
<form class="form-signin">
<div class="login_heading">
<div class="headingLeft"><i class="fa fa-lock"></i> Create an Account</div>
<div class="headingRight">Login</div>
</div>
<input type="text" class="form-control" name="userName" placeholder="User Name" required autofocus />
<input type="text" class="form-control" name="emailAddress" placeholder="Email Address" required autofocus />
<input type="password" class="form-control" name="password" placeholder="Password" required/>
<input type="password" class="form-control" name="confirmPassword" placeholder="Confirm Password" required/>
<br>
<label>Gender</label>
<br>
<input type="radio" name="gender" value="male" checked>
Male
<input type="radio" name="gender" value="female">
Female<br>
<br>
<div class="create-acc">
<p>Already have an account? Click here Login.</p>
</div>
<button class="btn btn-primary btn-lg" type="submit">Register</button>
</form>
</div>
</div>
</div>
Here is my code and screenshot attached! I'm using row then col-lg-12 and they are with same space and doesn't adjust accordingly with content ,the signup form goes down and hides when i make some fields and the scroll option doesn't come please let me know where i'm doing wrong thanks
You need to divide your page into 2 sections Left and right
on right side you can use ur login form
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="welcome-tag">
<p> Create a Havedocs Account to discover </p>
</div>
<div class="logInfDiv">
<div class="pull-left"><i class="fa fa-desktop"></i></div>
<div class="media-body">
<strong>Access Quality Content</strong>
<br>
Browse and download millions of crowd-sourced study materials tagged to specific courses at universities all over the world
</div>
</div>
<div class="logInfDiv">
<div class="media">
<div class="pull-left"><i class="fa fa-clock-o"></i></div>
<div class="media-body">
<strong>Study Whenever You Want</strong><br>
Havedocs's services are available 24/7 - you can ask a tutor for homework help at 3 a.m. or review flashcards over lunch
</div>
</div>
</div>
<div class="logInfDiv">
<div class="media">
<div class="pull-left"><i class="fa fa-users"></i></div>
<div class="media-body">
<strong>Build a Better Community</strong><br>
Share educational content with fellow students to make Havedocs stronger and earn free Premier membership
</div>
</div>
</div>
</div> <!------- left side ends
<div class="col-md-4 col-sm-4 col-xs-12">
<form class="form-signin">
<div class="login_heading">
<div class="headingLeft"><i class="fa fa-lock"></i> Create an Account</div>
<div class="headingRight">Login</div>
</div>
<input type="text" class="form-control" name="userName" placeholder="User Name" required="" autofocus="" />
<input type="text" class="form-control" name="emailAddress" placeholder="Email Address" required="" autofocus="" />
<input type="password" class="form-control" name="password" placeholder="Password" required=""/>
<input type="password" class="form-control" name="confirmPassword" placeholder="Confirm Password" required=""/><br>
<label>Gender</label><br>
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female<br><br>
<div class="create-acc">
<p>Already have an account? Click here Login.</p>
</div>
<button class="btn btn-primary btn-lg" type="submit">Register</button>
</form>
</div>
</div>
</div>

decrease input width (using bootstrap)

I am trying to decrease middle name input field but i can't get it work. It only works at xs screen (picture below).
<div class="row">
<form class="form-inline" role="form" name="userForm" novalidate>
<div class="form-group required">
<label for="first" class="control-label">Child's Name</label>
<div class="input-group">
<span class="col-xs-9 col-sm-5">
<input type="text" class="form-control" id='first' name="first" >
<label for ="first">First </label>
</span>
</div>
<div class="input-group">
<span class="col-xs-3 col-sm-2">
<input type="text" class="form-control col-xs-3 col-sm-2" id='mi' name="mi" >
<label for ="mi">MI</label>
</span>
</div>
<div class="input-group">
<span class="col-xs-9 col-sm-5">
<input type="text" class="form-control" id = "last" name="last" >
<label for="last"> Last </label>
</span>
</div>
</div>
</form>
</div>
You're code is wrong please check again.you end the </form> before end other tag. and again read how to use bootstrap form. help this link.
remove span and add col-sm-4 to div
`
<div class="form-group required">
<label for="first" class="control-label">Child's Name</label>
<div class="input-group col-sm-4">
<input type="text" class="form-control" id='first' name="first">
<label for="first">First </label>
</div>
<div class="input-group col-sm-1">
<input type="text" class="form-control " id='mi' name="mi">
<label for="mi">MI</label>
</div>
<div class="input-group col-sm-4">
<input type="text" class="form-control " id="last" name="last">
<label for="last"> Last </label>
</div>
<div class="help-block" ng-messages="userForm.first.$error" style="color:maroon" role="alert">
<p ng-message="required">Child's First Name is required.</p>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger">Submit</button>
</div>
</form>`