Complete a checkbox entry form and showcase it within a "division" on the current page

Hello everyone, I need some help. I have a form that I want to send to a specific div on the same page. This is what I am aiming for. I have a floating div named "basket" in the top right corner of my page where I want the form data to be displayed after submission.

I'm having trouble finding information on how to do this and would appreciate it if someone could guide me through the process. Just to clarify, I haven't written any AJAX code yet, so please keep it as simple as possible. Thank you in advance :)

    <form id="payment">
                <!-- select pizza section  -->
                    <fieldset>  
                        <legend> Select your pizza </legend> 
                        <p><input type="checkbox" name="pizza_size" value="select_pizza_size"> Small<span class="price"> £5.50</span></p>
                        <p><input type="checkbox" name="pizza_size" value="select_pizza_size"> Medium<span class="price"> £8.50</span></p>
                        <p><input type="checkbox" name="pizza_size" value="select_pizza_size"> Large <span class="price"> £11.50</span></p>
                    </fieldset>
                <!-- toppings section -->   
                    <fieldset>
                        <legend> Select one or more toppings </legend>
                            <p><input type="checkbox" name="topping" value="select_pizza_topping"> Bacon <span class="price"> £0.20</span></p>
                            <p><input type="checkbox" name="topping" value="select_pizza_topping"> Chicken <span class="price"> £0.20</span></p>
                            <p><input type="checkbox" name="topping" value="select_pizza_topping"> Beef <span class="price"> £0.20</span></p>
                            <p><input type="checkbox" name="topping" value="select_pizza_topping"> Sweetcorn <span class="price"> £0.20</span></p>
                            <p><input type="checkbox" name="topping" value="select_pizza_topping"> Onion <span class="price"> £0.20</span></p>
                            <p><input type="checkbox" name="topping" value="select_pizza_topping"> Peppers <span class="price"> £0.20</span></p>
                            <p><input type="checkbox" name="topping" value="select_pizza_topping"> Sausage <span class="price"> £0.20</span></p>
                    </fieldset>


                <!-- extras section --> 


                    <fieldset>
                        <legend>Extras</legend>
                           <p><input type="checkbox" name="extras" value="extra_sides"> Extra Cheese <span class="price"> £0.50</span></p>
                           <p><input type="checkbox" name="extras" value="extra_sides"> Chips <span class="price"> £1.50</span></p>
                           <p><input type="checkbox" name="extras" value="extra_sides"> Cola <span class="price"> £0.50</span></p>
                           <p><input type="checkbox" name="extras" value="extra_sides"> Fanta <span class="price"> £0.50</span></p>

                    </fieldset>

                <!-- Delivery info section -->     
                    <fieldset>  
                        <legend> Delivery Information </legend> 
                            <p><label> Address Line 1(*): </label> <input type="text" name="address" required></p>
                            <p><label> Address Line 2: </label> <input type="text" name="address"></p>
                            <p><label> Post Code(*):   </label> <input type="text" name="post_code" required></p>
                    </fieldset>
                <!-- Submit button --> 
                    <div id="submit">       
                        <input type="submit" class="submit_button" value="Place Order">
                        <input type="reset" class="reset_button" value="Reset"> 
                    </div>          
            </form>

https://i.sstatic.net/kOcZJ.jpg

javascripthtmlcssajax

Answer №1

Implement the use of float in your form and result container, with the addition made to the parent div element named content-pane.

Follow the example below.

  .content-pane {
    float: left;
    width: 40%;
  }

  .details {
    float: left;
    width: 20%;
    margin: 10px 0 0 30px;
    padding: 10px;
    border: 5px dashed green;
  }

  .details h2 {
    text-align: center;
  }
<div class="content-pane">
  <form id="payment">
    <!-- select pizza section -->
    <fieldset>
      <legend>Select Your Pizza</legend>
      <p>
        <input type="checkbox" name="pizza_size" value="select_pizza_size"> Small<span class="price"> £5.50</span></p>
      <p>
        <input type="checkbox" name="pizza_size" value="select_pizza_size"> Medium<span class="price"> £8.50</span></p>
      <p>
        <input type="checkbox" name="pizza_size" value="select_pizza_size"> Large <span class="price"> £11.50</span></p>
    </fieldset>
    <!-- toppings section -->
    <fieldset>
      <legend>Select One or More Toppings</legend>
      <p>
        <input type="checkbox" name="topping" value="select_pizza_topping"> Bacon <span class="price"> £0.20</span></p>
      <p>
        <input type="checkbox" name="topping" value="select_pizza_topping"> Chicken <span class="price"> £0.20</span></p>
      <p>
        <input type="checkbox" name="topping" value="select_pizza_topping"> Beef <span class="price"> £0.20</span></p>
      <p>
        <input type="checkbox" name="topping" value="select_pizza_topping"> Sweetcorn <span class="price"> £0.20</span></p>
      <p>
        <input type="checkbox" name="topping" value="select_pizza_topping"> Onion <span class="price"> £0.20</span></p>
      <p>
        <input type="checkbox" name="topping" value="select_pizza_topping"> Peppers <span class="price"> £0.20</span></p>
      <p>
        <input type="checkbox" name="topping" value="select_pizza_topping"> Sausage <span class="price"> £0.20</span></p>
    </fieldset>

    <!-- extras section -->

    <fieldset>
      <legend>Extras</legend>
      <p>
        <input type="checkbox" name="extras" value="extra_sides"> Extra Cheese <span class="price"> £0.50</span></p>
      <p>
        <input type="checkbox" name="extras" value="extra_sides"> Chips <span class="price"> £1.50</span></p>
      <p>
        <input type="checkbox" name="extras" value="extra_sides"> Cola <span class="price"> £0.50</span></p>
      <p>
        <input type="checkbox" name="extras" value="extra_sides"> Fanta <span class="price"> £0.50</span></p>
    </fieldset>

    <!-- delivery info section -->

    <fieldset>
      <legend>Delivery Information</legend>
      <p>
        <label>Address Line 1(*): </label>
        <input type="text" name="address" required>
      </p>
      <p>
        <label>Address Line 2: </label>
        <input type="text" name="address">
      </p>
      <p>
        <label>Post Code(*): </label>
        <input type="text" name="post_code" required>
      </p>
    </fieldset>

    <!-- Submit button -->
    <div id="submit">
      <input type="submit" class="submit_button" value="Place Order">
      <input type="reset" class="reset_button" value="Reset">
    </div>
  </form>
</div>
<div class="details">
  <h2>Order Summary<h2>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on displaying a document in react-doc-viewer from a protected API endpoint in either Next.Js or ReactJs

I am looking to display files in my Next.JS web application using a secure API. The API provides the following data: { "name": "Test1.docx", "contentUri": "https://api.mypurecloud.ie/api/v2/downloads/x ...

javascriptreactjsnext.js

Error: The Vue bind object property cannot be read because it is undefined in the class binding

I'm attempting to associate a class with an object property, but I encounter an issue when trying to trigger the @click event on the list object - the console states that it cannot read the isSelected property of the object. My goal is to activate a c ...

csslistvue.js

Issue with event listener arising once elements have been loaded into the dom

I have a project where I want to click on a category card to obtain its id and then redirect to the movies screen. I understand that using row.eventlistener() in index.js executes before the elements are rendered, causing the id not to be captured. How ca ...

javascripthtmlfetch-api

Node.js Express API returns an error status with an empty array response in a RestFul manner

Currently, I am in the process of developing a RestFull API using Node.JS to validate if a specific license plate is registered in my database (which happens to be MySQL). The endpoint that I have set up for this task is as follows: http://localhost:3009/_ ...

javascriptnode.jsrestexpress

Tips for creating content with ellipsis after every 5 characters

I am new to coding and I need some assistance. I want to truncate text in my navigation bar if it exceeds 5 characters by displaying the first 5 characters followed by an ellipsis. This is to prevent display issues in my nav menu. For example: Input: T ...

phphtmlcss

Design a customizable input field to collect HTML/JS tags

I'm looking to incorporate a similar design element on my website. Can anyone offer me some guidance? Check out the image here ...

javascripthtmlcss

Issue with cross-origin in Salesforce reply (Access-Control-Allow-Origin)

While attempting to retrieve records from Salesforce using external local files via JS, I encountered an issue. Although I can see a response in the network tab, the console displayed the following error message: "XMLHttpRequest cannot load . No 'A ...

javascriptjquerysalesforcesalesforce-service-cloudsalesforce-communities

Issue with Vue JS component on blade template page

Having trouble loading a Vue component into a Laravel blade file? Despite making changes, the content of my vue file isn't showing up in the blade file - even though there are no errors in the console. Any suggestions on how to resolve this issue woul ...

javascripthtmllaravelvue.js

Developing a robust system for managing classnames

I have a question regarding the article I found on Quora about Facebook's CSS class names structure. They mentioned that both Facebook and Google use a build system to convert developer-friendly class names into shorter ones to save bandwidth and crea ...

javascriptphpjquerycss

Display a pleasant alert message when the file is not recognized as an image during the loading

Is there someone who can assist me? I have attempted multiple times but without success. How can I display a sweet alert when a file is selected that is not an image? <input type ="file" /> ...

javascripthtml

`vue.js: li element tag numbers not displaying correctly`

Issue with Number list not displaying correctly using Vue.js I have tried sending it like this. Is there a fix for this problem? This is the code snippet I used to output in Vue.js: p(v-html="selectedProduct.description") Snapsho ...

javascriptvue.js

How to keep a div element fixed on the page's border vertically and horizontally adhered

Would you mind visiting the following link: and observing the layout of the page? My goal is to affix or "attach" a small div element to the right side of the page, just slightly outside of the right frame of the page. Vertically, I want this div to be ...

csshtmlpositioningfixed

What steps should be taken to retrieve the contents of a file that has been chosen using the browse

You have successfully implemented a browse button that allows the user to navigate the directory and choose a file. The path and file name are then displayed in the text element of the Browse button complex. Now, the question arises - how can I extract dat ...

javascriptjquerypythonhtmldom

jqgrid now features inline editing, which allows for the posting of only the data that

My jqGrid includes editable columns, and I am looking for a way to only post the data of columns where changes have been made. Here is an example of my colModel: colModel: [{ name: 'I_PK', index: 'u.I_PK ...

javascriptjqueryjqgridfree-jqgrid

Exporting data acquired from a MongoDB query using Node.js

I am currently working on exporting the contents of a MongoDB collection by using exports.getAllQuestions = async function (){ MongoClient.connect(url, function(err, db) { if (err) throw err; var dbo = db.db("Time4Trivia"); ...

javascriptnode.jsmongodbpromise

Looking for assistance with retrieving all files from a directory based on their file extensions in JavaScript

Looking for a way to gather all the '.txt' files from a folder that also contains a 'backup' folder, and moving them into the 'backup' folder using Node.js. If you have any suggestions, please share. Thanks! Best regards, M ...

javascriptnode.js

What is preventing me from altering the array one element at a time?

I am working with an array and a class let questions = [ { questionText: '', answerOptions: [], }, ]; class Questions { constructor(questionText,answerOptions) { this.questionText = questionText; this.answerOptio ...

javascriptarraysreactjsobject

When Google Chrome encounters two variables or functions with the same name, how does it respond?

I am curious what happens when Google Chrome encounters two variables with the same name. In my particular case, this issue arises in the code snippet available at this link, which is a small portion of the entire code. I am facing an issue where placing C ...

javascriptcsshtmlgoogle-chrome

MUI: The fontFamily property is not able to be overridden by nesting within the

My goal is to have different fonts for different parts of my application using theme nesting. Unfortunately, I discovered that theme nesting doesn't work when it comes to overriding fonts. In my App.js file: import React from "react"; impor ...

javascriptreactjsmaterial-ui

Avoiding the default action and using a false return value do not produce the

Despite trying preventDefault, return false, and stopImmediatePropagation, the page continues to redirect back to the first selection instead of redirecting to the textarea after inputting all required fields and clicking on the button. The issue persists ...

javascriptevent-handlingjquery