Задать первому input checked?

Question

[Марат Агатов]

Не могу реализовать, чтоб первый input активный был через js у каждой формы?
Кто то знает как реализовать ?

<form id="quiz">
   <div class="product__pice">
      <div>
         <strong>Поликорбанат:</strong>
         <div class="form_radio_group">
            <div class="form_radio_group-item">
               <input id="polycorbate-radio-1" type="radio" name="polycorbate-radio-1" pice="1000" old_pice="">
               <label for="polycorbate-radio-1">Цена за 4мм,440гр/4M/монтаж</label>
            </div>
            <div class="form_radio_group-item">
               <input id="polycorbate-radio-2" type="radio" name="polycorbate-radio-1" pice="54000" old_pice="">
               <label for="polycorbate-radio-2">6мм, 1050гр</label>
            </div>
         </div>
      </div>
      <div>
         <strong>ДЛИНА:</strong>
         <div class="form_radio_group">
            <div class="form_radio_group-item">
               <input class="myCheckBox1" id="length-radio-1" type="radio" name="length-radio-1" pice="2500" old_pice="">
               <label for="length-radio-1">Да</label>
            </div>
            <div class="form_radio_group-item">
               <input class="myCheckBox1" id="length-radio-2" type="radio" name="length-radio-1" pice="5000" old_pice="">
               <label for="length-radio-2">Нет</label>
            </div>
         </div>
      </div>
      <div>
         <strong>Монтаж:</strong>
         <div class="form_radio_group">
            <div class="form_radio_group-item">
               <input id="montage-radio-1" type="radio" name="montage-radio-1" montage="1000" old_montage="">
               <label for="montage-radio-1">10 метров</label>
            </div>
         </div>
      </div>
   </div>
   <div class="set-product__price price-product">
      <div>
         <span class="span_font">Цена:</span>
      </div>
      <p class="price-product__new">
         <input type="hidden" class="price" id="price" value="">
         <span id="data-price" class="result">4500</span>
         <span>₽</span>
      </p>
      <div class="price-product__text-content">
         <p class="price-product__old"> <span class="old_result">0</span>₽</p>
      </div>
   </div>
   <div class="produt_soceti pb-3">
      <a onclick="relocate_telegram()" class="a__telegram">
         <span>
            <svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px">
               <path d="M46.137,6.552c-0.75-0.636-1.928-0.727-3.146-0.238l-0.002,0C41.708,6.828,6.728,21.832,5.304,22.445	c-0.259,0.09-2.521,0.934-2.288,2.814c0.208,1.695,2.026,2.397,2.248,2.478l8.893,3.045c0.59,1.964,2.765,9.21,3.246,10.758	c0.3,0.965,0.789,2.233,1.646,2.494c0.752,0.29,1.5,0.025,1.984-0.355l5.437-5.043l8.777,6.845l0.209,0.125	c0.596,0.264,1.167,0.396,1.712,0.396c0.421,0,0.825-0.079,1.211-0.237c1.315-0.54,1.841-1.793,1.896-1.935l6.556-34.077	C47.231,7.933,46.675,7.007,46.137,6.552z M22,32l-3,8l-3-10l23-17L22,32z"></path>
            </svg>
         </span>
         Telegram
      </a>
      <a onclick="relocate_whatsapp()" class="a__whatsapp">
         <span>
            <svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px">
               <path d="M 12.011719 2 C 6.5057187 2 2.0234844 6.478375 2.0214844 11.984375 C 2.0204844 13.744375 2.4814687 15.462563 3.3554688 16.976562 L 2 22 L 7.2324219 20.763672 C 8.6914219 21.559672 10.333859 21.977516 12.005859 21.978516 L 12.009766 21.978516 C 17.514766 21.978516 21.995047 17.499141 21.998047 11.994141 C 22.000047 9.3251406 20.962172 6.8157344 19.076172 4.9277344 C 17.190172 3.0407344 14.683719 2.001 12.011719 2 z M 12.009766 4 C 14.145766 4.001 16.153109 4.8337969 17.662109 6.3417969 C 19.171109 7.8517969 20.000047 9.8581875 19.998047 11.992188 C 19.996047 16.396187 16.413812 19.978516 12.007812 19.978516 C 10.674812 19.977516 9.3544062 19.642812 8.1914062 19.007812 L 7.5175781 18.640625 L 6.7734375 18.816406 L 4.8046875 19.28125 L 5.2851562 17.496094 L 5.5019531 16.695312 L 5.0878906 15.976562 C 4.3898906 14.768562 4.0204844 13.387375 4.0214844 11.984375 C 4.0234844 7.582375 7.6067656 4 12.009766 4 z M 8.4765625 7.375 C 8.3095625 7.375 8.0395469 7.4375 7.8105469 7.6875 C 7.5815469 7.9365 6.9355469 8.5395781 6.9355469 9.7675781 C 6.9355469 10.995578 7.8300781 12.182609 7.9550781 12.349609 C 8.0790781 12.515609 9.68175 15.115234 12.21875 16.115234 C 14.32675 16.946234 14.754891 16.782234 15.212891 16.740234 C 15.670891 16.699234 16.690438 16.137687 16.898438 15.554688 C 17.106437 14.971687 17.106922 14.470187 17.044922 14.367188 C 16.982922 14.263188 16.816406 14.201172 16.566406 14.076172 C 16.317406 13.951172 15.090328 13.348625 14.861328 13.265625 C 14.632328 13.182625 14.464828 13.140625 14.298828 13.390625 C 14.132828 13.640625 13.655766 14.201187 13.509766 14.367188 C 13.363766 14.534188 13.21875 14.556641 12.96875 14.431641 C 12.71875 14.305641 11.914938 14.041406 10.960938 13.191406 C 10.218937 12.530406 9.7182656 11.714844 9.5722656 11.464844 C 9.4272656 11.215844 9.5585938 11.079078 9.6835938 10.955078 C 9.7955938 10.843078 9.9316406 10.663578 10.056641 10.517578 C 10.180641 10.371578 10.223641 10.267562 10.306641 10.101562 C 10.389641 9.9355625 10.347156 9.7890625 10.285156 9.6640625 C 10.223156 9.5390625 9.737625 8.3065 9.515625 7.8125 C 9.328625 7.3975 9.131125 7.3878594 8.953125 7.3808594 C 8.808125 7.3748594 8.6425625 7.375 8.4765625 7.375 z"></path>
            </svg>
         </span>
         Whatsapp
      </a>
   </div>
   <a class="btns-product__btn btns-product__btn_color_white" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="true" aria-controls="collapseExample">Оформить заявку</a>
</form>
<form method="post" class="ajax_form af_example form-horizontal" id="ids_product">
   <div class="form-group hidden d-none">
      <label for="callbackform_user">Ваше имя:</label>
      <input type="text" id="callbackform_user" class="form-control" name="userspames" placeholder="Пользователь">
   </div>
   <div class="form-group">
      <label for="callbackform_name">Ваше имя:</label>
      <input type="text" class="form-control" id="callbackform_name" name="name" placeholder="Иванов Иван Иванович" required="">
   </div>
   <div class="form-group">
      <label for="callbackform_phone">Ваш телефон:</label>
      <input type="text" class="form-control phones" id="callbackform_phone" name="phone" placeholder="[phone]" required="">
   </div>
   <div class="form-group">
      <label for="callbackform_phone">Ваш e-mail:</label>
      <input type="text" class="form-control" id="callbackform_phone" name="email" placeholder="email" required="">
   </div>
   <div class="form-group">
      <label for="callbackform_phone">Количество:</label>
      <input name="nuber" class="text-center input_col" type="number" step="1" placeholder="1">
   </div>
   <div class="form-group">
      <label for="callbackform_text">Сообщение:</label>
      <textarea class="form-control" name="text" id="callbackform_text" placeholder="Хочу узнать информацию о товаре" required=""></textarea>
   </div>
   <div class="text-center">
      <button class="form-support__btn btns-product__btn_color_red" type="submit" name="button">Отправить</button>
   </div>
   <input type="hidden" name="af_action" value="aeb299f600a7bc1217171091fea2c3df">
</form>

const form = document.querySelector('form');
form.addEventListener('change', () => {
  form.querySelector('.result').innerText = Array
    .from(form.querySelectorAll(':checked'))
    .reduce((acc, n) => acc + +n.getAttribute('pice') + +n.getAttribute('montage'), 0);

});
form.addEventListener('change', () => {
  form.querySelector('.old_result').innerText = Array
    .from(form.querySelectorAll(':checked'))
    .reduce((acc, n) => acc + +n.getAttribute('old_pice') + +n.getAttribute('old_montage'), 0);
});
form.dispatchEvent(new Event('change'));

Comments

[Ankhena]

querySelectorAll('form>div input') например так.
Или form.querySelector('input'), где form из const form

Но лучше бы решать это сразу в html

А это точно разные формы?

[Марат Агатов]

Ankhena,
Вот что должно получиться, при попадание на страницу у человека выбранно должно быть первые параметры формы, после выбора появляется цена далее заполняется форма и отправляется данными на email менеджеру вместе с данными и ценой которой он покупает.

[Марат Агатов]

e982126c.beget.tech/assets/saite_agrosfera-teplici...

[Марат Агатов]

Пытался через условия сделать, если выбрано 3 значения выходит уже цена не вышло так реализовать

[Марат Агатов]

Ankhena, вывод параметров у меня выглядит так так как это всё вручную для каждого товар нужно делать

<div>
                        <strong>ДЛИНА:</strong>
                        <div class="form_radio_group">
                        [[getImageList?
                        &docid=`[[*id]]`
                        &limit=`16`
                        &tvname=`pice_length`
                        &wrapperTpl=`slider_wrap_tpl`
                        &tpl=`@CODE:<div class="form_radio_group-item">
                                    <input class="myCheckBox2" id="montage-radio-[[+idx]]" type="radio" name="montage-radio-1" montage="[[+pice]]" old_montage="[[*old_pice]]">
                                    <label for="montage-radio-[[+idx]]">[[+title]]</label>
                                    </div>`
                        ]]
                        </div>
                    </div>

Answer 1

[Kentavr16]

Написать checked в конце хтмл каждого инпута

Comments

[Марат Агатов]

modx revo через migx не может такое так что только через js

[Froggyweb]

fenom может
а в чем смысл кучи форм если квиз - это одна форма с показом какой-то секции fieldset или div как вы будите обрабатывать эту кучу форм?

[Марат Агатов]

Тут калькулятор который должен будет отправлять данные на email
выбераются параметры выходит сумма и сумма и данные с формы отправляются вот что нужно реализовать.

[Марат Агатов]

Froggyweb, вот что должно быть после выбора из опций считается и все данные должны отправляться вот пример e982126c.beget.tech/assets/saite_agrosfera-teplici...

[Froggyweb]

Марат Агатов, https://www.w3schools.com/howto/howto_js_form_steps.asp

[Марат Агатов]

Froggyweb, Спасибо посмотрю на досуги )