I have a form on a HTML document with this header
<form target="_blank" action="" id="form-find-your-program">
and I have an input button within it
<input type="submit" id="submit" class="readmore" value="Submit">
and then the closing tag after the input button:
</form>
The problem is that the form is not closing as I assume because I have another form after it, that is submitting with this one.
This is the complete code:
<div class="row">
<find_program_form_home>
<div class="custom form_colors_invert">
<form target="_blank" action="" id="form-find-your-program">
<div class="six columns noleftmargin">
<h5 class="sidebartitle">Find Your Program</h5>
</div>
<div class="four columns">
<select class="custom dropdown" id="findProgramSelectProgram" required="" title="Select a Program">
<option value="">Select a Program</option>
<option value="Undergraduate">Undergraduate</option>
<option value="Graduate">Graduate</option>
</select>
</div>
<div class="four columns">
<select class="custom dropdown" id="AreaOfStudyAll" required="" title="Area of Study">
<option value="">Area of Study</option>
<!--<option class="dd-undergraduate" disabled="disabled" value="">Undergraduate</option> -->
<option class="dd-undergraduate" value="something.html">something</option>
</select>
</div>
<div class="four columns">
<input type="submit" id="submit" class="readmore" value="Submit">
</div>
</form>
</find_program_form_home>
</div>
<div class="six columns noleftmargin">
<h5 class="sidebartitle">Online Course Catalog</h5>
<p>
Search our registration catalog to find upcoming online courses.
</p>
</div>
</div>
Any ideas why?
Related
I want to align input fields and I was asked to not use any css at all. My code:
<!DOCTYPE html>
<html>
<body>
<h1>Travel Reservation Form</h1>
<h3>* denotes mandatory </h3>
<hr>
<form>
<input name="passengername" placeholder="Name">
<input type="tel" placeholder="*Mobile Number" name="mobile" required>
<br>
<input name="mailid" placeholder="*Email ID" type="email" required>
<select name="travelmonth">
<option value="Month of Travel">Month of Travel</option>
<option value="Aug2018">Aug2018</option>
<option value="Sep2018">Sep2018</option>
<option value="Oct2018">Oct2018</option>
<option value="Nov2018">Nov2018</option>
<option value="Dec2018">Dec2018</option>
<option value="Jan2019">Jan2019</option>
<option value="Feb2019">Feb2019</option>
<option value="Mar2019">Mar2019</option>
<option value="Apr2019">Apr2019</option>
</select>
<br>
<select name="package" required>
<option value="*Origin">*Origin</option>
<option value="GOA">GOA</option>
<option value="MUMBAI">MUMBAI</option>
<option value="KERALA">KERALA</option>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KOLKATA">KOLKATA</option>
</select>
<input name="destination" placeholder="Destination">
<br>
<input name=submit type="submit" value="Get A Call">
<input name="clear" type="reset" value="Clear">
</form>
</body>
</html>
The output this code is giving
The output I'm required to get:
How do I align the two input tags such that it looks the same as the posted image?
Just in case you actually can use styles to set the style of a page (because the content, a.k.a the HTML, is the same. And there is no behavior, a.k.a JavaScipt)
Example with bootstrap 5:
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<h1 class="d-flex justify-content-center text-uppercase">Travel Reservation Form</h1>
<h3 class="d-flex justify-content-center">* denotes mandatory </h3>
<hr>
<form class="container">
<div class="row mb-2">
<div class="col-6">
<input name="passengername" placeholder="Name" class="form-control">
</div>
<div class="col-6">
<input type="tel" placeholder="*Mobile Number" name="mobile" required class="form-control">
</div>
</div>
<div class="row mb-2">
<div class="col-6">
<input name="mailid" placeholder="*Email ID" type="email" required class="form-control">
</div>
<div class="col-6">
<select name="travelmonth" class="form-select">
<option value="Month of Travel">Month of Travel</option>
<option value="Aug2018">Aug2018</option>
<option value="Sep2018">Sep2018</option>
<option value="Oct2018">Oct2018</option>
<option value="Nov2018">Nov2018</option>
<option value="Dec2018">Dec2018</option>
<option value="Jan2019">Jan2019</option>
<option value="Feb2019">Feb2019</option>
<option value="Mar2019">Mar2019</option>
<option value="Apr2019">Apr2019</option>
</select>
</div>
</div>
<div class="row mb-2">
<div class="col-6">
<select name="package" required class="form-select">
<option value="*Origin">*Origin</option>
<option value="GOA">GOA</option>
<option value="MUMBAI">MUMBAI</option>
<option value="KERALA">KERALA</option>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KOLKATA">KOLKATA</option>
</select>
</div>
<div class="col-6">
<input name="destination" placeholder="Destination" class="form-control">
</div>
</div>
<div class="row mb-2">
<div class="col-6">
<input name=submit type="submit" value="Get A Call" class="btn btn-primary">
</div>
<div class="col-6">
<input name="clear" type="reset" value="Clear" class="btn btn-secondary">
</div>
</div>
</form>
</body>
</html>
This is my code I'm using, can anyone tell me how can I align my caterer and the dropdown menu. I got 5 screens some of them I manage to align but in this screen, I have no idea of how to do it.
<div class="row ">
<div class="col-md-12">
<div class="card m-b-30">
<div class="card-header">
<h5 class="card-title">RESERVATION COMPLETION</h5>
</div>
<div class="card-body">
<form id="form" enctype="multipart/form-data">
<input type="hidden" id="Id" />
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="Category">Caterer</label>
<select class="form-control js-example-basic-single" id="data-packagetypes-caterercombo" style="width:200px;">
<option value="">Golden Crown</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="ReservationNo">Reservation No</label>
<select class="form-control js-example-basic-single" id="data-reservationcompletion-combo" style="width:200px;" required>
<option value="">--Select--</option>
</select>
</div>
</div>
</div>
<button type="submit" id="btnSubmit" class="btn btn-dark">Complete Reservation</button>
<button type="reset" id="btnClear" class="btn btn-dark">Clear</button>
</form>
</div>
</div>
</div>
</div>
In First Line Of code div class="row ". you Can Add align="center" Like This
<div class="row " align="center">
See Example
I have some strange thing happening from my self post forms. I thought using form method="post" would not put data in the url. And I'm having different outcomes on both forms
<form method="post" action="" enctype="multipart/form-data" id="testForm">
<div class="form-group">
<div class="panel-heading">
some junk
</div>
<div class="panel-body">
<div class="col-md-12">
<textarea id="summernote" name="Full_Discription" class="form-control" required></textarea>
</div>
<div class="col-md-1">
<input type='hidden' name='var' value='<?php echo "$Known_Issue_id";?>'/>
<button name="submit" type="submit" id="submitButton" class="btn btn-accent">Submit Follow-up</button>
</div>
</div>
</div>
</form>
If I submit this form the hidden data shows in URL but not the body text from summernot
web_known_issues_bug.php?bug=20
<form method="post" enctype="multipart/form-data" id="testForm">
<div class="form-group">
<div class="col-md-2">
<label>Website Issue Type:</label>
<select class="form-control" name="Issue_Plugin" id="Issue_Plugin" required>
<option value="">- Select Web Issue -</option>
</select>
</div>
<div class="col-md-7">
<label>Description Of Known Issue:</label> <input name="Issue_Discription" type="text" value="" class="form-control" required>
</div>
<div class="col-md-2">
<label>Type Of Issue:</label>
<select class="form-control" name="Issue_Type" id="Issue_Type" required>
<option value="">- Bug Type -</option>
</select>
</div>
<div class="col-md-1">
<label>Submit Issue</label><BR>
<input type='hidden' name='bug' value='<?php echo "none";?>'/>
<button name="submit" type="submit" id="submitButton" class="btn btn-accent">Submit Issue</button>
</div>
<div class="col-md-12">
<textarea id="summernote" name="Full_Discription" class="form-control" required><?php echo $SendBody; ?></textarea>
</div>
</div>
This form is spitting everything to the url?
web_known_issues.php?message=Added%20New%20Bug%20List%20Item&title=Siclone%20Crashes%20when%20not%20used%20everyday&full=asdasdasdasdasd
I really need this stuff to send clean urls. Any idea on what I have done wrong?
Sorry, this is solved. My error, I left in some debug code in the miles of PHP
Hi I am developing MVC4 application. I have one main div inside that I have three div tags. First two div tags are displaying correctly as per my requirement. However my third div tag appears in right middle. I want it in left bottom side. I tried all the ways.
<div id="dialog" class="doc-verification-outer">
<div id="data" style="width:70%;height:inherit;float:left" class="doc-verification"></div>
<div id="details" width="30%" style="float:right;height:50%; width:30%"></div>
<div id="dialog-form" title="Reject Reason">
<div style="height:200px;">
<input type="hidden" value="_upload_id" id="id" />
<br />
<label for="name">Select your reason</label>
<select id="comments">
<option value="1">Incorrect Document</option>
<option value="2">document is not clear</option>
<option value="3">document is not valid</option>
<option value="4">other document</option>
</select>
<input type="button" id="reject" class="btn btn-primary btn-cons blue" value="Ok" onclick="reject();" tabindex="-1" style="float:right;">
</div>
</div>
</div>
Can someone give some insights regarding this? Thank you very much...
You can try this:
<div id="dialog" class="doc-verification-outer">
<div id="data" style="width:70%;height:inherit;float:left" class="doc-verification"></div>
<div id="details" width="30%" style="float:right;height:50%; width:30%"></div>
<div id="dialog-form" title="Reject Reason">
<div>
<input type="hidden" value="_upload_id" id="id" />
<br />
<label for="name">Select your reason</label>
<select id="comments">
<option value="1">Incorrect Document</option>
<option value="2">document is not clear</option>
<option value="3">document is not valid</option>
<option value="4">other document</option>
</select>
</div>
<div style="margin-top:5px;"><input type="button" id="reject" class="btn btn-primary btn-cons blue" value="Ok" onclick="reject();" tabindex="-1" style="margin-left:122px;"></div>
</div>
</div>
I think you also need to split the third div into two parts so the right part should align with your second div
Try this :
<div id="dialog" class="doc-verification-outer">
<div id="data" style="width:70%;height:inherit;float:left" class="doc-verification">First DIV</div>
<div id="details" width="30%" style="float:right;height:50%; width:30%">Second div</div>
<div style="clear:both"></div>
<div id="dialog-form" title="Reject Reason">
<div style="height:200px;">
<div style="width:70%;display:inline-block">
<input type="hidden" value="_upload_id" id="id" />
<br />
<label for="name">Select your reason</label>
<select id="comments">
<option value="1">Incorrect Document</option>
<option value="2">document is not clear</option>
<option value="3">document is not valid</option>
<option value="4">other document</option>
</select>
</div>
<div style="width:29%;display:inline-block">
<input type="button" id="reject" class="btn btn-primary btn-cons blue" value="Ok" onclick="reject();" tabindex="-1" style="float:left;">
</div>
</div>
</div>
</div>
I'm trying to get the label and input and icon all on the same row in a sidebar widget area. this is what it should look like (edit: not sure why but image shows in chrome but not FF on SO)
This is what I have so far. I can't seem to get the labels and inputs on the save row. they keep wrapping around.
Here's a fiddle
http://jsfiddle.net/#&togetherjs=p6omqsAoyN
Here's the HTML. Can anyone tell me how to get them all on the same row so that it looks like the image above?
<div class="roster-reports module">
<h3>Reports</h3>
<div class="upper" >
<h5 class="strong">Generate Report</h5>
<ul class="row-fluid stat-pending">
<li class="span4">
<label for="inputReportFromDate" class="control-label">From Date</label>
</li>
<li class="span4">
<input type="date" class="form-control" width="2" id="inputReportFromDate">
</li>
<li class="span4">
<i class=" icon-calendar"></i>
</li>
</ul>
<div class="">
<div class="">
<label for="inputReportToDate" class="control-label">To Date</label>
</div>
<div class="">
<input type="date" class="form-control" id="inputReportToDate">
<i class="icon-calendar"></i>
</div>
</div>
<div class="">
<div class="">
<label for="selectReportType" class="control-label">Report Type</label>
</div>
<div class="">
<select id="inputReportType" class="form-control">
<option value="Query History">Query History</option>
<option value="DAS Alerts">DAS Alerts</option>
</select>
</div>
</div>
<div class="">
<div class="">
<label for="selectReportType" class="col-lg-2 control-label">Report Format</label>
</div>
<div class="">
<select id="selectReportFormat" class="form-control">
<option value="PDF">PDF</option>
<option value="CSV">CSV</option>
<option value="XLXS">XLXS</option>
</select>
</div>
</div>
<div class="">
<div class="">
<button id="buttonRosterReportsGenerate" type="submit" class="btn btn-primary">Generate</button>
</div>
</div>
</div>
</div>
I am not sure what you mean exactly by "sidebar widget area", but the common way to achieve what you want in bootstrap is using .form-group elements inside a .form-horizontal <form>. Modified markup :
<div class="roster-reports module">
<h3>Reports</h3>
<div class="upper">
<form class="form-horizontal" role="form">
<div class="form-group">
<h5 class="strong">Generate Report</h5>
</div>
<div class="form-group">
<label for="inputReportFromDate" class="control-label">From Date</label>
<input class="form-control" id="inputReportFromDate" type="date" width="2"/>
<i class=" icon-calendar"></i>
</div>
<div class="form-group">
<label for="inputReportToDate" class="control-label">To Date</label>
<input class="form-control" id="inputReportToDate" type="date"/>
<i class=" icon-calendar"></i>
</div>
<div class="form-group">
<label for="selectReportType" class="control-label">Report Type</label>
<select class="form-control" id="inputReportType">
<option value="Query History">Query History</option>
<option value="DAS Alerts">DAS Alerts</option>
</select>
</div>
<div class="form-group">
<label for="selectReportType" class="control-label">Report Format</label>
<select class="form-control" id="selectReportFormat">
<option value="PDF">PDF</option>
<option value="CSV">CSV</option>
<option value="XLXS">XLXS</option>
</select>
</div>
<div class="form-group">
<label class="control-label"></label>
<button class="btn btn-primary" id="buttonRosterReportsGenerate" type="submit">Generate</button>
</div>
</form>
</div>
</div>
see fiddle -> http://jsfiddle.net/h159f8nw/
As I wrote, I am not sure how you want to use this, the fiddle does not completely fulfill the position of "Generate Report" as in the image, but .form-group and .form-horizontal is defently the way to go.