Ajax отправка формы

peretc001

Новичок
Добрый день, без ajax все работает, с ajax не записываются изменения.

Имеем МНОГО форм для редактирования цвета:
Код:
<?php     $color = $db->getAll('SELECT * FROM `color` WHERE id != "1"');
                                    foreach ($color as $row) {   ?>
               
                <form method="post" action="/inc/form/edit_color.php?id=<?php echo $id; ?>&type=update" id="form">
                    <ul>
                        <li><input type="hidden" name="id" value="<?php echo $row['id']; ?>"></li>
                        <li><input type="hidden" id="hidden-input" class="demo" name="color" value="<?php echo $row['color']; ?>"></li>
                        <li><input type="text" name="name" value="<?php echo $row['name']; ?>"></li>
                        <li><button class="button update">Обновить</button>
                    </ul>
                </form>
               
                <?php } ?>
т.е. имеем:

Код:
<form method="post" action="/inc/form/edit_color.php?id=5&type=update" id="form">
                    <ul>
                        <li><input type="hidden" name="id" value="1"></li>
                        <li><input type="hidden" id="hidden-input" class="demo" name="color" value="blue"></li>
                        <li><input type="text" name="name" value="Синий"></li>
                        <li><button class="button update">Обновить</button>
                    </ul>
                </form>
               
                               
                <form method="post" action="/inc/form/edit_color.php?id=5&type=update" id="form">
                    <ul>
                        <li><input type="hidden" name="id" value="2"></li>
                        <li><input type="hidden" id="hidden-input" class="demo" name="color" value="red"></li>
                        <li><input type="text" name="name" value="Красный"></li>
                        <li><button class="button update">Обновить</button>
                    </ul>
                </form>
...
...
...
<form method="post" action="/inc/form/edit_color.php?id=5&type=update" id="form">
                    <ul>
                        <li><input type="hidden" name="id" value="22"></li>
                        <li><input type="hidden" id="hidden-input" class="demo" name="color" value="green"></li>
                        <li><input type="text" name="name" value="Зеленый"></li>
                        <li><button class="button update">Обновить</button>
                    </ul>
                </form>
Подскажите, как подправить ajax чтобы ПЕРЕДАТЬ $_POST и ПОДГРУЗИТЬ обновленные данные.
У меня получается просто подгрузить страницу, измененные данные не обновляется
Код:
$('#form').submit(function() {
                var data = $("#form").serialize();
                var action = $(this).attr('action');
                $.ajax({
                    url  : action,
                    type : 'POST',
                    dataType: 'text',
                    data : data,
                    success : function(data) {
                        $('.edit_color').html(data);
                        console.log(data);
                    }
                });
                return false;
            });
 

peretc001

Новичок
Чего ж у них у всех-то id одинаковый?
Логика в этом есть?
id=5 это id карточки клиента, к которому привязан определенный цвет, а у каждого цвета id разный:
<li><input type="hidden" name="id" value="1"></li>
<li><input type="hidden" name="id" value="2"></li>
...
<li><input type="hidden" name="id" value="22"></li>
 

Andkorol

Новичок
id=5 это id карточки клиента, к которому привязан определенный цвет, а у каждого цвета id разный
Ты цитату с текстом сопоставить попробуй – я спрашивал про id самих форм.
Или ты не видишь в этом никакой идентичности?
 

peretc001

Новичок
я сделал:
Код:
<div class="row">
            <?php   $color = $db->getAll('SELECT * FROM `color` WHERE id != "1"');
                    $i = 1;
                    foreach ($color as $row) {   ?>
           
            <form method="post" action="/inc/form/edit_color.php?id=<?php echo $id; ?>&type=update&color_id=<?php echo $row['id']; ?>" id="form-<?php echo $row['id']; ?>">
                <ul>
                    <li><input type="hidden" name="id" value="<?php echo $row['id']; ?>"></li>
                    <li><input type="hidden" name="back_color" value="<?php echo $row['color']; ?>"></li>
                    <li><input type="hidden" id="hidden-input" class="minicolors" name="color" value="<?php echo $row['color']; ?>"></li>
                    <li><input type="text" name="name" value="<?php echo $row['name']; ?>"></li>
                    <li><button class="button update">Обновить</button>
            </form>
            <form method="post" action="/inc/form/edit_color.php?id=<?php echo $id; ?>&type=del&color_id=<?php echo $row['id']; ?>" id="form-<?php echo $row['id']; ?>-dell">
                    <li><button class="button delete"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
                </ul>
            </form>
            <script>
                $("#form-<?php echo $row['id']; ?>").submit(function(e) {
                    var form = $(this);
                    var url = form.attr('action');
                    $.ajax({
                           type: "POST",
                           url: url,
                           data: form.serialize(), // serializes the form's elements.
                           
                        });
                    e.preventDefault(); // avoid to execute the actual submit of the form.
                });
                $("#form-<?php echo $row['id']; ?>-dell").submit(function(e) {
                    var form = $(this);
                    var url = form.attr('action');
                    $.ajax({
                           type: "POST",
                           url: url,
                           data: form.serialize(), // serializes the form's elements.
                           success: function(data)
                           {
                               $('.edit_color').empty();
                                $('.edit_color').append(data);
                           }
                        });
                    e.preventDefault(); // avoid to execute the actual submit of the form.
                });
            </script>
            <?php } $i++; ?>
        </div>
единственный вопрос, можно ли в скрипте объединить обе формы, чтоб меньше кода писать?
 

WMix

герр M:)ller
Партнер клуба
яб иначе подходил бы,

Код:
$('button.delete').on( 'click', function(){
   var form = $(this).closest('form');
   // bla bla
});
 
Сверху