SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Need ajax input in form to NOT post on enter, and much more

    Hey guys. I am developing a full system for my company. I have VERY LITTLE understanding of jquery and this is my first time working with it significantly. I clearly need to get a book and start reading about it. Until then, please help me get this working.

    I have a "check in" page where staff members will be checking in the received orders. Because an order can have multiple items, and one form the php looks through for each item to check in.

    If an item is received BUT not the proper item there is a field to search for the item received. The ajax then lists the search results which can be selected. There is also and ajax portion that checks to see if the device has a valid ESN IF it is in the array.

    I built the page without the form tags. Once I completed the page and started testing, my ajax calls for the product search and check esn field were posting instead of performing their function. Before the form tag they performed perfectly. So, I then modified the product search ajax. It worked PERFECTLY and only runs itself on an enter. However, after doing the same thing to the ajax call for "checking esn" it WOULD NOT work. So I reverted back to the old code. The ESN check should be performed on change.. so after an enter or they tab to the next field etc... where as the product search can be "just enter" or on change.

    Lastly, I was trying to "hide" the drop down for each item my page displays once the product search returns results. Once the user selects the radio, the drop down will be shown by slideDown. You can see that commented out at the bottom but it did not work. I assume it has to do with it being an ajax call.

    So, basically 3 times. I need both ajax calls to run but NOT to post the full form to my page and prematurely process information before everything can be processed. Lastly, the drop down be hidden until an input is selected for the Ajax call. If the another radio is selected it hides the shown one and slides the new one down.

    Thanks so much for any help guys! Its been so frustrating


    Code:
    		<script type="text/javascript">
    		$(function() {
    			//Show/Hide Drop down radios
    			$('.optRadio').hide();
    			$('.optional-li').hide();
    			$('input[name^="optRadio"]').change(function(){
    				var selected = $(this).val();
    				var classUp = $(this).attr("name");
    				$('.'+classUp).slideUp("fast");
    				$('#dd-'+selected).slideDown("fast");
    				if ($("[id^='noProduct-']").is(":checked")) {
    					$(".text-" + classUp).hide("fast");
    				} else {
    					$(".text-" + classUp).show("fast");
    				}
    			});
    			//Show/Hide ESN override radios
    			$('.masterESN').hide();
    			$('.masterESN-modify').click(function() {
    				var myClass = $(this).attr("id");
    				$('input[name="answer-'+myClass+'"]').prop('checked', false);
    				$('#open-'+myClass).slideToggle('fast');
    				event.preventDefault();
    			});
    			//Form for product searching ajax
    			$("[id^='product-search']").bind("keypress", function (e) {
    				if (e.keyCode == 13) {
    				var myClass = $(this).attr("class");
    		        // getting the value that user typed
    		        var searchString    = $("#product-search" + myClass).val();
    		        // forming the queryString
    		        var data            = 'productSearch='+ searchString + '&formID=' + myClass;
    		        // if searchString is not empty
    		        if(searchString) {
    		            // ajax call
    		            $.ajax({
    		                type: "POST",
    		                url: "<?php echo $path ?>ajax/product_search.php",
    		                data: data,
    		                beforeSend: function(html) { // this happens before actual call
    		                    $("#results" + myClass).html(''); 
    		                    $("#searchresults" + myClass).show();
    		                    $(".word").html(searchString);
    		               },
    		               success: function(html){ // this happens after we get results
    		                    $("#results" + myClass).show();
    		                    $("#results" + myClass).append(html);
    		              }
    		            });    
    			        }
    			  		return false;
    					}
    			  	});
    //Check ESN Ajax
    				$("[id^='inventory-ESN-']").change(function() {
    					var arr = [<?php 
    					$j = 1;
    					foreach($checkESNArray as $value){
    						echo "'$value'"; 
    						if(count($checkESNArray) != $j)
    							echo ", ";
    						$j++;
    					}
    					?>];
    					var carrier = $(this).attr("class");
    					var idVersion = $(this).attr("id");
    					if($.inArray(carrier,arr) > -1) {
    			        // getting the value that user typed
    			        var checkESN    = $("#inventory-ESN-" + idVersion).val();
    			        // forming the queryString
    			        var data            = 'checkESN='+ checkESN + '&carrier=' + carrier;
    			        // if checkESN is not empty
    			        if(checkESN) {
    			            // ajax call
    			            $.ajax({
    			                type: "POST",
    			                url: "<?php echo $path ?>ajax/checkESN.php",
    			                data: data,
    			                beforeSend: function(html) { // this happens before actual call
    			                    $("#esnResults" + idVersion).html(''); 
    			               },
    			               success: function(html){ // this happens after we get results
    			                    $("#esnResults" + idVersion).show();
    			                    $("#esnResults" + idVersion).append(html);
    								
    			              }
    			            });    
    				        }
    				        return false;
    					}
    				});
    		});
    		//This should hide the ajax drop down until the radio is clicked. This doesnt work.
    		// $('input[name^="new-device-"]').change(function(){
    		// 		var selected = $(this).attr("name");
    		// 		$('.condition-dd').slideUp("fast");
    		// 		$('input[name="dd-'+selected +'"]').slideDown("fast");
    		// 	});
    		</script>

  2. #2
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No one?


Bookmarks

Posting Permissions

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