Topic Tag: Content-submission forms

Problem:

The customer wants to place the label behind the input in the search form to manipulate the label based on the input status using CSS. However, the input is currently placed inside the label, making this manipulation difficult.

Solution:

I confirmed that the customer is using legacy views to create the search form.
I checked internally and found that it is not possible to separate the label from the input using shortcodes in legacy views.
As a workaround, I suggested using JavaScript to manipulate the label based on the checkbox's checked status. Here is an example code snippet:

jQuery(function($){
    $(".class_containing_your_checkbox input[type='checkbox']").change(function(event){
        var checkbox = $(event.target);
        var status = checkbox.prop('checked');
        if (status) checkbox.parent().css('background-color', '#569cc3');
        else checkbox.parent().css('background-color', '');
    });
});

The code above applies CSS rules based on whether the checkbox is selected or not. The customer needs to change the function to target the specific div class containing the checkbox and apply the desired CSS for the labels.

Problem:
Customer would like to change the option on the minutes field to 15-minute increments (0, 15, 30, 45).
Solution:
It is possible to use some jQuery to customize it and change the values of the select field.

Please add the following code to the javascript section of the form:

(function($, window) {
  $.fn.replaceOptions = function(options) {
    var self, $option;
 
    this.empty();
    self = this;
 
    $.each(options, function(index, option) {
      $option = $("<option></option>")
        .attr("value", option.value)
        .text(option.text);
      self.append($option);
    });
  };
})(jQuery, window);
 
var options = [
  {text: "0", value: 1},
  {text: "15", value: 2},
  {text: "30", value: 3},
  {text: "45", value: 4},
];
 
 jQuery("select[name$=\'minute]\']").replaceOptions(options);