CODEWITHSUNDEEP
phpjqueryajaxforms
Craig
Craig

Reputation: 195

Submitting a form where the form is included multiple times on the page?

My query outputs a list of events from the database, but each of the events has an edit button which loads a form in a modal, the issue I am having is that the form is included on the page multiple times depending how many events there are which all input field are the same name.

On submission it just gets the very first form input values.

<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>

My ajax form form code is as follows:

  $(".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;
});

I need it to get the event ID and then submit the values of that form updating that record in the database where the ID is equal to that event ID.

Upvotes: 0

Views: 73

Answers (1)

Rick Burns
Rick Burns

Reputation: 1546

If the form is repeated multiple times on a page your input IDs must be unique across ALL instances of the forms. That's the purpose of an ID.

In your example there is more than one #event_date_edit for the page, so when jQuery tries to get the value it will only get you the first one. Uniquely assigning IDs to your fields or gathering them differently across the entire page will fix your problem.

Try looking up the jQuery 'closest' call and utilize your generated editblockid. https://api.jquery.com/closest/

Upvotes: 3

Related Questions