activate elements in several forms at the same time

Question

activate elements in several forms at the same time

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I have a page with three forms. All the elements are deactivated except the input that heads each form. I need to enable these elements so that they activate and deactivate each form. If it were a single form it would be simple with document.form and a control flow, but since there are several at the same time I could not solve it. Attached is the code.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>cervezas</title>
        <style>
.formulario {
    margin-top: 5.5%;
    margin-left: 5.5%;
    margin-right: 5.5%;
    display: inline-flex;
}

.formulario.mahou {
    width: 25%;
}

.formulario.heineken {
    margin: auto;
    width: 25%;
}

.formulario.carlsberg {
    width: 25%;
}

.datos label {
    opacity: 0.5;
}

.encabezado {
    height: 50px;
    font-weight: 600;
}

input[type=text] {
    width: 100%; 
}

select {
    width: 100%;
}

textarea {
    width: 98%;
}

input[type=submit] {
    display: block;
    margin: auto;
}

input[type="text"]:disabled { 
    background: #E5E5E5; 
}

textarea:disabled {
    background: #E5E5E5; 
}

select:disabled {
    width: 100%;
    color: #BBBBBB;
    background-color: #E5E5E5;
}

input[type=submit]:disabled {
    background-color: #E5E5E5;
    color: #BBBBBB;
    margin: auto;
}
        </style>
        </head>
<body>
    
    
<div class="formulario mahou">
<form name="mahou" method="post" action="">
 
<div class="encabezado">
    <input type="radio" name="cerveza" value="mahou">&nbsp;&nbsp;MAHOU
</div>
            
<div class ="datos">
    <label for="nombre">Nombre:</label>
    <input type="text" name="nombre" disabled>
 
    <label for="email">Email:</label>
    <input type="text" name="email" disabled>

    <label for="telefono">Teléfono:</label>
    <input type="text" name="telefono" disabled>
</div>

<div class="datos">
        <label for="vasos">Cuantos vasos tomas a la semana?:</label>
        <select name="vasos-mahou" disabled>
            <option value="m1">menos de 10</option>
            <option value="m2">menos de 20</option>
            <option value="m3">menos de 30</option>
            <option value="m4">menos de 40</option>
        </select>
</div>
        
<div class="datos">
        <label for="marca">Cómo te enteraste de la marca?</label>
        <textarea name="marca" disabled></textarea>
</div>
    
<div class="datos">
        <input type="submit" value="enviar" disabled>
</div>
</form>
</div>
    
    
<div class="formulario heineken">
    <form name="heineken" method="post" action="">
 
<div class="encabezado">
    <input type="radio" name="cerveza" value="heineken">&nbsp;&nbsp;HEINEKEN
</div>
            
<div class ="datos">
    <label for="nombre">Nombre:</label>
    <input type="text" name="nombre" disabled>
 
    <label for="email">Email:</label>
    <input type="text" name="email" disabled>

    <label for="telefono">Teléfono:</label>
    <input type="text" name="telefono" disabled>
</div>

<div class="datos">
        <label for="vasos">Cuantos vasos tomas a la semana:</label>
        <select name="vasos-heineken" disabled>
            <option value="h1">menos de 10</option>
            <option value="h2">menos de 20</option>
            <option value="h3">menos de 30</option>
            <option value="h4">menos de 40</option>
        </select>
</div>
        
<div class="datos">
        <label for="marca">Cómo te enteraste de la marca?</label>
        <textarea name="marca" disabled></textarea>
</div>    


<div class="datos">
        <input type="submit" value="enviar" disabled>
</div>
</form>
</div> 

    
<div class="formulario carlsberg">
     <form name="carlsberg" method="post" action="">
 
<div class="encabezado">
    <input type="radio" name="cerveza" value="carlsberg">&nbsp;&nbsp;CARLSBERG
</div>
            
<div class ="datos">
    <label for="nombre">Nombre:</label>
    <input type="text" name="nombre" disabled>
 
    <label for="email">Email:</label>
    <input type="text" name="email" disabled>

    <label for="telefono">Teléfono:</label>
    <input type="text" name="telefono" disabled>
</div>

<div class="datos">
        <label for="vasos">Cuantos vasos tomas a la semana:</label>
        <select name="vasos-carlsberg" disabled>
            <option value="c1">menos de 10</option>
            <option value="c2">menos de 20</option>
            <option value="c3">menos de 30</option>
            <option value="c4">menos de 40</option>
        </select>
</div>
         
<div class="datos">
        <label for="marca">Cómo te enteraste de la marca?</label>
        <textarea name="marca" disabled></textarea>
</div>             

<div class="datos">
        <input type="submit" value="enviar" disabled>
</div>
</form>
</div>  
    
    
<script src="script.js"></script>
</body>
</html>

javascript

asked by RTLM-7 09.08.2016 в 22:56

source

3 answers

Control of the keyboard with jquery to control numbers? print script tags on a div with jquery

score 2 · Answer 1

You have a design problem. The forms are exactly the same, the only thing that changes is the label of the radio that accompanies them. A much cleaner solution is to have a single form and be able to decide which brand corresponds by means of a drop-down.

For example:

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body { background: #fff; }
.form {
  box-shadow: 0px 0px 10px 2px rgba(0,0,0,.15);
  margin: 20px auto;
  width: 400px;
}
.form label {
  font-family: 'segoe ui';
  font-size: 15px;
}
.form header h3 {
  background-color: #2980b9;
  color: #fff;
  font-family: 'segoe ui';
  font-size: 32px;
  font-weight: 400;
  padding: 10px;
  text-align: center;
}
.form .brand select {
  margin-left: 12px;
}
.form input[type="text"],
.form select,
.form textarea {
  border: 1px solid #ccc;
  font-family: 'segoe ui';
  padding: .5rem 1rem;
  transition: box-shadow .15s ease;
}
.form input[type="text"]:focus,
.form select:focus,
.form textarea:focus {
  
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,.1);
  outline: none;
}
.form .body {
  border: 1px solid #ccc;
  padding: 25px 20px;
}
.form .body .separator {
  border: 0;
  border-top: 1px solid #ccc;
  height: 1px;
  margin: 25px 0;
}
.form .form-group {
  display: flex;
  flex-flow: column nowrap;
}
.form .form-group:not(:first-of-type) {
  margin-top: 10px;
}
.form .form-group label {
  margin-bottom: 5px;
}
.form .action {
  margin-top: 25px;
  padding: 10px 0px;
  text-align: right;
}
.btn {
  border: none;
  font-family: 'segoe ui';
  font-size: 15px;
  padding: .5rem 1.15rem;
}
.btn i {
  margin-right: 6px;
}
.btn.primary {
  background-color: #16a085;
  color: #fff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<article class="form">
    <header>
      <h3>Danos tu opinión</h3>
    </header>
    <section class="body">
      <section class="brand">
        <label for="brand">Marca:</label>
        <select id="brand">
          <option value="mahou">Mahou</option>
          <option value="heiniken">Heiniken</option>
          <option value="carlsberg">Carlsberg</option>
        </select>
      </section>
      <hr class="separator" />
      <form action="" id="beer-feedback">
        <div class="form-group">
          <label for="name">Nombre</label>
          <input type="text" id="name" />
        </div>
        <div class="form-group">
          <label for="phone">Teléfono</label>
          <input type="text" id="phone" style="max-width: 150px"/>
        </div>
        <div class="form-group">
          <label for="qty">¿Cuántos vasos tomas a la semana?</label>
          <select id="qty" style="max-width: 150px">
            <option value="1">Menos de 10</option>
            <option value="2">Entre 10 y 20</option>
            <option value="3">Más de 30</option>
          </select>
        </div>
        <div class="form-group">
          <label for="know">¿Cómo conociste la marca?</label>
          <textarea id="know" cols="30" rows="5"></textarea>
        </div>
        <section class="action">
          <button class="btn primary" type="submit">
            <i class="fa fa-send"></i>
            Enviar
          </button>
        </section>
      </form>
    </section>
  </article>

Now, to send the feedback to the server, you have two options. Do it using AJAX or a normal request. Doing it via AJAX is always more User Friendly . I show you the two ways.

Attention: The placed JavaScript codes follow the ES6 nomenclature. It is convenient to use Babel to convert them to ES5 in order to cross-browser them.

AJAX request

let feedbackForm = document.getElementById('beer-feedback');
feedbackForm.addEventListener('submit', onFeedback);

function onFeedback(e) {
  let brand = document.getElementById('brand').value;
  let name = document.getElementById('name').value;
  let phone = document.getElementById('phone').value;
  let qty = document.getElementById('qty').value;
  let know = document.getElementById('know').value;

  fetch(feedbackForm.getAttribute('action'), {
    method: 'POST',
    body: {
      name,
      phone,
      qty,
      know
    }
  }).then((response) => {
    alert('Gracias por darnos tu opinión');
  }).catch(() => {
    alert('Algo salió mal. Inténtelo nuevamente');
  });
}

Normal request

let brandEl = document.getElementById('brand');
const ACTION_URL = feedbackForm.getAttribute('action');

brandEl.onChange = (e) => {
    feedbackForm.setAttribute('action', '${ACTION_URL}=${brandEl.value}');
};

NOTE In normal mode, it is assumed that the form has a value for action in the following way: /sendFeedback/beers?brand . That's why we then concatenate with: =${brandEl.value} .

score 1 · Answer 2

Modify the code a bit since you can not have several radio buttons with the same name (name) in different containers (div) and add some styles. To this modification take part of the Neyer code of the load event of the browser window to execute the process.

The ideal, in my opinion, is to have the bar with the radio buttons and a single visible form (the one selected) and while the user interacts show / hide the corresponding form.

Here's the fiddle: Fiddle forms

Greetings

score 0 · Answer 3

try this:

<script>
    window.addEventListener('load', init, false);
    function init(){
        var radios = document.querySelectorAll('input[type="radio"]');
        for(var i = 0; i < radios.length; i++){
            radios[i].addEventListener('click', seleccionar, false);
        }
    }

    function seleccionar(e){
        var nodos = e.target.parentNode.parentNode;
        for(var i = 0; i < nodos.length; i++){
            nodos[i].disabled = false;
        }
    }
</script>