Zapisanie danych w Mysql z okna modalnego bootstrap

Question

Okno modalne

<div class="modal fade"  id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary ">
                <h5 class="modal-title text-white" id="exampleModalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div id="p1">

                    <form method="POST" id="nachylenie" name="nachylenie"">

                        <div class="form-group row">
                                <label class="col-sm-12 col-md-12 col-form-label">Współczynnik powiększenia mocy instalacji PV [%]:</label>
                                <div class="col-sm-4 col-md-4">

                                    <input class="form-control"  type="number" name="recipient-name" id="wartosc_zmian">

                                </div>
                            </div>
                            <div class="pull-right">
                                <button type="submit" class="btn btn-outline-info btn-sm">
                                         <i class="feather icon-edit"></i>  Generuj ofertę
                                    </button>


                             </div>

                    </form>




                        </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button>
                <button type="button" class="btn btn-primary" data-target="#exampleModal1">Zapisz zmiany</button>
              </div>
        </div>
    </div>

//i js
 $('#exampleModal').on('click', '.btn-primary', function(){
    var value = $('#wartosc_zmian').val();

// tu chcę wywołać adres, pod którym zapiszę Update w mysql

    $('#myMainPageInput').val(value);
    $('#exampleModal').modal('hide');
});

Wyświetlam okno modalne w bootstrap, które zawiera formularz z jednym polem do edycji.

Po kliknięciu przycisku w oknie chcę aby wprowadzona zmienna, została zapisana w bazie Mysql.

Zależy mi aby nie przeładowywać strony, ale jeżeli łatwiej będzie z przeładowaniem też skorzystam z rozwiązania.

Jak to ogarnąć korzystając np z js?

Proszę o podpowiedź.

Dzięki

Answer 1

Możesz skorzystać z: AJAX-a, jQuery.ajax() lub Fetch, do komunikowania się Twojej aplikacji web (strony, formularza ze strony) bez "przeładowywania".

Comments

Ciekawe?

Zobacz ten test na Codepen: https://codepen.io/vbservice/pen/YzNOPRJ

---

zrobiłem coś takeigo i działa:

console.log('Przed: ' + $('button[data-id_n="'+id_n+'"]').attr('data-wsk'));

            $('button[data-id_n="'+id_n+'"]').attr('data-wsk', value);

            console.log('po data-wsk: ' + $('button[data-id_n="'+id_n+'"]').attr('data-wsk'));

jednak ja wywołuję modala z ta wartością to cały czas pokazuje starą wartość

---

Wywołanie okna modalnego:

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) 
    var recipient = button.data('whatever')
    var nachylenie = button.data('wsk');
    var id_n = button.data('id_n');



    var modal = $(this);
    modal.find('.modal-title').text('Nachylenie ' + recipient+id_n);
    modal.find('.modal-body #id_n').val(id_n);
    modal.find('.modal-body input').val(nachylenie);
  });

 

---

Działa !!!!!

Wielkie podziękowania za pomoc i cierpliwość.

Zmieniłem pobranie i przekazanie wartości do pola INPUT w formularzu okna modalnego.

modal.find('.modal-body input').val($('button[data-id_n="'+id_n+'"]').attr('data-wsk'));

 

---

Jeszcze raz bardzo dziękuję za pomoc !!!!!