Как передать POST в модальное окно?

123
27 августа 2019, 07:00

Есть форма с одним полем и модальное окно bootstrap-4. Подскажите как передать данные с формы методом POST в модальное окно? Если можно с примером кода. Гугл не помог.

Answer 1

если у вас jquery там есть serialize метод если нативный js ч то то типа такова можно

var serializable = function (formId) {
    var form = document.getElementById(formId);

    var result = {};
    var elements = Array.from(form.getElementsByTagName('*'));
    var data = elements.filter(function(element){
        return element.hasAttribute('serialize');
    }).map(function(element){
        if (!element.name) {
            throw new Error ('set name attribute to element! ' 
            + element.nodeName + (element.id.length ? ' (with id ' + element.id + ') ' : ' (with className ' + element.className + ')')
            );
        }
        return element.name  + ':' + element.value;
    }).forEach(function(element) {
        var key = element.trim().split(':')[0];
        var value = element.trim().split(':')[1];
        result[key] = value || null;
    });
    return JSON.stringify(result);
}
form id="form">
        <div>
            <select name="type2" id="se45" serialize>
                <option value="v1">Вариант 1</option>
                <option value="v2">Вариант 2</option>
                <option value="v3">Вариант 3</option>
            </select>
        </div>
        <div>
            <input serialize type="text" name="tect45">
        </div>
        <div>
            <input serialize type="password"  name="password" class="clasNemr234">
        </div>
        <div>
            <div>
                <input  type="checkbox" onchange="selecteg('female')" name="isold">
                <span>female</span>
            </div>
            <div>
                <input  type="checkbox"  onchange="selecteg('male')" name="isold">
                <span>male</span>
            </div>
            <input type="hidden" serialize name="gender" id="dww"></span>
        </div>
        <button type="button" onclick="send('form')">send</button>
    </form>
Answer 2

Вот принцип работы. Выведет все значения инпутов в поле с классом text .

var $formname = $('#formname') // тут указываем класс или id формы. 
var $outBlock = $('.text') // тут блок в который вывести содержимое надо 
 
$formname.on('submit',function(e){ 
  e.preventDefault(); 
  $outBlock.empty(); 
  $.each($(this).serializeArray(),function (i,v) { 
  $outBlock.append(v.value+'<br>') 
  }) 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form action="" id="formname"> 
    <input type="text" name="text"> 
    <input type="text" name="text"> 
    <input type="text" name="text"> 
    <select name="optionsName" id=""> 
        <option value="text1">text1</option> 
        <option value="text2">text2</option> 
    </select> 
    <button type="submit">Send</button> 
</form> 
 
<div class="text"> 
Тут будет вывод из input 
</div>

READ ALSO
Выборочное добавление класса через JS

Выборочное добавление класса через JS

Есть аккордеон, пытаюсь добавить к нему стрелки состоянияПри открытой вкладке ей присваивается класс active, далее пробую добавить класс, который...

115
Раскрывающийся список дерево js

Раскрывающийся список дерево js

Есть переменная в которой хранится очень много данныхЯ пытаюсь организовать раскрывающийся список дерево

134
React router - не уничтожать компонент при переходе к другому компоненту

React router - не уничтожать компонент при переходе к другому компоненту

Есть форма на react и еще пара страниц, если пользователь начинает заполнять форму, а потом перейдет на другую страницу, то у компонента формы...

132
Сумма порядковых номеров букв (ABCM: 1 + 2 + 3 +13 = 19)

Сумма порядковых номеров букв (ABCM: 1 + 2 + 3 +13 = 19)

Дан массив JavaScript: [Natasha, Device, Auto,

145