Bootstrap modal i PHP

Ovako, imam tablicu i link Obriši te sam postavio da se pojavljuje Bootstrapov modal da me pita “Sigurno želite obrisati podatak”. Kako ga preusmjeriti na drugu stranicu gdje bi se taj podatak i stvarno obrisao?

Jel jasno ili moram stavljati kod? Mislim kod nije ništa specijalno tablica sa podacima i na kraju obriši kada se klikne išao bi na stranicu za brisanje ali želim postaviti modal dio gdje me pita a da nije baš dialog box nego da bude ovak fensi.

Hvala

Moraš koristiti AJAX a ne standardno slanje forme

Riješeno. Jednostavno rješenje pred nosom a par sati ga nisam vidio jer se fokusirao na . Stavio sam div-ove sa btn klasama, a ti divovi imaju linkove (a href).

@spiderman: Da li možeš dati primjer? Dio koda gdje i kako ga koristiš…

Hvala

Evo to je ovako… onaj dolje Da želim je prije bio pa zamijenio samo sa linkovima i onda radi, tj. ide na stranicu delete.php

<a href="#delete" data-toggle="modal">Obrisati</a>


           <!-- Modal -->
            <div class="modal fade" id="delete">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Brisanje</h4>
                  </div>
                  <div class="modal-body">
                    Sigurni ste da želi obrisati podatak?
                 </div>
                  <div class="modal-footer">
                    <a href="" data-dismiss="modal"><div class="btn">Ne</div></a>
                    <a href="delete.php"><div class="btn btn-primary">Da želim</div></a>
                  </div>
                </div><!-- /.modal-content -->
              </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
              <!-- Modal -->

Pozdrav!

Boostrap modal window i php su u pitanju. Kod klika na gumb Submit modal window uopće ne reagira. evo moj kod:

 <!-- Modal - Application - start-->
<div class="modal fade" id="applicationModal-lg" tabindex="-1" role="dialog" aria-labelledby="applicationModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title" id="applicationModalLabel">Zahtjev za pristupanju korištenja sportskog sustava</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" class="text-white">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <form action="" method="post">
              <div class="form-group">
                  <label for="exampleFormControlInput1">Tvrtka</label>
                  <input class="form-control" type="text" name="company" placeholder="Upišite naziv tvrtke">
              </div>
              <div class="form-group">
                  <label for="exampleFormControlInput2">Kontakt osoba</label>
                  <input class="form-control" type="text" nema="person" placeholder="Upišite osobu za kontakt">
              </div>
              <div class="form-group">
                  <label for="exampleFormControlInput3">Telefon</label>
                  <input class="form-control" type="number" name="phone" placeholder="Upišite broj telefona npr. 00 385 99 1112222">
              </div>
              <div class="form-group">
                  <label for="exampleInputEmail2">Email</label>
                  <input type="email" name="email2" class="form-control" id="exampleInputEmail2" aria-describedby="emailHelp2" autocomplete="off" placeholder="Upišite email">
              </div>
              <div class="form-group">
                  <label for="exampleFormControlTextarea1">Poruka</label>
                  <textarea class="form-control" name="note" id="exampleFormControlTextarea1" rows="3" placeholder="Upišite poruku"></textarea>
              </div>
          </form>
      </div>
      <div class="modal-footer">
          <button type="submit" name="submit" class="btn btn-primary">Pošaljite</button>
          <button type="button" class="btn dark-btn" data-dismiss="modal">Odustanite</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal - Application - end-->

Ovo je php dio:
<?php
if (isset($_POST[‘submit’])){
$company = $_POST[‘company’];
$person = $_POST[‘person’];
$phone = $_POST[‘phone’];
$email2 = $_POST[‘email2’];
$note = $_POST[‘note’];

$to         = "[email protected]";
$subject    = "Text";
$message    = "
    <html>
        <head>
            <title>Text</title>
        </head>
        <body>
            <div class='text-danger'>$company</div>
            <div class='text-danger'>$person</div>
            <div class='text-danger'>$phone</div>
            <div class='text-danger'>$email2</div>
            <div class='text-danger'>$note</div>
        </body>
    </html>
";

// To send HTML mail, the Content-type header must be set
$headers[] = 'MIME-Version: 1.0';
$headers[] = 'Content-type: text/html; charset=UTF-8';

// Mail it!!!
if (mail($to, $subject, $message, implode("\r\n", $headers))){
    echo "<script>alert('Mail je poslan!!')</script>";
};

}

Gdje sam pogriješila kod html-a odnosno bootstrap modal windowa da ne reagira na submit?

Isto tako dodati opciju i provjeriti da li je poslani email otvoren.

Ovdje ti na kraju nedostaje ;

@malabo

Pojednostavi sebi život:

$(document).ready( function() {
    $('.modal form').on('submit', function(event) {
        event.preventDefault()
        $.post($(this).attr('action'), $(this).serialize(), function(data) {
            // just try to see the outputs
            console.log(data)
            if(true === data.return) {
                // Success code here
            } else {
                // Error code here
            }
        }, 'json')
    })
});

U drugom PHP fajlu čiju lokaciju ćeš staviti u form action ćeš uraditi echo 1; ili echo 0; u zavisnosti da li je mejl poslan.
I imaćeš čist kod u oba fajla.

Isto tako, nikad ne miješaj PHP sa JS-om [ili nečim drugim; HTML i.e.] (zahvali mi poslije).
Vidim da se ovde ne koristi templating system niti šta slično ali ono što je striktna nadležnost PHP-a (mailing posted data) možeš izdvojiti u drugi fajl i ne upadati u zamke antipattern-a (da li se prije napunio JS ili PHP; ko koga blokira i slično).

Snippet source.

Yoda strikes again. Force in him strong it is! :smiley:

1 Like

Hehe, primijećen je touch™?

1 Like

Pozdrav,

evo napravila sam, skoro…:yum: Pošalje mail ali bez podataka… Gdje sam fulala?
Evo ga kod:

JS

console.log('It works');
// alert('It works');

$(document).ready(function (){
$('#submit-bm').click(function (event){
    event.preventDefault()
    console.log('Clicked!')

    var com = $('#company').val();
    var per = $('#person').val();
    var phn = $('#phone').val();
    var eml = $('#email').val();
    var nte = $('#note').val();

    var dataBM = 'com1=' + com + '&per1=' + per + '&phn1=' + phn + '&eml1=' + eml + '&nte1=' + nte;
    console.log(dataBM)
    alert(dataBM);

    if(com==''|| per==''|| phn=='' || eml==''|| nte==''){
        $('#status').html(
            '  <div class="alert alert-warning alert-dismissible fade show">\n' +
            '    <button type="button" class="close" data-dismiss="alert">&times;</button>\n' +
            '    Molimo popunite sva polja.\n' +
            '  </div>')
    }
    else{
            $.ajax({
                type: 'POST',
                url: 'mail/becomemember.php',
                data: dataBM,
                cache: false,
                dataType: 'html',
                success: function(){
                    $('#status').html(
                        '  <div class="alert alert-success alert-dismissible fade show">\n' +
                        '  <button type="button" class="close" data-dismiss="alert">&times;</button>\n' +
                        '  Vaš zahtjev je uspješno poslan.\n' +
                        '  </div>')
                }

            });
        }
    return false;
    })
})

PHP

$com = $POST[“com1”];
$per = $POST[“per1”];
$phn = $POST[“phn1”];
$eml = $POST[“eml1”];
$nte = $POST[“nte1”];

$to = ‘[email protected]’;
$subject = ‘Zahtjev’;

$headers = ‘MIME-Version: 1.0’. “\r\n”;
$headers .= ‘Content-type:text/html;charset=UTF-8’. “\r\n”;

$message = 'This message is from '.$com;

mail($to, $subject, $headers,$message);

Probaj da testiraš ovako:

$(document).ready(function (){
    $('#submit-bm').click(function (event){
        let data = {
            company: $('#company').val(),
            person: $('#person').val(),
            phone: $('#phone').val(),
            email: $('#email').val(),
            note: $('#note').val()
        };

        $.ajax({
            type: 'post',
            url: 'mail/becomemember.php',
            data: data,
            cache: false,
        }).done(function (msg) {
            console.log("Good: " + msg);
        }).fail(function(msg){
            console.log("Bad: " + msg);
        }).always(function (msg) {
            
        });
    });
});

PHP tek da utvrdiš da li su podaci stigli na server:

if ($_POST) {
    $posted = $_POST;
    foreach ($posted as &$post) {
        $post .= " from server";
    }

    echo implode(' ;; ', $posted);
}

Ovo će ti služiti da provjeriš jesu li podaci stigli do PHP-a.
(Mada je moguće da je jedna od grešaka bila $POST !== $_POST.)

1 Like

U consoli piše Good… i vidljivi su podaci koje sam upisala…

Ako šalješ post iz jQuery-ja najbolje je da pošalješ objekt umjesto QSA-a (query string append).
Možda je greška bila u $POST !== $_POST.
Sada dodaj u PHP-u mail() funkciju i probaj.
I na kraju napravi echo. Ajax očekuje neki echo.

1 Like

Hvala na savjetu. Previdjela sam ovaj POST… :face_with_raised_eyebrow:

Imam još jedan problem… Pošalju se na mail svi podaci ali html se pošalje kao običan tekst. :thinking:

mail($to, $subject, $message, $headers);

Prerasporedila si $message i $headers.

Docs.

1 Like

Forma mi je Boostrap i imam npr tamo polje required koje mi js ne prepoznaje ili pregazi. Da li je to normalno ili sam ja negdje pogriješila?

Deklariši dokument sa html5 (ako nije).

Ako misliš ovo na početku dokumenta <!DOCTYPE html> onda to imam.

Da, čitam komentare ovde.