включать элементы в нескольких формулярах одновременно

У меня есть страница с тремя формулярами. Все элементы приходят дезактивированные, кроме неудар в лунку, который возглавляет каждый формуляр. Я нуждаюсь в том, чтобы дать возможность этим элементам так что они включают и дезактивируют каждый формуляр. Если бы это был единственный формуляр, это было бы простым с document.form и разгрузка контроля, но как они различные в то же время, я не смог решать это. Добавление приходит код.

<!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> 
1
задан 09.08.2016, 23:56
3 ответа

У тебя есть проблема рисунка. Формуляры точно равны, единственным, что он меняет, является label радио, который сопровождает их. Гораздо более чистое решение состоит в том, чтобы иметь единственный формуляр и власть принимать решение какой отметке соответствуй посредством desplegable.

Например:

*, *: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>

Сейчас, чтобы посылать feedback в сервер, у тебя есть два выбора. Делать это посредством AJAX или нормальной просьбы. Делать путь AJAX всегда - больше Усер Фрьендли. Я показываю тебе две формы.

Внимание: Коды язык сценариев JavaScript, размещенный продолжают номенклатуру ES6. Уместно использовать Вавилон, чтобы превращать их в ES5 в команду делать их cross-browser.

Просьба AJAX

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');
  });
}

Нормальная просьба

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

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

ЗАМЕТЬ В нормальном способе, понимают, что у формуляра есть стоимость для action следующей формы: /sendFeedback/beers?brand. Именно поэтому потом мы прилагаем с: =${brandEl.value}.

2
ответ дан 24.11.2019, 13:41

Измените немного cГіdigo, так как не возможно иметь некоторые, я испускаю лучи button с тем же именем (ямсом) в различных контейнерах (div) и добавьте стили. В эту modificaciГіn взяла часть cГіdigo из Neyer та события похвалите окна браузера, чтобы выполнять процесс.

Идеальное, по моему мнению, состоит в том, чтобы иметь брусок с радио buttons и единственный видимый формуляр (который был бы выбран), и пока пользователь интерприводит в действие показывать / скрывать формуляр, который соответствует.

Здесь оставил fiddle: формульных Fiddle

типов Привета

1
ответ дан 24.11.2019, 13:41

попытайся с этим:

<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>
0
ответ дан 24.11.2019, 13:41
  • 1
    C и # 243; я говорю, что я поместил присоединено, у него есть проблема jerarqu и # 237; в. Неудар в лунку испустил лучи они были должны состоять вне формуляров включать один одновременно. C и # 243; я говорю, что javascript он ссылается на этот jerarqu и # 237; в в e.target.parentNode.parentNode. Кто-то я podr и # 237; чтобы давать какую-то помощь, чтобы изменять funci и # 243; n, выбирать способа действовать на формуляре, соединенном с неударом в лунку, я испускаю лучи без того, чтобы было родство между этими двумя элементами? – RTLM-7 13.08.2016, 00:01