php - AJAX Query for Multiple Dynamic Forms with varying ID's -
this in header, jquery.min.js included:
<script type="text/javascript"> //<![cdata[ $(function() { $("form.ajax").submit(function(e) { var $this = $(this); e.preventdefault(); $.ajax({ url: 'index.php', type: 'post', data: $this.serialize(), success: function() { //alert(response); } }) return false; }); }); //]]> </script> this example form dynamically generated:
<form id="dash_73" method="post" class="ajax"> <fieldset> <input type="hidden" name="action" value="ajax_purchase_ticket" /> <input type="hidden" name="lottery_id" value="73" /> <div class="left1"> <button type="submit" name="dash" form="dash_73" id="button_73-1" value="1" class="ticket taken" disabled="disabled">user 1</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-2" value="2" class="ticket taken" disabled="disabled">user 1</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-3" value="3" class="ticket taken" disabled="disabled">user 1</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-4" value="4" class="ticket taken" disabled="disabled">user 1</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-5" value="5" class="ticket free">5 dash</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-6" value="6" class="ticket taken" disabled="disabled">user 2</button> <br /> </div> <div class="left2"> <button type="submit" name="dash" form="dash_73" id="button_73-7" value="7" class="ticket yours" disabled="disabled">user 3</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-8" value="8" class="ticket yours" disabled="disabled">user 3</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-9" value="9" class="ticket yours" disabled="disabled">user 3</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-10" value="10" class="ticket yours" disabled="disabled">user 3</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-11" value="11" class="ticket yours" disabled="disabled">user 3</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-12" value="12" class="ticket taken" disabled="disabled">user 2</button> <br /> </div> <div class="left3"> <button type="submit" name="dash" form="dash_73" id="button_73-13" value="13" class="ticket yours" disabled="disabled">user 3</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-14" value="14" class="ticket yours" disabled="disabled">user 3</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-15" value="15" class="ticket yours" disabled="disabled">user 3</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-16" value="16" class="ticket yours" disabled="disabled">user 3</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-17" value="17" class="ticket yours" disabled="disabled">user 3</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-18" value="18" class="ticket taken" disabled="disabled">user 2</button> <br /> </div> <div class="left4"> <button type="submit" name="dash" form="dash_73" id="button_73-19" value="19" class="ticket yours" disabled="disabled">user 3</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-20" value="20" class="ticket yours" disabled="disabled">user 3</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-21" value="21" class="ticket taken" disabled="disabled">user 1</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-22" value="22" class="ticket yours" disabled="disabled">user 3</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-23" value="23" class="ticket yours" disabled="disabled">user 3</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-24" value="24" class="ticket yours" disabled="disabled">user 3</button> <br /> </div> <div class="left5"> <button type="submit" name="dash" form="dash_73" id="button_73-25" value="25" class="ticket yours" disabled="disabled">user 3</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-26" value="26" class="ticket yours" disabled="disabled">user 3</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-27" value="27" class="ticket yours" disabled="disabled">user 3</button> <br /> <button type="submit" name="dash" form="dash_73" id="button_73-28" value="28" class="ticket yours" disabled="disabled">user 3</button> <br /> </div> </fieldset> </form> currently when click on button purchase ticket, nothing occurs. trying have when button pushed, run code. still trying work out response method on how retrieve success or failure. appreciated.
update: without ajax, code functions required. believe problem, pointed out kevin, button value not being submitted , why appears nothing occurs, button value required. looking find out how include button value.
update 2: here final code worked me success/failure messages well.
<script type="text/javascript"> //<![cdata[ $(function() { $('button[name="dash"]').click(function (e) { e.preventdefault(); var id = this.id; var $formelem = $(this).closest('form'); var formdata = $formelem.serializearray(); formdata.push({ name: this.name, value: this.value }); // if want submit 'form' attribute of button ... formdata.push({ name: 'form', value: $(this).attr('form') }); $.ajax({ url: 'index.php', type: 'post', data: formdata, success: function (data) { if ( data.completed == 1 ) { data.message = data.message + '<br />' + data.completed_message; } $("#centerpoint").hide(); $("#centerpoint").show(); if ( data.result == 1 ) { $('#' + id).attr("disabled", "disabled"); $('#' + id).removeclass("free").addclass("yours"); $('#' + id).text(data.buyer); $('#ajax_message').replacewith('<div class="form_message success" id="ajax_message">' + data.message + '</div>'); $("#centerpoint").delay(5000).slideup(); } else if ( data.result == 2 ) { $('#' + id).attr("disabled", "disabled"); $('#' + id).removeclass("free").addclass("taken"); $('#' + id).text(data.buyer); $('#ajax_message').replacewith('<div class="form_message error" id="ajax_message">' + data.message + '</div>'); $("#centerpoint").delay(5000).slideup(); } else if ( data.result == 3 ) { $('#ajax_message').replacewith('<div class="form_message error" id="ajax_message">' + data.message + '</div>'); $("#centerpoint").delay(5000).slideup(); } else { $('#ajax_message').replacewith('<div class="form_message error" id="ajax_message">unknown error!</div>'); $("#centerpoint").delay(5000).slideup(); } } }) /* should pass form data: action=ajax_purchase_ticket&lottery_id=73&dash=5&form=dash_73 */ return false; }); }); //]]> </script>
looks form posting"action=ajax_purchase_ticket&lottery_id=73"
are sure server side script functional amount of data? expecting 1 of button values?
from serialize docs (http://api.jquery.com/serialize/):
no submit button value serialized since form not submitted using button.
here's solution try include button value clicked: jquery serializearray doesn't include submit button clicked
update
see if want: http://jsfiddle.net/kevincollins/vlhce/
$('button[name="dash"]').click(function (e) { e.preventdefault(); var $formelem = $(this).closest('form'); var formdata = $formelem.serializearray(); formdata.push({ name: this.name, value: this.value }); // if want submit 'form' attribute of button ... formdata.push({ name: 'form', value: $(this).attr('form') }); $.ajax({ url: 'index.php', type: 'post', data: formdata, success: function () { //alert(response); } }) /* should pass form data: action=ajax_purchase_ticket&lottery_id=73&dash=5&form=dash_73 */ });
Comments
Post a Comment