Forumi


Povratak   PC Ekspert Forum > Računala > Software > Web dizajn, programiranje i ostalo
Ime
Lozinka

Odgovori
 
Uređivanje
Staro 11.09.2017., 09:03   #1
cdhr
Premium
 
cdhr's Avatar
 
Datum registracije: Jul 2016
Lokacija: Osijek
Postovi: 92
Ajax Messages on PHP form submit

Zanima me koje sve načine koristite prikazati messages od formi?
Problem: User koristi krivi input, submita, stranica se refresha( php server side validacija), i user dobija poruke o neispravnom inputu.

Ovo je forma:

Code:
<form class="" action="" method="post" id="signup-form">
  <div class="title-box" id="title-box-signup">
    <h2>Sign Up</h2>
  </div>
  <div class="input-box" id="input-box-signup-user">
    <input type="text" name="username" value="" placeholder="Username">
  </div>
  <div class="input-box" id="input-box-signup-password">
    <input type="password" name="password" value="" placeholder="Password">
  </div>
  <div class="input-box" id="input-box-signup-email">
    <input type="email" name="email" value="" placeholder="Email">
  </div>
  <div class="form-action" id="form-action-signup">
    <button type="submit" name="submit" id="signup-submit">Sign Up</button>
  </div>
  <div class="form-content">
    <p>By clicking Sign Up, you agree to our Terms and Conditions and that you have read our Privacy Policy, including our Cookie Usage.<br><span>You can opt out at any time.</span></p>
  </div>
</form>
Želim postići pri submitu stranica se ne refresha, nego samo prikazuje poruke od forme.
Hvala na pomoći, koristim jquery library, može i vanilla js.

Više sam php orijentiran i pokušavam nešto tipa :
Code:
$('form').submit(function(event) {

    // get the form data before sending via ajax
    var formData = {
        'name'               : $('input[name=name]').val(),
        'number'             : $('input[name=number]').val(),
        'message'            : $('input[name=message]').val(),
        'contactSubmit'      : 1 
    };

    // send the form to your PHP file (using ajax, no page reload!!)
    $.ajax({
        type: 'POST', 
        url:  'file.php', // <<<< -------  complete with your php filename (watch paths!)
        data:  formData,  // the form data
        dataType: 'json', // how data will be returned from php
        encode: true
    })
    // JS (jQuery) will do the ajax job and we "will wait that promise be DONE"
    // only after that, we´ll continue
    .done(function(data) {
        if(data.success === true) {
           // show the message!!!
           $('#success').show();
        }
        else{
            // ups, something went wrong ...
            alert('Ups!, this is embarrasing, try again please!');
            } 
        });
    // this is a trick, to avoid the form submit as normal behaviour
    event.preventDefault();
});
    });
Ali bezuspiješno.
Hvala na pomoći
p.s.
Aplikacija koja se radi na laravel, ovo je signup.blade.php unutar components foldera.
Mislio sam bacit reserach na :
socket.io ali koristiti socket samo za form validaciju na kraju se ispostavilo kao vulnerability i overkill za tako nešto.

Zadnje izmijenjeno od: cdhr. 11.09.2017. u 09:08.
cdhr je offline   Reply With Quote
Staro 11.09.2017., 12:42   #2
sinisa1989
Bazinga
Moj komp
 
sinisa1989's Avatar
 
Datum registracije: Nov 2007
Lokacija: Križevci (blizu)
Postovi: 3,731
Code:
url:  'file.php'
Umjesto file.php staviš putanju do ajax controllera. Npr. https://host.com/ajax-handler/signup.
Ovo je pretpostavka da se u laravelu route hendlaju na način {controller}/{method}. Pretpostavljam da kužiš što hoću reći.

U ajax controlleru "odradiš" POST i obradiš sve što ti treba, pa vratiš podatke npr. u ovom obliku:
PHP kod:
<?php 
public function signup()
{
    
$data = array('response' => 'error''message' => 'Invalid email address');
    echo 
json_encode($data);
    exit;
}
?>
Nakon toga unutar ajax bloka napraviš nešto poput ovog:

Code:
.complete(function(data) {
    $('.ajax-response).html(data.message).addClass('data.response');
}
Klasu dodaš da u css-u možeš srediti output na temelju poruke.

U view fajlu dodaš:
HTML:
<div class="ajax-response"></div>
__________________
The best place to hide a dead body
is page 2 of Google search results.
sinisa1989 je offline   Reply With Quote
Oglasni prostor
Oglas
 
Oglas
Staro 18.09.2017., 19:48   #3
cdhr
Premium
 
cdhr's Avatar
 
Datum registracije: Jul 2016
Lokacija: Osijek
Postovi: 92
thx na pomoći upalilo je
cdhr je offline   Reply With Quote
Oglasni prostor
Oglas
 
Oglas
Odgovori


Uređivanje

Pravila postanja
Vi ne možete otvarati nove teme
Vi ne možete pisati odgovore
Vi ne možete uploadati priloge
Vi ne možete uređivati svoje poruke

BB code je Uključeno
Smajlići su Uključeno
[IMG] kod je Uključeno
HTML je Isključeno

Idi na