Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

Ajax form ile normal formu ayırma ?(Arda'nın kitabındaki örnek)

ytsejam

Merhaba ,
Jquery konusunda biraz tecrübesizim o yüzden yardıma ihtiyacım var. Elimde 2 tane form var biri ajax ile diğerinin ise normal olarak laravel routelara gitmesini istiyorum. Bunlardan birini Arda beyin kitabindan aldım :

{{Form::open(array('url'=> URL::to('subscribers/submit'),'method' => 'post','id'=>'newsletter'))}}
	<input type="hidden" name="_token" value="{{ csrf_token() }}" />
	<input type="email" name="email" placeholder="Email adresinizi girin">
	<input type="submit" value="katıl" class="btn btn-block newsbutton">
{{Form::close()}}
<div class="newsletter"></div>

<script type="text/javascript">

 //Even though it's on footer, I just like to make
 //sure that DOM is ready
 $(function(){
 //We hide de the result div on start
 $('div.newsletter').hide();
 //This part is more jQuery Related. In short, we
 //make an Ajax post request and get the response
 //back from server
 $('input[type="submit"]').click(function(e){
 e.preventDefault();
 $.post('/subscribers/submit', {
 email: $('input[name="email"]').val(),
 _token: $('input[name="_token"]').val()
 }, function($data){
 if($data=='1') {
 $('div.newsletter').hide().removeClass('success error').addClass('success').html('You\'ve successfully subscribed to our newsletter').fadeIn('fast');
 } else {
 //This part echos our form validation errors
 $('div.newsletter').hide().removeClass('success error').addClass('error').html('There has been an error occurred:<br /><br />'+$data).fadeIn('fast');
 }
 });
 });
 //We prevented to submit by pressing enter or anyother way
 $('#newsletter').submit(function(e){
 e.preventDefault();
 $('input[type="submit"]').click();
 });
 });
 
 </script>

Amacım burada $('input[type="submit"]').click(function(e) ile submit yapmamı engelleyen kodu sadece bu form için kullanmak.
diğeri ise login formum yukarıdaki satır burayı engelliyor.

<form method="post" action="{{ route('signin') }}" class="form-horizontal">
 <!-- CSRF Token -->
 <input type="hidden" name="_token" value="{{ csrf_token() }}" />

 <!-- Email -->
 <div class="control-group{{ $errors->first('email', ' error') }}">
 <label class="control-label" for="email">Email</label>
 <div class="controls">
 <input type="text" name="email" id="email" value="{{ Input::old('email') }}" />
 {{ $errors->first('email', '<span class="help-block">:message</span>') }}
 </div>
 </div>
 
 <!-- Form actions -->
 <div class="control-group">
 <div class="controls">
 <a class="btn" href="{{ route('home') }}">Cancel</a>

 <button type="submit" class="btn">Sign in</button>

 <a href="{{ route('forgot-password') }}" class="btn btn-link">I forgot my password</a>
 </div>
 </div>
	</form>

Teşekkür Ederim.

sergin

Kodlarda Laravel ve jQuery kullanımı konusunda bazı uyarı/önerilerim olacak sonra sorunuzu cevaplayacağım.
1. Laravel kullanımıyla ilgili:

Form oluşturmak için From:open metodu kullanıldığında token inputu otomatik oluşturulur. Birinci alıntınızın browser kaynak koduna bakarsanız Blade motorunun bunu


<form method="POST" action="http://....../subscribers/submit" accept-charset="UTF-8" id="newsletter">
	<input name="_token" type="hidden" value="grA.........8f86">
	<input type="hidden" name="_token" value="grA.........8f86" />
	<input type="email" name="email" placeholder="Email adresinizi girin">
	<input type="submit" value="katıl" class="btn btn-block newsbutton">
</form>

olarak dönüştürdüğünü (token inputlarının biri otomatik oluşturulan diğeri sizin direkt yazdığınız) göreceksiniz. O yüzden Form::open metodu kullandığınızda ayrıca token belirtilmesine gerek yoktur. Ama üçüncü alıntınızdaki gibi doğrudan "<form method=....." diyorsanız o zaman ayrıca token inputu eklemeniz yerinde olur.

2. jQuery kullanımıyla ilgili

A- Eğer form submitini yada submit tipinde bir inputun submit yapmasını engellemek, onun yerine ajax ile gönderme yapılmasını istiyorsak, daha mantıklı bir yaklaşım forma bir submit inputu değil, bir button inputu veya button elementi koymaktır. Böylece form submiti diye bir şey söz konusu olmaktan çıkar ve kodlarımızda da direkt submit yapılmasını engelleyen e.preventDefault ve benzeri kodlar yazmaktan kurtuluruz. Javascript kodunu bu button elementinin click eventine koyarız.
B- $.post metodunda data ayarlarken

{email: $('input[name="email"]').val(), _token: $('input[name="_token"]').val() }

yerine formu serialize etmek ($("#newsletter").serialize()) de işi daha kısaltacak bir yaklaşımdır.

Sorunuzun cevabına gelirsek,
a) yukarıdaki 2-A önerisinden yararlanın,
b) buttonlara id veya yeni class atayın.
c) Sonra da click eventini sadece ajax ile göndermek istediğiniz button için tanımlayın.

Örneğin direkt göndermek istediğiniz formdaki submit inputunun id değeri "submitdirekt", ajaxla göndermek istediğiniz formun submit inputunun id değeri "submitajax" olsun. O zaman $("#submitajax").click(..... şeklinde kullanabilirsiniz.