Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    AJAX form submit - 2 fields - 2 .change events

    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?

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

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Use delegate() to fire the same code on different events and different elements:

    Code:
    $(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);
    		});
    	});
    });
    Code:
    <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>

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

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

  • #4
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •