Is there a more efficient way of using ajax to update search results?

Question

I have a HTML form that allows users to filter their choices when browsing. There are multiple fields (radio button groups) that when the user clicks on them, the search results are updated accordingly.

I'm doing this with an Ajax call to results.php and passing a different variable depending on the radio button group that has been clicked - like so:

<script>
 
 $('input[type=radio][name=data]').on('change', function() {
 $.ajax({
 type: "POST",
 url: "results.php",
 data: "monthlydata=" + $(this).val(),
 success: function(response){ 
 $('#results').show(1000).html(response);
 
 }
 
 });
 }); 
 $('input[type=radio][name=contract_length]').on('change', function() {
 $.ajax({
 type: "POST",
 url: "results.php",
 data: "contract_length=" + $(this).val(),
 success: function(response){ 
 $('#results').show(1000).html(response);
 
 }
 
 });
 }); 
 $('input[type=radio][name=price]').on('change', function() {
 $.ajax({
 type: "POST",
 url: "results.php",
 data: "price=" + $(this).val(),
 success: function(response){ 
 $('#results').show(1000).html(response);
 
 }
 
 });
 }); 
 $('input[type=radio][name=mbprice]').on('change', function() {
 $.ajax({
 type: "POST",
 url: "results.php",
 data: "price=" + $(this).val(),
 success: function(response){ 
 $('#results').show(1000).html(response);
 
 }
 
 });
 }); 
 $('input[type=radio][name=mblength]').on('change', function() {
 $.ajax({
 type: "POST",
 url: "results.php",
 data: "contract_length=" + $(this).val(),
 success: function(response){ 
 $('#results').show(1000).html(response);
 
 }
 
 });
 }); 
 $('input[type=radio][name=mbdata]').on('change', function() {
 $.ajax({
 type: "POST",
 url: "results.php",
 data: "monthlydata=" + $(this).val(),
 success: function(response){ 
 $('#results').show(1000).html(response);
 
 }
 
 });
 }); 

Everything works as I want it to - just seems a little long-winded.

Thanks in advance.

• BCdotWEB: The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How do I ask a good question?.

Answer 1

First, I would recommend to use a formatter to format your code, which will make it easier for you and others to read. Prettier is a very common choice.

Second, to extract common functionality into a function, you need to identify the parts that are the same and the parts that change. In your example, it it basically the same code 6 times, and only the input selector and the query parameter used are different. These two things will be the parameters of the function.

function updateResultsOnChange(input, queryparam) {
 $(input).on("change", function() {
 $.ajax({
 type: "POST",
 url: "results.php",
 data: queryparam + "=" + $(this).val(),
 success: function(response) {
 $("#results").show(1000).html(response);
 }
 });
 });
}
updateResultsOnChange("input[type=radio][name=data]", "monthlydata");
updateResultsOnChange("input[type=radio][name=contract_length]", "contract_length");
updateResultsOnChange("input[type=radio][name=price]", "price");
updateResultsOnChange("input[type=radio][name=mbprice]", "price");
updateResultsOnChange("input[type=radio][name=mblength]", "contract_length");
updateResultsOnChange("input[type=radio][name=mbdata]", "monthlydata");

Also please check if you need multiple radio boxes that do the same thing, it might be confusing for users.

• bertster: Thanks. I had to alter this line $("#results").show(1000).html() to include .html(response)
• corvus_192: Sorry, that was a copy-paste mistake.