在页面上多次提交表单的表单?

时间:2015-08-11 16:43:17

标签: php jquery ajax forms

我的查询从数据库输出事件列表,但每个事件都有一个编辑按钮,用于在模式中加载表单,我遇到的问题是表单多次包含在页面上,具体取决于多少所有输入字段都是同名的事件。

在提交时,它只获取第一个表单输入值。

<form action="" method="post" name="editeventform_<?php echo $row->event_id; ?>" id="editeventform_<?php echo $row->event_id; ?>" class="editeventform_<?php echo $row->event_id; ?>">
                    <ul class="six columns pull_left service_column_one">
                        <li class="field"><input id="event_title_edit" name="event_title_edit" type="text" class="input event_title_edit" placeholder="Event Name"  value="<?php echo $row->event_title; ?>"></li>
                        <li class="field"><input id="event_date_edit" name="event_date_edit" type="text" class="input event_date_edit" placeholder="" value="<?php echo date('d-m-Y',strtotime($row->event_date)); ?>"></li>
                        <li class="field">
                            <input id="event_orig_name_edit" name="event_orig_name_edit" type="text" class="input event_orig_name_edit" placeholder="Originator's Name"  value="<?php echo $row->event_orig_name; ?>"></li>
                        <li class="field"><input id="event_orig_tel_edit" name="event_orig_tel_edit" type="text" class="input event_orig_tel_edit" placeholder="Originator's Tel No" value="<?php echo $row->event_orig_tel; ?>"></li>
                        <li class="field"><input id="event_orig_email_edit" name="event_orig_email_edit" type="text" class="input event_orig_email_edit" placeholder="Originator's Email" value="<?php echo $row->event_orig_email; ?>"></li>
                        <li class="field"><input id="event_time_lunch_edit" name="event_time_lunch_edit" type="text" class="input event_time_lunch_edit" placeholder="Time of lunch" value="<?php echo $row->event_time_lunch; ?>"></li>
                        <li class="field styled-select">
                            <select name="event_room_edit" id="event_room_edit">
                                <option>Room Location</option>
                                 </select>
                        </li>
                    </ul>
                    <ul class="six columns pull_right">
                        <li class="field styled-select">
                            <select name="event_cater_edit" id="event_cater_edit">
                                <option>Caterers</option>
                                </select>
                        </li>
                        <li class="field styled-select">
                            <select name="event_type_edit" id="event_type_edit">
                                <option>Type of Lunch</option>
                                </select>
                        </li>
                        <li class="field"><input id="event_attendees_edit" name="event_attendees_edit" type="text" class="input event_attendees_edit" placeholder="Total Attendees" value="<?php echo $row->event_attendees; ?>"></li>
                        <li class="field"><textarea rows="4" cols="20" id="event_dieray_edit" name="event_dieray_edit" type="text" class="wide event_dieray_edit" placeholder="<?php echo $row->event_dieray; ?>"><?php echo $row->event_dieray; ?></textarea></li>
                    </ul>
                    <input type="hidden" name="antiSpamEvtEdit" id="antiSpamEvtEdit">
                    <input type="submit" name="submitedit" value="Submit Changes" id="<?php echo $row->event_id; ?>" class="submitedit form_submit_btn pull_right">
                    </form>

我的ajax表单表单代码如下:

  $(".submitedit").click(function() {

    var editblockid = jQuery(this).attr("id");
    var event_date_edit = $("#event_date_edit").val();
    var event_orig_name_edit = $("#event_orig_name_edit").val();
    var event_orig_tel_edit = $("#event_orig_tel_edit").val();
    var event_orig_email_edit = $("#event_orig_email_edit").val();
    var event_title_edit = $("#event_title_edit").val();
    var event_time_lunch_edit = $("#event_time_lunch_edit").val();
    var event_room_edit = $("#event_room_edit").val();
    var event_cater_edit = $("#event_cater_edit").val();
    var event_type_edit = $("#event_type_edit").val();
    var event_attendees_edit = $("#event_attendees_edit").val();
    var event_dieray_edit = $("#event_dieray_edit").val();
    var event_user_email_edit = $("#event_user_email_edit").val();
    var event_user_tel_edit = $("#event_user_tel_edit").val();
    var event_user_id_edit = $("#event_user_id_edit").val();
    var event_status_edit = $("#event_status_edit").val();
    var event_id_edit = $("#event_id_edit").val();
    var antispamevtedit = $("#antiSpamEvtEdit").val();

    $.ajax({
        type: "POST",
        url: "/process.php",
        data: dataString,
        success: function() {

            setTimeout(function() {
                $('.editeventform_' + editblockid).html('<p>Thank you your event has successfully been edited.</p>');
            }, 3500);
        }
 });
return false;
});

我需要它来获取事件ID,然后提交该表单的值,在ID等于该事件ID的数据库中更新该记录。

1 个答案:

答案 0 :(得分:3)

如果表单在页面上重复多次,则输入ID在表单的所有实例中必须是唯一的。这就是身份证的目的。

在您的示例中,页面有多个#event_date_edit,因此当jQuery尝试获取值时,它只会获得第一个值。唯一地为您的字段分配ID或在整个页面上以不同方式收集它将解决您的问题。

尝试查找jQuery&#39;最接近&#39;致电并利用您生成的editblockid。 https://api.jquery.com/closest/