enter image description hereI have to create "View" and "Update" radio buttons with a dropdown below each one. To do this, I've written the following code:
<div class="pageHead" align="center">
Auto Loan Basis Point (Bps) Adjustments by State
</div> <br><br>
<input type='radio' id='byState' ; style="margin-left:180px" ; value='View' name='byState'>View by Student's unique identity number
<input type='radio' id='byClub' ; style="margin-left:80px" ; value='Update' name='byClub'>Update by Student's identity number
<table>
<tr>
<td>
<div style="width:200px;text-align: left; display: inline;">
<select id="Select" ;>
<option value="dropdown">Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</td>
</tr>
</table>
However, I'm unable to place the drop-down menu below radio buttons; this is what I get instead:
enter image description here
Using CSS:
.container {
width: 100%;
}
.container,
.radio-buttons,
.radio-buttons>span,
.dropdowns {
}
.cell {
display: inline-block;
width: calc(50% - 2px);
}
<div class="pageHead" align="center">
Auto Loan Basis Point (Bps) Adjustments by State
</div> <br><br>
<div class="container">
<div class="radio-buttons">
<div class="cell">
<input type='radio' id='byState' value='View' name='byState'>View by Student's unique identity number
</div>
<div class="cell">
<input type='radio' id='byClub' value='Update' name='byClub'>Update by Student's identity number </div>
</div>
<div class="dropdowns">
<div class="cell">
<select id="Select">
<option value="dropdown">Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
<div class="cell">
<select id="Select">
<option value="dropdown">Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</div>
</div>
Using Tables:
You can use a table to align items together like so:
td {
width: 50vw;
}
<div class="pageHead" align="center">Auto Loan Basis Point (Bps) Adjustments by State</div> <br><br>
<table>
<tr>
<td>
<input type='radio' id='byState' value='View' name='byState'>View by Student's unique identity number
</td>
<td>
<input type='radio' id='byClub' value='Update' name='byClub'>Update by Student's identity number
</td>
</tr>
<tr>
<td>
<div>
<select id="Select">
<option value="dropdown"> Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</td>
<td>
<div>
<select id="Select">
<option value="dropdown"> Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</td>
</tr>
</table>
Related
I'm trying to modify and example from this same page but its not working as I want.
I have two groups in a select, and I want chose any option from one of the second group "Unique" and if you select any option from that group show Div, else show nothing.
the html:
<div class="form-floating mb-3 mt-3">
<table>
<tr>
<td><input class="form-control input-lg email" type="email"
name="mail[]" required />
</td>
<td>
<select class="form-select" name="skills[]" required>
<optgroup Class="unique" label="Common">
<option value="Extraction">Extraction</option>
<option value="Hunting">Hunting</option>
<option value="Farming">Farming</option>
</optgroup>
<optgroup class="unique" label="Unique">
<option value="Diplomacy">Diplomacy</option>
<option value="Survival">Survival</option>
</optgroup>
</select>
</td>
<td>
</tr>
</table>
</div>
<div class="mt-5 extras" id="mydiv">
<h4 class="text-dark">Check</h4>
Increased through making items, sewing and cooking.<br>
<input class="form-check-input" type="checkbox" name="checkpoint"
checked required/>
</div>
the Js:
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value ==
'Diplomacy' || 'Survival' ? 'block' : 'none';
}
css :
.extras{
display: none;
}
You can access the optgroup by finding the selected option, using closest() to find the enclosing optgroup tag, then accessing it's label attribute
function doSomething(element) {
// get optgroup
let optgroup = element.options[element.options.selectedIndex].closest('optgroup').getAttribute('label')
console.log(optgroup)
if (optgroup == 'Unique') {
console.log("do something ...")
}
}
.extras {
display: none;
}
<div class="form-floating mb-3 mt-3">
<table>
<tr>
<td><input class="form-control input-lg email" type="email" name="mail[]" required />
</td>
<td>
<select class="form-select" name="skills[]" onchange='doSomething(this)' required>
<optgroup Class="unique" label="Common">
<option value="Extraction">Extraction</option>
<option value="Hunting">Hunting</option>
<option value="Farming">Farming</option>
</optgroup>
<optgroup class="unique" label="Unique">
<option value="Diplomacy">Diplomacy</option>
<option value="Survival">Survival</option>
</optgroup>
</select>
</td>
<td>
</tr>
</table>
</div>
<div class="mt-5 extras" id="mydiv">
<h4 class="text-dark">Check</h4>
Increased through making items, sewing and cooking.<br>
<input class="form-check-input" type="checkbox" name="checkpoint" checked required/>
</div>
I'm having a few issues with my javascript webpage. My first question is how to create a small border that wraps around a title? The bottom portion of my professor's sample webpage looks like this: https://i.imgur.com/4DVozv9.png
The bottom portion of my webpage so far looks like this: https://i.imgur.com/8STmOGd.png
I don't understand how to make that small border that circles around the "Shipping Method", "Shipping Address", and "Payment Details" titles.
Also for some reason the "" tag on my "Complete Payment" button isn't placing my button on the next line for some reason. Here is my code so far, note though that it's incomplete so my functions and other features aren't ready yet, right now I'm just focusing purely on presentation. Thank you for your time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>YOUR NAME Final Project Checkout</title>
<link href="layout.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="guest-functions.js"></script>
<script type="text/javascript" src="cart-functions.js"></script>
<script>
window.onload=function(){
setGuest();
updateCartTotal();
}
</script>
</head>
<body>
<header><img src="90s-Gamers-Logo.png" width="798" height="82" alt="My Company"/></header>
<nav>
<form id="form1" name="form1" method="post">
<p>Choose a page to visit:<br>
<select name="select" id="select" onchange="location = this.options[this.selectedIndex].value;">
<option value="index.html">Home</option>
<option value="shop.html">Shop</option>
<option value="cart.html">Cart</option>
<option value="checkout.html" selected="selected">Checkout</option>
</select>
</p><br>
<p><b>Welcome Guest!</b></p>
<p>Enter your name:</p>
<input id="sign-in-text"><br>
<button onclick="setGuest()" id="sign-in-button">Sign-In</button><br><br>
<p>Your shopping cart is now</p>
<!--Need variable here-->
<p><b>empty!</b></p>
</form>
<p> </p>
<div id="divGuestArea"> </div>
<p> </p>
<div id="divCartSummary"> </div>
</nav>
<div id="main">
<h1>Checkout</h1>
<!--<p>This is where the transaction would take place so create a form here to take care of that final process as appropriate. Such form fields as contact info, shipping method, payment method, receipt, etc. Use HTML attributes wisely to help with validation and write JavaScript to validate any needed fields that are not sure to be validated by this HTML.</p>
<p>Connect your form to a "thankyou.html" page that you create so that after the form is submitted and found to be filled out properly, you thank them by name on "thankyou.html".</p>-->
<table border="1" cellspacing="0" cellpadding="6" summary="Table of Quantity, Description, Price, and Product Totals">
<tbody>
<tr>
<td><b>Quantity</b></td>
<td><b>Description</b></td>
<td><b>Price</b></td>
<td><b>Product Total</b></td>
</tr>
<tr style="text-align:right">
<td>later</td>
<td>later</td>
<td>later</td>
<td>later</td>
</tr>
<tr style="text-align:right">
<td>later</td>
<td>later</td>
<td>later</td>
<td>later</td>
</tr>
<tr style="text-align:right">
<td colspan="3">Subtotal:</td>
<td>later</td>
</tr>
<tr style="text-align:right">
<td colspan="3">Tax:</td>
<td>later</td>
</tr>
<tr style="text-align:right">
<td colspan="3"><b>Grand total:</b></td>
<td><b>later</b></td>
</tr>
</tbody>
</table><br>
<p>Display total amount</p>
<p>Shipping Method</p>
<p> <input type="radio" name="ShipType" id="standard" value="2">
<label for="standard">Standard Shipping ($2)</label>
<input type="radio" name="ShipType" id="2-day" value="5">
<label for="2-day">2-Day Shipping ($5)</label>
<input type="radio" name="ShipType" id="overnight" value="10">
<label for="overnight">Overnight Shipping ($10)</label>
<br>
<p>Shipping Address</p>
Full Name:
<input type="text" id="FullName" name="FullName">
Street Address:
<input type="text" id="StreetAddress" name="StreetAddress"><br><br>
City:
<input type="text" id="City" name="City">
State/Province/Region:
<input type="text" id="State" name="State"><br><br>
ZIP:
<input type="text" id="Zip" name="Zip">
Country:
<input type="text" id="Country" name="Country"><br><br>
Phone Number:
<input type="text" id="PhoneNumber" name="PhoneNumber"><br>
<p>Payment Details</p>
<select id="selPayment" name="selPayment" onChange="getSelectValue();">
<option value="" selected="selected">- Choose one -</option>
<option value="Visa">Visa Credit</option>
<option value="MasterCard">MasterCard Credit</option>
<option value="American Express">American Express Credit</option>
<option value="Debit Card">Debit Card</option>
<option value="Pay Pal">Paypal</option>
</select> <br><br>
Card #:
<input type="text" id="CardNumber" name="CardNumber"><br><br>
Expiration Month:
<select id="selMonth" name="selMonth" onChange="getSelectMonth();">
<option value="" selected="selected">- Choose one -</option>
<option value="January">January</option>
<option value="February">Febraury</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select> <br><br>
Expiration Year:
<select id="selYear" name="selYear" onChange="getSelectYear();">
<option value="" selected="selected">- Choose one -</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<br><p>
<input type="button" value="Complete Payment"
onclick="storeAndGo();">
</p>
<footer>
Copyright 2020, 90's Gamers.
</footer>
</div>
</body>
</html>
You can add a div to your 3 sections, and you can set border to this.
I don't understand how to make that small border that circles around the "Shipping Method", "Shipping Address", and "Payment Details" titles.
CSS
border: 1px solid;
border-radius: 25px;
I have created a html css javascript, a tree when you select an option, another options will be visible (according the first option selected) in this example there is only 2 options.
the problem is that at the end, there is a button that should add a new form (row) with same options, to start all over, when i click that button it add new row but the script doesn't work, I have no idea how to fix it!
Here is a JSFiddle
$("#addMore").click(function() {
$(".row-fluid:last").clone().appendTo(".wrapper");
});
$("#produse").change(function() {
var $this = $(this),
value = $this.val(); // save value
$('.sub_select_class').hide(); // we hide every second select
switch (value) { // we show only what needs to be visible
case 'Canapele':
$("#ModeleCanapele").show();
break;
case 'Coltare':
$("#ModeleColtare").show();
break;
case 'Mobila':
$("#ModeleMobila").show();
break;
case 'Fotolii':
$("#ModeleFotolii").show();
break;
case 'Seturi':
$("#ModeleSeturi").show();
break;
// ...etc
}
});
#ModeleColtare,
#ModeleSeturi {
display: none;
}
.new-rect {
background: black;
width: 100%;
height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row-fluid">
<table style="font-size:10px">
<tbody>
<tr>
<td>
<select id="Volum">
<option value="1x ">1x </option>
<option value="2x ">2x </option>
<option value="3x ">3x </option>
<option value="4x ">4x </option>
<option value="5x ">5x </option>
<option value="6x ">6x</option>
</select>
</td>
<td>
<select id="produse">
<option value="reset">Selecteaza Produs</option>
<option value="Coltare">Coltare</option>
<option value="Seturi">Seturi</option>
</select>
</td>
<td>
<select id="ModeleColtare" class="sub_select_class">
<option value="Coltar Vera">Coltar Vera</option>
<option value="Coltar Onix">Coltar Onix</option>
<option value="Coltar Olyve">Coltar Olyve</option>
<option value="Coltar Adrian">Coltar Adrian</option>
</select>
</td>
<td>
<select id="ModeleSeturi" class="sub_select_class">
<option value="Set Dana">Set Dana</option>
<option value="Set Ramona">Set Ramona</option>
<option value="Set Gina">Set Gina</option>
<option value="Set Olyve">Set Olyve</option>
</select>
</td>
<td>
Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
<td>
<button id="filter" name="filter" onclick="resetFunction()">Reset</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>
The problem is that you were generating a new row, but still referencing the first row (and you were doing so via your naive use of Ids). Instead, your code needs to operate only upon a specific row at a time -- so, I've edited your code to pass in a reference to the row, then we can use your same JQuery Selectors, but starting from the referenced row.
NOTE: Several others have been blaming the use of duplicate Ids, but clearly that is not the problem. The fact is you CAN use duplicate Ids, and it is common to do so in situations like this.
To be clear, current HTML specification does state that:
If the id value is not the empty string, it must be unique in a document. ref
But, as a separate stack exchange discussion notes, this is not the case in practice (and probably never will be). In practice, Id is only expected to be unique within a scope, such as within a reusable component (i.e., your cloneable <tr>).
$("#addMore").click(function() {
var newRow = $(".row-fluid:last").clone();
newRow.appendTo(".wrapper");
newRow.find('.sub_select_class').hide();
newRow.find( "#produse" ).change(function(){
produseChange(this, newRow);
});
});
$("#produse").change(function() {
produseChange(this, $('tr'));
});
function produseChange(self, row) {
var $this = $(self),
value = $this.val(); // save value
row.find('.sub_select_class').hide(); // we hide every second select
switch (value) { // we show only what needs to be visible
case 'Canapele':
row.find("#ModeleCanapele").show();
break;
case 'Coltare':
row.find("#ModeleColtare").show();
break;
case 'Mobila':
row.find("#ModeleMobila").show();
break;
case 'Fotolii':
row.find("#ModeleFotolii").show();
break;
case 'Seturi':
row.find("#ModeleSeturi").show();
break;
// ...etc
}
}
#ModeleColtare,
#ModeleSeturi {
display: none;
}
.new-rect {
background: black;
width: 100%;
height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row-fluid">
<table style="font-size:10px">
<tbody>
<tr>
<td>
<select id="Volum">
<option value="1x ">1x </option>
<option value="2x ">2x </option>
<option value="3x ">3x </option>
<option value="4x ">4x </option>
<option value="5x ">5x </option>
<option value="6x ">6x</option>
</select>
</td>
<td>
<select id="produse">
<option value="reset">Selecteaza Produs</option>
<option value="Coltare">Coltare</option>
<option value="Seturi">Seturi</option>
</select>
</td>
<td>
<select id="ModeleColtare" class="sub_select_class">
<option value="Coltar Vera">Coltar Vera</option>
<option value="Coltar Onix">Coltar Onix</option>
<option value="Coltar Olyve">Coltar Olyve</option>
<option value="Coltar Adrian">Coltar Adrian</option>
</select>
</td>
<td>
<select id="ModeleSeturi" class="sub_select_class">
<option value="Set Dana">Set Dana</option>
<option value="Set Ramona">Set Ramona</option>
<option value="Set Gina">Set Gina</option>
<option value="Set Olyve">Set Olyve</option>
</select>
</td>
<td>
Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
<td>
<button id="filter" name="filter" onclick="resetFunction()">Reset</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>
IDs need to be unique. Use a class
You need to delegate the event handlers when you insert dynamic content
DRY, don't repeat yourself
function resetFunction() { // not sure what you want here?
$(this).closest(".row-fluid").remove();
}
$(function() {
$("#addMore").click(function() {
var $clone = $(".row-fluid:last").clone(true)
$('.sub_select_class',$clone).hide(); // we hide every second select
$clone.appendTo(".wrapper");
});
$(".row-fluid").on("click",".filter", resetFunction);
$(".row-fluid").on("change", ".produse", function() {
var value = $(this).val(), // save value
$parent = $(this).closest(".row-fluid");
$('.sub_select_class',$parent).hide(); // we hide every second select
$(".Modele" + value,$parent).show();
});
});
.sub_select_class {
display: none;
}
.new-rect {
background: black;
width: 100%;
height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row-fluid">
<table style="font-size:10px">
<tbody>
<tr>
<td>
<select class="Volum">
<option value="1x ">1x </option>
<option value="2x ">2x </option>
<option value="3x ">3x </option>
<option value="4x ">4x </option>
<option value="5x ">5x </option>
<option value="6x ">6x</option>
</select>
</td>
<td>
<select class="produse">
<option value="reset">Selecteaza Produs</option>
<option value="Coltare">Coltare</option>
<option value="Seturi">Seturi</option>
</select>
</td>
<td>
<select class="ModeleColtare sub_select_class">
<option value="Coltar Vera">Coltar Vera</option>
<option value="Coltar Onix">Coltar Onix</option>
<option value="Coltar Olyve">Coltar Olyve</option>
<option value="Coltar Adrian">Coltar Adrian</option>
</select>
</td>
<td>
<select class="ModeleSeturi sub_select_class">
<option value="Set Dana">Set Dana</option>
<option value="Set Ramona">Set Ramona</option>
<option value="Set Gina">Set Gina</option>
<option value="Set Olyve">Set Olyve</option>
</select>
</td>
<td>
Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
<td>
<button class="filter" name="filter">Reset</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>
I am trying to make this part of the form disappear by putting it in a div and the id = loan
To troubleshoot I put TESTTEXT1 in after the div element, and it does what I want (disappears when user clicks a radio button),However TESTTEST2 and beyond does not seem to be affected by the user's action. Does anyone know why this could be?
HTML:
<header>
<script>
function checkA(){
document.getElementById('loan').style.display='none';
document.getElementById('assigned').style.display='block';
}
function checkL(){
document.getElementById('assigned').style.display='none';
document.getElementById('loan').style.display='block';
}
</script>
</header>
<body>
<table>
<td>
<input type="radio" onclick='checkA()' name="toloan" id="0" value="0"/> <label for="0">To assign</label>
<input type="radio" onclick='checkL()' name="toloan" id="1" value="1"/> <label for="1">To loan</label>
</td>
<div id="loan">
TESTTEXT1
<tr>
<th>
<label for="borrowing_month">Borrowing date</label>
</th>
<td>
<select name="borrowing_month" id="borrowing_month">
<option value ='1' selected="selected">
TEST
</option>
</select>
<select name="borrowing_day" id="borrowing_day">
<option value="2" selected="selected">
</select>
<select name="borrowing_year" id="borrowing_year">
<option value="3" selected="selected">
</select>
</td>
</tr>
<tr>
<th>
<label for="return_month">Return date</label>
</th>
<td>
<select name="return_month" id="return_month">
<option value="4" selected="selected">
</option>
</select>
<select name="return_day" id="return_day">
<option value="5" selected="selected">
</select>
<select name="return_year" id="return_year">
<option value="6" selected="selected">
</select>
</td>
</tr>
</div>
</table>
</body>
OK I tried to remove all the php as requested.
Let it be known that you can not use div elements inside table-wrappers. If you wish to use the div element to add CSS to only part of a table. It is better to add a ID to the table head/row/data or just make a new table altogether for that specific part of the table.
As #DanielBeck points out, there is no table-wrapper, so I would try changing the <div id="loan"> to <table id="loan">.
You'll have to change the closing tag from </div> to </table>, of course, and it will change your javascript a little:
function checkA() {
document.getElementById('loan').style.display = 'none';
document.getElementById('assigned').style.display = 'table';
}
function checkL() {
document.getElementById('assigned').style.display = 'none';
document.getElementById('loan').style.display = 'table';
}
How to make the the text box and the the form fields to align in same line...
i gave display inline but its not working...
providing my code below....
how to fix it...
text field is one line below the buttons....
http://jsfiddle.net/S9PYV/embedded/result/
<div class="bs-docs-example" id="notesDocumentsOuterDF">
<div class="documents-make-container">
<!--<div class="insert-items-container">
<label for="idName">Name</label>
<input id="idName" type="text" name="name" value="" required="required" />
</div>-->
<div class="insert-items-container">
<select class="greenButton">
<option value="volvo">Create</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select class="greenButton">
<option value="volvo">Email|Access</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit" class="greenButton" value="Add Contacts">
</div>
<div class="insert-items-container" style="float: right;">
<!--<label for="idImageUpload">Image</label>-->
<input type="file" name="file" id="idImageUpload" class="file" size="40">
<div id="fakefile" class="fakefile">
<input type="text" class="fakeinput">
<img src="/images/icons/search.png">
</div>
</div>
<!--<div class="insert-items-container">
<label for="idContactSel">Contacts List</label>
<select id="idContactSel" name="contactselect">
<option value="">select email to share </option>
</select>
<input id="shareListBtn" class="greenButton" type="button" value="Share List" alt="sharelist">
<input id="contactListBtn" class="greenButton" type="button" value="Contacts List" alt="contactlist">
<input id="AddContactBtn" class="greenButton" type="button" value="Add Contacts" alt="addcontacts">
</div>-->
<!--<div class="insert-items-container">
<label for="idShareList">Share List</label>
<div id="idShareList" class="email-selected-container">
<table cellspacing="0" cellpadding="0" border="0" class="table">
<thead>
<tr class="documentsListHeading" role="row">
<th width="100px;">name</th>
<th width="180px;">Email</th>
<th>Permission</th>
</tr>
</thead>
<!-- share list -->
</div>
</div>
Your first insert-items-container has 100% width (as default divs do) so it's filling the whole line. You can solve this either by putting the text box in the same insert-items-container with the other form fields, or by setting all insert-items-containers to float: left