Блог

У меня есть этот код, который работает, но жестко закодирован.

 $(document).ready(function(){
    $('form').live('submit', function(){

    var title      = this.elements.title.value;
    var owner      = this.elements.owner.value;
    var users      = this.elements.users.value;
    var groups     = this.elements.groups.value;
    var begin_date = this.elements.from.value;
    var end_date   = this.elements.to.value;
    var anchor     = this.elements.anchor.value;
    var type = $(this).find('input:radio[name="ctype"]:checked').val() || '';

    var aform      = $('form[name="create_form"]');
  

Мне нужно aform для последующего вложенного вызова Ajax.

Вопрос

Как мне сконструировать aform , чтобы это не было жестко закодировано? На странице много форм.

Он должен содержать

     var title      = this.elements.title.value;
    var owner      = this.elements.owner.value;
    var users      = this.elements.users.value;
    var groups     = this.elements.groups.value;
    var begin_date = this.elements.from.value;
    var end_date   = this.elements.to.value;
    var anchor     = this.elements.anchor.value;
    var type = $(this).find('input:radio[name="ctype"]:checked').val() || '';
  

и позже должен работать с вложенным вызовом Ajax.

 $.ajax({
    type: "GET",
    url: "/cgi-bin/ajax.pl",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: aform.serialize(),
  

 var aform = $(this);
  

(по просьбе Сандры 🙂

Вам не нужно делать все это самостоятельно. В самом Jquery есть плагин формы, который отправляет форму через ajax. Это объясняется само собой.

Вот простой пример преобразования некоторых элементов формы в объект JSON — хотя предложение Абдула Кадера лучше, если вы хотите сделать это только для отправки данных в формате JSON.

 <form method="post" action="" id="example">
    <p><label>Name<br><input type="text" name="name" value="Bob"></p>
    <p><label>Happy<br><input type="checkbox" name="happy" checked></p>
    <p><textarea name="information">Some text "data" here!</textarea>
</form>
<div id="exampleOutput">

</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">

    function exampleFormData() {
        var formData;
        var jsonString = "({";
        var jsonCount = 0;

        // This will add each input to a JSON string
        $("#example input, #example textarea").each( function () {
            if (jsonCount > 0) {
                jsonString  = ", "
            }
            var key = this.name;
            var value = this.value;
            jsonString  = key   ': "'   value.replace(/"/g, '\"')   '"';
            jsonCount  ;
        });
        jsonString  = "})"

        // This converts the string into a JSON object
        formData = eval(jsonString);

        // Now you can use the formData JSON object...
        $("#exampleOutput").html(formData.name   " "   formData.happy   " "   formData.information);
    }

    exampleFormData();
</script>