I have developed a form where a person is putting in a booking for a helicopter flight. As part of the form, I have a select element where they choose how many passengers are on the booking. I had a div on the page which I used JavaScript to clone as many times as selected from the select option. Here's the problem - every time I clone the div and submit the form, it only displays the user inputs from the last cloned div. I have used "[ ]" on the end of each of the input names, but still no avail. I believe the issues may be because the div (and then the inputs of the form in that div) are being cloned client-side instead of server-side. I have been searching forums and tutorials for weeks to try and find a solution, but again, no avail.
<tr><td class="form_label">Passengers</td><td valign="middle">
<select id="numpass" name="numpass" class="form_e"/>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td></tr>
<div id="passenger" class="passenger">
<div class="form_head">Passenger [] - Details</div>
<br />
<table width="100%" cellpadding="2" cellspacing="4">
<tr>
<td class="form_label">First Name: <input type="text" name="cust_fname[]" class="form_f" required="required"/> Last Name: <input type="text" name="cust_lname[]" class="form_f" required="required"/> Weight (kg): <input type="text" name="cust_kg[]" class="form_a" required="required"/></td>
</tr>
<tr>
<td class="form_label">Phone: <input type="text" name="cust_phone[]" class="form_g" required="required"/> Email: <input type="text" name="cust_email[]" class="form_d" /></td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="2" cellspacing="4">
<tr><td class="form_label">Address:</td></tr>
<tr>
<td class="form_label">Number: <input type="text" name="cust_addr_num[]" class="form_a" /> Street: <input type="text" name="cust_addr_street[]" class="form_b" /> Suburb/Town: <input type="text" name="cust_addr_sub[]" class="form_f" /></td></tr>
<tr><td class="form_label">State: <input type="text" name="cust_addr_state[]" class="form_b" /> Postcode: <input type="text" name="cust_addr_post[]" class="form_a" /> Country: <select class="form_c" name="cust_addr_country[]">
<option value="">--- Select Country ---</option>
<option value="Australia">Australia</option></select></td></tr></table>
</td></tr></table>
</div>
<div id="repeat" class="repeat"></div>
JS
function cpyDIV(val){
$("#repeat").empty();
for (var i = 0; i < val -1; i++){
var $clone = $("#passenger").clone();
$clone[0].id += i;
$clone.appendTo("#repeat");
}
}
Related
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'm having issues using the below code to save the text input value to a .txt file. Any suggestions would be appreciated. I'm calling the function from the .js file using onclick in the last input tag. It's supposed to save the data from the second to last input tag to the .txt file. Ultimately I would like to save all values in the form, but just one value is a starting point.
<script src="../Js/Code.js"></script>
<form>
<table>
<tr>
<td>
<label for="incomeday">Date of income:</label>
<input type="date" name="incomeday">
</td>
<td>
<label for="incometype">Frequency:</label>
<select type="list" name="incometype">
<option>Select One</option>
<option value="One Time">One Time</option>
<option value="Weekly">Weekly</option>
<option value="Bi-Weekly">Bi-Weekly</option>
<option value="Monthly">Monthly</option>
</td>
<td>
<label for="incomeamount">Amount:</lable>
<input type="text" name="incomeamount" value="">
</td>
<td>
<input type="submit" onclick="saveIncome()" value="Submit">
</td>
</tr>
</table>
</form>
function saveIncome(){
var amount = document.getElementsByName("incomeamount").value;
var fo = fopen("../Data/Data.txt","w");
fwrite("../Data/Data.txt",amount);
fclose("../Data/Data.txt");
}
Here is my code below. I do have a form wherein consists of three dropdowns and input boxes.So I do want to check whether a field is blank or for negative numbers being entered?
//Dependant dropdown code
$("#item").change(function() {
var iname = $(this).val();
$.post("fetch_data.php",
{"iname": iname},
function (data) {
document.getElementById('new_select').innerHTML=data;
});
});
$('#submitBtn').click(function(){
var txt = $(".check").val();
if(parseInt(txt) < 0 || txt == -1){
alert("Enter positive values ..!!!!");
}else{
$('#sess').text($('#sesion').val());
$('#ite').text($('#item').val());
$('#new').text($('#new_select').val());
$('#qin').text($('#qtyin').val());
$('#qout').text($('#qtyout').val());
}
});
$('#submit').click(function(){
$.ajax({
type:"POST",
url:'profile.php',
data:{sesion:$("#sess").text(),iname:$("#ite").text(),price:$("#new").text(),category:$("#qin").text(),qty:$("#qout").text()},
success: function(data){
$("#confirm-submit").modal("hide");
$("#result").html("<div class='alert alert-warning'>Record Inserted Successfully</div>");
setTimeout(function(){
$("#result").fadeOut();
},5000);
window.location.reload();
}
});
});
});
<form method='post' name='ireg' class="form-inline" role="form" id="formfield" enctype="multipart/form-data" onsubmit="return validateForm();">
<table id="entry" class="table table-responsive">
<tr>
<td> <label for="sesion">Session</label></td>
<td><select id="sesion" name="sesion" class="form-control check">
<option>--Select--</option>
<option>Breakfast</option>
<option>Lunch</option>
<option>Dinner</option>
</select></td>
<td> <label for="item_name">Item Name</label></td>
<td><select name="iname" id="item" class="form-control check" style="width:180px;">
<option>Select Item</option>
<?php
include 'db.php';
$select = $conn->query("SELECT item_name from items");
while($row = mysqli_fetch_array($select, MYSQLI_ASSOC))
{
echo "<option>".$row['item_name']."</option>";
}
?>
</select>
</td>
<td>
<label for="new_select">Price</label>
</td>
<td>
<select id="new_select" name="new_select" class="form-control check">
<option>Select Price</option>
</select>
</td>
<td>
<label for="qtyin">Qty(Dine In)</label>
</td>
<td>
<input type="number" id="qtyin" min="0" name="qtyin" class="check" placeholder="QTY Dine In" style="width:80px;"/>
</td>
<td>
<label for="qtyout">Qty(Parcel)</label>
</td>
<td>
<input type="number" id="qtyout" name="qtyout" min="0" class="check" placeholder="QTY Dine Out" style="width:80px;"/>
</td>
<td>
<!-- <button type="submit" name="submit" class="btn btn-primary">Submit</button> -->
<input type="button" name="submit" value="Submit" id="submitBtn" data-toggle="modal"
data-target="#confirm-submit" class="btn btn-success" />
</td>
</tr>
</table>
</form>
I am trying to take input from user where validation is needed and once it is validated goes to modal popup to confirm then submit process..
If HTML5 validation is supported, you do not need jQuery for validation.
<input type=number min=0 required placeholder='Enter a positive number'>
If you want a custom validation message, the following should do:
<input type=number min=0 required placeholder="Enter a positive number"
oninvalid="this.setCustomValidity('Enter User Name Here')"
oninput="setCustomValidity('')">
The :invalid psuedo class can be used to apply custom CSS to it.
This link contains some examples. For browser support see caniuse.
EDIT:
For dropdowns, you may use the required attribute.
<select required>
<option value="">None</option>
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
</select>
Note that the first option has to be blank. For details on applying required to <select> see this question.
I've one HTML form. This form is containing HTML table. The actual HTML table is very large. For your reference I'm showing below the HTML code of a form with tablw containing only two records:
<form action="rebates.php" role="form" method="post">
<div style="margin-left: 12px" class="col-xs-4">
<div class="form-group">
<label for="company_name" class="col-lg-4">Manufacturer </label>
<div class="col-lg-7">
<select id="company_name" name="company_name" class="form-control">
<option value="" selected='selected'>Select Manufacturer</option>
<option value="33" >Eywa Solutions</option>
<option value="37" >Amazon</option>
<option value="40" >Test</option>
<option value="42" >RK</option>
<option value="46" >Santa Margherita</option>
</select>
</div>
</div>
</div>
<div style="margin-left: -61px" class="col-xs-4">
<div class="form-group">
<label for="product_id" class="col-lg-3">Product </label>
<div class="col-lg-7">
<select id="product_id" name="product_id" class="form-control">
<option value="" selected='selected'>Select Product</option>
<option value="5" >Chesse</option>
<option value="8" >Laptop an</option>
<option value="9" >Prosecco</option>
</select>
</div>
</div>
</div>
</div>
<br/>
<div class="col-lg-2"></div>
<div class="col-md-8">
<div style="overflow:auto" class="well">
<button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
<br/>
<div class="table-responsive">
<table id="blacklistgrid" class="table table-bordered table-hover table-striped">
<thead>
<tr id="Row1">
<th style="vertical-align:middle" >Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody>
<tr id="Row2">
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Units
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Microsecond</li>
<li>oz</li>
<li>ml</li>
<li>L</li>
<li>gms</li>
</ul>
</div>
</td>
<td>
<input type="text" name="amount[]" value="3.00" class="form-control" size="9"/>
</td>
</tr>
<tr>
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="4" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select name="units[]" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td><input type="text" name="amount[]" value="7.00" class="form-control" size="9"/></td>
</tr>
</tbody>
</table>
<button style="float:right" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
</div>
</div> <!-- /span8 -->
<div class="row">
<div class="col-xs-5"></div>
<div style="margin-left: -9px" class="col-xs-5">
<button type="button" class="btn btn-default">Go Back</button>
<button type="submit" class="btn btn-primary">Preview</button>
</div>
</div>
</div>
</form>
I'm dynamically appending rows to the table by clicking on a button(the button is present in a tag, you can see in above code). The jQuery code I writen for adding rows dynamically is as follows:
/*JQuery for appending rows at the end of table*/
<script language="javascript">
$( document ).ready(function() {
$('.btnAdd').click(function () {
var count = 1,
first_row = $('#Row2');
//while (count-- > 0) first_row.clone().appendTo('#blacklistgrid');
while (count-- > 0) first_row.clone().removeAttr('id').appendTo('#blacklistgrid');
});
});
</script>
Now the issue I'm facing is if I append one or more rows at the end of table, fill data in the textfields from each appended row and submit the form by clicking on Submit button, in $_POST I'm not able to get the data from appended rows. I'm getting the data only from the rows which are previously present when the page loads. So can anyone help me in getting the values from the dynamically appended rows also?
The HTMl code of dynamically appended table row is as follows:
<tr>
<td>
<input class="form-control" type="text" size="8" value="" name="pack[]">
</td>
<td>
<input class="form-control" type="text" size="8" value="2" name="quantity[]">
</td>
<td>
<input class="form-control" type="text" size="8" value="750" name="volume[]">
</td>
<td>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
Units
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
Microsecond
</li>
<li>
oz
</li>
<li>
ml
</li>
<li>
L
</li>
<li>
gms
</li>
</ul>
</div>
</td>
<td>
<input class="form-control" type="text" size="9" value="3.00" name="amount[]">
</td>
</tr>
Well, you have done the right thing. Please see the name field of your input element.
<input type="text" name="pack[]" value="" class="form-control" size="8"/>
Please notice the name="pack[]" using an array of name as input. If you have cloned the table, the input element will be cloned. Since you aren't using an id, it's not a problem.
Now, when sending the data, in rebates.php check if the form data is present. It can be done by checking up the request method. It's a secure way. Once the check has succeeded, you can check if the field is present
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// handle the fields
$packs = null;
if (isset($_POST['pack']) {
$packs = $_POST['pack'];
}
}
Please notice that you are using pack without the [] to get input data from pack[] input fields. The variable $pack will contain an array. If you want to check the content, use var_dump($pack);. It should reveal all data from the available pack[] elements, either added dynamically or statically.
Then, if you have collected all data, you have to loop through it. It can be done with either for- or foreach-loop.
if ($packs != null) {
foreach($packs as $pack) {
// use the field $pack to do something
echo 'amount of pack : ' . $pack;
}
}
Do the same for other name fields which is also from array.
From jQuery Doc:
Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using class attributes as identifiers instead.
You are cloning table row with #Row2 id. To avoid it:
first_row.clone().removeAttr('id').appendTo('#blacklistgrid');
Alternatively, you could do something like...
while (count-- > 0) first_row.clone().appendTo('#blacklistgrid').attr('id','Row' + $('#blacklistgrid tr').length);
I have the following code that when i change the drop down it doesnt matter which i choose it always puts the first part as the selected....
<script type="text/javascript">
function changeValue(){
var option=document.getElementById('block').value;
if(option=="1"){
document.getElementById('a').value="18005551212";
document.getElementById('b').value="PW";
}
else if(option=="2"){
document.getElementById('a').value="5551212";
document.getElementById('b').value="Collector";
}
if(option=="3"){
document.getElementById('a').value="3";
document.getElementById('b').value="3";
}
else if(option=="4"){
document.getElementById('a').value="4";
document.getElementById('b').value="4";
}
}
</script>
<form method="post">
<table> <tr><b>Add new data using form below</b></tr>
<tr><td> Keyword: </td><td> <input type="text" name="keyword" id="keyword"><br></td></tr>
<tr><td> Block?: </td><td><select name="block" id="block" onchange="changeValue();">
<option id="block1" value="1">Block 1</option>
<option id="block2" value="2">Block 2</option>
<option id="block3" value="3">Block 3 </option>
<option id="block4" value="4">Block 4</option>
<option id="block5" value="5">Block 5</option>
</select><br></td></tr>
<tr><td> Phone #:</td><td> <input type="text" name="phone" id="a"><br></td></tr>
<tr><td> Reason: </td><td> <input type="text" name="reason" id="b"><br></td></tr>
<tr><td> </td><td align="left"> <input type="submit" name="submit" value="Submit Data"></td></tr>
</table>
</form>
So when i select option 2 it should show collector and phone #...
You're missing a <td colspan="2"> in your first row, but regardless, your code works fine. Test here.
Go on jsfiddle.net and paste your code in. The code you provided works.