Hello my name is logan i am currently trying to make a flower order form for my floral design final project I currently have the main aspects of it down such as name for order,payment type,delivery date,what flower type, etc…
But with the credit card payment type I am trying to have a card fill out form with like card number date and cvc I got it working yesterday but I did something and now its broken can someone help troubleshoot it with me I belive it will be within lines 129-end
Flower Order Form
body{
font-family:Arial, sans-serif;
margin: 0;
padding: 0;
background: Linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
background-size: 100% 100%;
background-attachment: fixed;
background-repeat: no-repeat;
}
h1, label, select, button {
color: black;
}
#flower_type option {
color: black;
}
#payment_method option {
color: black;
}
button[type="submit"] {
color: black;
}
h1{
text-align: center;
}
label{
font-weight:bold;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select,
input[type="number"],
input[type"date"]{
width:100%;
padding:10px;
margin-bottom:15px;
border:1px solid#ccc;
border-radius:5px;
}
input[type="submit"]{
width:100%;
padding:10px;
background-color:#4CAF50;
color:white;
border:none;
border-radius:5px;
cursor:pointer;
}
input[type="submit"]:hover{
background-color:#45a049;
}
Flower Order Form
Your Name:
Your Email:
Your Phone Number:
Delivery Address:
Flower Type:
red Rose
Lily
Yellow Tulip
White Rose
Babys Breath
Poppy
Carnation
Florist carnation
Massachusetts Mayflower
Chrysanthemum
Quanity:
Delivery Date:
Additional Notes:
Payment Method:
Cash on Delivery
Card on Delivery
Credit Card
<div id="card_details" style="display: none;">
<label for="card_number">Card Number:</label><br>
<input type="text" id="card_number" name="card_number"><br><br>
<label for="expiry_date">Expiration Date:<label><br>
<input type="text" id="expiry_date" name="expiry_date"><br><br>
<label for="cvc">CVC:<label><br><br>
<input type="text" id="cvc" name="cvc"><br><br>
</div>
<button type="submit">Submit Order</button>
Thank you for your support!
we will contact you shortly for further details.
ok i will format the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="veiwport" content="width=device-width,initial-scale=1.0">
<title>Flower Order Form</title>
<style>
body{
font-family:Arial, sans-serif;
margin: 0;
padding: 0;
background: Linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
background-size: 100% 100%;
background-attachment: fixed;
background-repeat: no-repeat;
}
h1, label, select, button {
color: black;
}
#flower_type option {
color: black;
}
#payment_method option {
color: black;
}
button[type="submit"] {
color: black;
}
h1{
text-align: center;
}
label{
font-weight:bold;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select,
input[type="number"],
input[type"date"]{
width:100%;
padding:10px;
margin-bottom:15px;
border:1px solid#ccc;
border-radius:5px;
}
input[type="submit"]{
width:100%;
padding:10px;
background-color:#4CAF50;
color:white;
border:none;
border-radius:5px;
cursor:pointer;
}
input[type="submit"]:hover{
background-color:#45a049;
}
</style>
</head>
<body>
<h1>Flower Order Form</h1>
<form action="submit_order.php" method="post">
<label for="name">Your Name:</label><br>
<input type="text" id="name" name="name" required=""><br>
<br>
<label for="email">Your Email:</label><br>
<input type="email" id="email" name="email" required=""><br>
<br>
<label type="phone">Your Phone Number:</label><br>
<input type="tel" id="phone" name="phone" required=""><br>
<br>
<label for="address">Delivery Address:</label><br>
<textarea id="address" name="address" required=""></textarea><br>
<br>
<label for="flower_type">Flower Type:</label><br>
<select id="flower_type" name="flower_type">
<option value="red_rose">
red Rose
</option>
<option value="lily">
Lily
</option>
<option value="yellow_tulip">
Yellow Tulip
</option>
<option value="white_rose">
White Rose
</option>
<option value="baby's_breath'">
Babys Breath
</option>
<option value="poppy">
Poppy
</option>
<option value="carnation">
Carnation
</option>
<option value="florist_carnation">
Florist carnation
</option>
<option>
Massachusetts Mayflower
</option>
<option>
Chrysanthemum
</option>
</select><br>
<br>
<label for="quanity">Quanity:</label><br>
<input type="number" id="quanity" name="quanity" min="1" required=""><br>
<br>
<label for="delivery_date">Delivery Date:</label><br>
<input type="date" id="delivery_date" name="delivery_date" required=""><br>
<br>
<label for="additional_notes">Additional Notes:</label><br>
<textarea id="additional_notes" name="additional_notes"></textarea><br>
<br>
<label for="payment_method">Payment Method:</label><br>
<select id="payment_method" name="payment_method">
<option value="cash_on_delivery">
Cash on Delivery
</option>
<option value="card_on_delivery">
Card on Delivery
</option>
<option value="credit_card">
Credit Card
</option>
</select><br><br>
<div id="card_details" style="display: none;">
<label for="card_number">Card Number:</label><br>
<input type="text" id="card_number" name="card_number"><br><br>
<label for="expiry_date">Expiration Date:<label><br>
<input type="text" id="expiry_date" name="expiry_date"><br><br>
<label for="cvc">CVC:<label><br><br>
<input type="text" id="cvc" name="cvc"><br><br>
</div>
<button type="submit">Submit Order</button>
</form>
<div id="thank-you" style="display: none;">
<h2>Thank you for your support!</h2>
<p>we will contact you shortly for further details.</p>
</div>
<script>
document.getElementById('payment_method').addEventListener('change',function(){
var paymentMethod = this.value;
if (payment_method === 'credit_card'){
document.getElementById('card_details').style.display = 'block';
}else{
document.getElementById('card_details').style.display = 'none';
}
});
</script>
</body>
</html>
ray-13
April 26, 2024, 2:01pm
5
java7517482823:
and now its broken
Also please provide as much details as possible about the current issues
What i mean about that is that when you select credit card as the payment option the card information fill out form is not showing up let me show you
ray-13
April 26, 2024, 2:16pm
10
Thanks for details, I’ll check that
thankyou so much
i suspect it is in the script section from lines 160-172
<script>
document.getElementById('payment_method').addEventListener('change',function(){
var paymentMethod = this.value;
if (payment_method === 'credit_card'){
document.getElementById('card_details').style.display = 'block';
}else{
document.getElementById('card_details').style.display = 'none';
}
});
</script>
</body>
</html>
i finnaly figured it out it was the script the id for the card details was " card-details" and not “card_details”
1 Like
