I am interested in incorporating various forms within this code

Question

I am interested in incorporating various forms within this code

I followed an online tutorial to create this code, and I've made some edits myself, mainly related to the buttons that display information. However, I'm still learning and struggling with adding different forms to each section. I would really appreciate some help as my goal is to have each section with its own form that works independently. If I can successfully create two forms that work without any errors, I can easily replicate the process for additional sections. I just need guidance on how to achieve that.

Here is a snippet of my code:


    /* CSS styles for the form */
    {
        // CSS styles go here
    }
    
    <!-- HTML structure -->
    <div id="hide-logo">...</div>

javascript html css deployment

Answer 1

Answer №1

Understanding the complexity of your sample code may be challenging, but I can provide a starting point for you.

To simplify your process, consider assigning the same class to all forms and iterating through them using a loop. Remember that IDs should remain unique.

// Selecting all forms
const forms = document.querySelectorAll('.form')

// Iterating through each form
forms.forEach(form => {
  // Getting the submit button within this form
  const submit = form.querySelector('.submit')
  
  // Getting the input field within this form
  const input = form.querySelector('input')

  // Adding a click event listener to the submit button
  submit.addEventListener('click', e => {
    // Preventing page reload for demonstration purposes
    e.preventDefault()
    
    // Logging the value of the input field
    console.log(input.value)
  })
})

<form class="form">
  <input type="text" value="Form 1">
  <button class="submit">Submit</button>
</form>

<hr>

<form class="form">
  <input type="text" value="Form 2">
  <button class="submit">Submit</button>
</form>

Answer 2

Understanding the complexity of your sample code may be challenging, but I can provide a starting point for you.

To simplify your process, consider assigning the same class to all forms and iterating through them using a loop. Remember that IDs should remain unique.

// Selecting all forms
const forms = document.querySelectorAll('.form')

// Iterating through each form
forms.forEach(form => {
  // Getting the submit button within this form
  const submit = form.querySelector('.submit')
  
  // Getting the input field within this form
  const input = form.querySelector('input')

  // Adding a click event listener to the submit button
  submit.addEventListener('click', e => {
    // Preventing page reload for demonstration purposes
    e.preventDefault()
    
    // Logging the value of the input field
    console.log(input.value)
  })
})

<form class="form">
  <input type="text" value="Form 1">
  <button class="submit">Submit</button>
</form>

<hr>

<form class="form">
  <input type="text" value="Form 2">
  <button class="submit">Submit</button>
</form>

I am interested in incorporating various forms within this code

Answer №1

Similar questions

Save only the most recent iteration of the javascript file in the cache

When the if statement fails to halt the code from running

Ensuring that the text input is perfectly lined up with the submit button

To address the issue of input values not persisting in a Selenium iframe element, I am implementing a custom JavaScript event to

Ways to customize the default CSS styles of angularJS for elements like search box and more

What is the proper jQuery traversal method to display a single templated element?

Vue template is not being rendered when served through Django

Error: It is not possible to add the "providers" property as the object is not extendable within N

How can VueJs effectively update the data fetched using the created function?

The characteristics and functions of the THREE.TransformControls

Filtering Tables with AngularJS

Troubleshooting issue with jquery.backgroundSize.js on Internet Explorer 8

Ways to rearrange items in the navigation bar?

The ENOENT error code 4058 occurred while attempting to create a new react application using

Preventing a user with the same name as the one in the table from being added by utilizing a jQuery contains check proved

What is the best way to store JSON data in Mongoose database?

Exploring discrepancies in jQuery AJAX responses between Chrome and Firefox

What is the best way to extract all <tr> elements from a <tbody> and then convert them into a String?

Issues with router middleware functionality in Node.js hinder proper operations

The functionality of CSS isn't up to snuff on Mozilla Firefox