...

View Full Version : AJAX form submit - 2 fields - 2 .change events



dannio1984
02-01-2011, 11:34 AM
I have written an auto updating script for dynamic pricing. Products are selected from a select box and the qauntity is typed into an input box.

I currently have the form id submit set to .change, which is perfect for the select box, but means that when the quantity is changed, you have to click off of the input box.

Is there a way of converting the code below to look for the size select box to update on .change and the quantity box to update on .keyup?



<script type="text/javascript">
$(document).ready(function() {
$("#formid").change(function() {
var sizeselect = $("#size_select").val();
var qty = $("#quantity").val();
$.post("/picture_frame_mouldings/ajax_calc/std/{$ItemCode}", { size_select: sizeselect, quantity: qty }, function(data) {
$("#status p").html(data);
});
return false;
});
});
</script>


Thanks,

Dan

Spudhead
02-01-2011, 03:13 PM
Use delegate() (http://api.jquery.com/delegate/) to fire the same code on different events and different elements:


$(function(){
$('form').delegate('input,select', 'keyup change', function(e){
var $parent_fieldset = $(this).parent('fieldset');
var size = $parent_fieldset.find('select.size_select').val();
var quantity = $parent_fieldset.find('input.quantity').val();
$.post("/picture_frame_mouldings/ajax_calc/std/{$ItemCode}", { size_select: size, quantity: quantity }, function(data) {
$("#status p").html(data);
});
});
});


<form id="f1" action="page.php" method="post">
<fieldset id="fsOne">
<input class="quantity" type="text" name="txtOne" id="txtOne" value="">
<select class="size_select" name="selOne" id="selOne">
<option value="one">one</option>
<option value="two">two</option>
</select>
</fieldset>
<fieldset id="fsTwo">
<input class="quantity" type="text" name="txtTwo" id="txtTwo" value="">
<select class="size_select" name="selTwo" id="selTwo">
<option value="one">one</option>
<option value="two">two</option>
</select>
</fieldset>
</form>

dannio1984
02-05-2011, 05:43 PM
Thanks for the reply, I couldn't get this running but have however got around it by making both the form fields select boes (product and qty) which is exactly what I want. Problem now is it works in every browser except for IE.

I have narrowed it down to the # signs which appear at the beginning of the form field IDs. Removing 1 from my code make the ajax update in IE but taking both of the #'s out stops it from working full stop.

Any ideas?


<script type="text/javascript">
$(document).ready(function() {
$("#a_sizes_form").change(function() {
var asizeselect = $("#a_size_select").val();
var qty = $("qu").val();
$.post("/picture_frame_mouldings/ajax_calc/std/{$ItemCode}", { a_size_select: asizeselect, qu: qty }, function(data) {
$("#status p").html(data);
});
return false;
});
});
</script>

dannio1984
02-05-2011, 06:05 PM
Basically....I need this function to work for 1 form ID with 2 selectboxes submitting on change. Changing either of them re-submits the form.

therefore requiring the following lines to work together

var qty = $(".qu").val();

var asizeselect = $("#a_size_select").val();

Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum