1
\$\begingroup\$

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.

\$\endgroup\$
1
  • \$\begingroup\$ 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?. \$\endgroup\$
    – BCdotWEB
    Apr 24, 2023 at 14:10

1 Answer 1

2
\$\begingroup\$

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.

\$\endgroup\$
2
  • \$\begingroup\$ Thanks. I had to alter this line $("#results").show(1000).html() to include .html(response) \$\endgroup\$
    – bertster
    Apr 25, 2023 at 5:18
  • 1
    \$\begingroup\$ Sorry, that was a copy-paste mistake. \$\endgroup\$
    – corvus_192
    Apr 25, 2023 at 14:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.