Автоматизация форм AJAXed с JQuery

Question

Я хочу улучшить свой сайт и придумать хороший способ сделать это, отправив формы через AJAX. Но у меня так много форм, что было бы непрактично делать $ ('# formx'). Submit(). Мне было интересно, есть ли способ сделать это автоматически, создав универсальную разметку;

<form class="ajax_form" meta-submit="ajax/pagename.php"> 
<input type="text" name="inputx" value="x_value"> 
<input type="text" name="inputy" value="y_value"> 
</form> 

И есть это представить АЯКС/pagename.php, где он автоматически включает inputx и inputy? Это не только сэкономит мне много времени, но и будет написано много строк кода.

Первый вопрос, так что я надеюсь, что это не глупый один :)

Answer 1

Нечто подобное должно работать для всех форм. Используется jQuery - доступно ли это в вашем проекте? Этот конкретный кусок кода не был протестирован, скажем, но я все время использую этот метод. Это замечательная экономия времени. Заметьте, что я изменил meta-submit к data-submit так, что его значение может быть извлечена с помощью $('.elemenet_class').data('submit');

HTML

<!-- NOTE: All Form items must have a unique 'name' attribute --> 
<form action="javascript:void(0);" class="ajax_form" data-submit="ajax/pagename.php"> 
    <input type="text" name="inputx" value="x_value"> 
    <input type="text" name="inputy" value="y_value"> 

    <input type="submit" value="go" /> 
</form> 

JavaScript

$('.ajax_form').submit(function(e){ 
    var path = $(this).attr('data-submit'); //Path to Action 
    var data = $(this).serialize(); //Form Data 
    $.post(path, {data:data}, function(obj){ 

    }); 
    return false; 
}) 

PHP

//DEBUGGING CODE 
//var_dump($_POST); 
//die(null); 

$data = $_POST['data']; 
$inputx = $data['inputx']; 
$inputy = $data['inputy']; 

Answer 2

вы можете создать АЯКС фот текстовые поля, так что он может обновить базу данных, чтобы всякий раз, когда изменение фокуса от него.

<form id="ajax_form1"> 
<fieldset> 
    <input type="text" id="inputx" value="x_value" /> 
    <input type="text" id="inputy" value="y_value" /> 
</fieldset> 
</form> 

<script> 

$(document).ready(function() 
{ 
$("form#ajax_form1").find(":input").change(function() 
{ 
    var field_name=$(this).attr("id"); 
    var field_val=$(this).val(); 
    var params ={ param1:field_name, param2:field_val }; 

    $.ajax({ url: "ajax/pagename.php", 
      dataType: "json", 
      data: params,   
      success: setResult  
     }); 
}); 
}); 
</script>