What's the best way to remove spaces and replace them with dash?

[man5]

Basically I have a very long form select option drop down list.  What I would like to do is that for each option "value", I want to remove the spaces and instead add dash to it.  Doing each option value by hand would take me a very long time, so I thought I might try jquery for short cut.  If you have another method, let me know.

 

Here's what I have so far.  Doesn't seem to work.

<script>
      $(document).ready(function () {

          $('#model').change(function(){
            var str = $(this).val();
            str = str.replace(/\s+/g, "-");
          });
      });
  </script>

// here's an example of select options

<select id="model" name="model">
      <option value="john doe" >John Doe</option>
      <option value="john smith lu" >John Smith Lu</option>
</select>

[requinix]

You got the replacement part done right, but all you're doing is grabbing the current value and sticking the modified value into a variable. Nothing else.

 

Want to fix the values with Javascript? (Why can't you fix it server-side?) Fix all of them, and do it when the page loads.

$(function() {
	$("#model option").each(function() {
		this.value = this.value.replace(/\s+/g, "-");
	});
});

[Muddy_Funster]

Want to fix the values with Javascript? (Why can't you fix it server-side?) Fix all of them, and do it when the page loads.

Maybe it's a static HTML file, I didn't notice anything in the OP that said they were connecting to PHP.

 

for jquery solution you will want to use the each() function. eg.

<!-- HTML -->
<select id="method">
<option value="option 1">Option one</option>
<option value="option 2">Option two</option>
<option value="option 3">Option three</option>
</select>
<!-- END HTML -->

//JQuery JS
$(document).ready(function () {
  $('#method > option').each(function(){
    var str = $(this).attr("value");
    str = str.replace(/\s+/g, "-");
    $(this).attr("value",str);
  });
});
//END JQuery JS

Edited March 31, 2016 by Muddy_Funster

[Psycho]

Want to fix the values with Javascript? (Why can't you fix it server-side?) Fix all of them, and do it when the page loads.

 

 

 

Maybe it's a static HTML file, I didn't notice anything in the OP that said they were connecting to PHP.

 

If it is a static page, then it would be stupid to "fix" the values with javascript every time the page is loaded. If it is a static page then the values should be fixed permanently in the HTML code - one time. Even if there were a few hundred options, it wouldn't take that long to fix the values one time in the HTML code. There are plenty of ways to semi-automate it. For example, I could copy/paste all the options into Excel and reformat all of them in less than 5 minutes.

 

If the values are dynamically created (such as with PHP), then the values should be modified on the server-side instead of introducing unnecessary client-side code.

[Muddy_Funster]

If it is a static page, then it would be stupid to "fix" the values with javascript every time the page is loaded. If it is a static page then the values should be fixed permanently in the HTML code - one time. Even if there were a few hundred options, it wouldn't take that long to fix the values one time in the HTML code. There are plenty of ways to semi-automate it. For example, I could copy/paste all the options into Excel and reformat all of them in less than 5 minutes.

 

If the values are dynamically created (such as with PHP), then the values should be modified on the server-side instead of introducing unnecessary client-side code.

 

I didn't say JS was the best way to do it, I was just pointing out that PHP may not be be part of this exact problem.  Without knowing the context of the issue experienced, or the reasons why it is an issue it the first place, it can't be discerned how stupid the fix really is.  What if the form is loaded in through ajax from an external site that the OP does not administer? What if the page is part of an admin console that is designed to apply a standardised formatting to user created form elements? Again, not the best way to accomplish the latter, but certainly not a "stupid" one either.  

 

Besides, I thought the point was to help people, not judge them?

[Jacques1]

Besides, I thought the point was to help people, not judge them?

 

The point is to find a reasonable solution, and we all know that the initial approach isn't always the best one. In fact, if we stopped questioning ideas out of “politeness”, we wouldn't help anybody.

 

I think most users actually expect us to look at the context and not just produce code, so Psycho's critique is perfectly valid.

[Psycho]

Besides, I thought the point was to help people, not judge them?

 

I wasn't judging anyone, I was judging the process.

 

 

What if the form is loaded in through ajax from an external site that the OP does not administer? What if the page is part of an admin console that is designed to apply a standardised formatting to user created form elements? Again, not the best way to accomplish the latter, but certainly not a "stupid" one either. 

 

OK, I'll admit there may be an edge case where the original proposed solution could be valid, but it would be a very, very narrow case. Even if one of the above were true, the primary purpose of a form is to send data to some resource to be acted upon. If the OP is sending the data to a page which he controls, then a JS solution is still a bad idea. So, the only logical use case I can think of where this would make sense is if all of the following are true:

1. The options are being loaded via an external source (e.g. AJAX) which the OP does not control
2. The form is being sent to a page the OP does not control
3. The page is not generated via server-side code and the OP does not have the ability to use server-side code

[man5]

Gentlemen,

 

Let me explain the situation. 

 

The platform I'm using doesn't allow access to back-end, other wise I would have taken that route. 

 

Basically I'm trying to replicate "Shop by Vehicle" search box here tirerack.com. The fastest way for me to copy that was to directly copy the individual select dropdowns.

 

I have found a way to do that and now completed it using http://www.appelsiini.net/projects/chained.

 

As for replacing the spacing with dash, I have figured it out and it works out fine when I search. 

var model = formObj.elements['model'].value.replace(/[\. ,:-]+/g, "-");

Outside of the javascript drop down list, I also needed the same list without spaces and other special characters.  Thanks to your suggestion "Psycho", I did that using Excel.

 

That's all good now.

 

But now there is a new issue.  On mobile and tablet, it takes very long to load the search box.  On PC it loads fine.  I noticed the reason is because I have such a long list of select options for the "model".  It's almost 6000 lines. The thing is, since I'm using chained plugin above, it only shows the options relative to what I chose in the "make" and "year". But still the page loads extremely slow on mobile and tablet.  

 

Do you know why that is?

 

Here's the full code.

<script>
  // Code goes here
  function submitAction(formObj) {
      var root  = formObj.action;
      var type  = formObj.elements['type'].value;
      var make  = formObj.elements['make'].value;
      var year  = formObj.elements['year'].value;
      var model = formObj.elements['model'].value.replace(/[\. ,:-]+/g, "-");

    

      var href = root + type + '/' + make + '+' + year + '+' + model;
      window.location.href = href;
      return false;
    }

</script>
<script>
  jQuery(document).ready(function($){
    /* For jquery.chained.js */
    $("#year").chained("#make");
    $("#model").chained("#year");

  });
</script>
<form id="w-form" action="/collections/" method="get" onsubmit="return submitAction(this);">

    <select id="make" name="make" required>
      <option value="" >Select Make</option>
      {% include 'part-1-search-make' %}
    </select>
    <select id="year" name="year" required>
      <option value="" class="grey-option">Select Year</option>
      {% include 'part-1-search-year' %}
    </select>
    <select id="model" name="model" required>
      <option value="" class="grey-option">Select Model</option>
      {% include 'part-1-search-options' %}
      {% include 'part-2-search-options' %}
      {% include 'part-3-search-options' %}
      {% include 'part-4-search-options' %}
      {% include 'part-5-search-options' %}
      {% include 'part-6-search-options' %}
      {% include 'part-7-search-options' %}
      {% include 'part-8-search-options' %}
      {% include 'part-9-search-options' %}
      {% include 'part-10-search-options' %}
      {% include 'part-11-search-options' %}
    </select>

    <select id="type" name="type" required>
      <option value="">I'm Shopping For</option>
      <option value="wheels">Wheels</option>
      <option value="tires">Tires</option>
    </select>
    <input type="submit" id="w-search-btn" value="View Results">
  </form>

Edited April 1, 2016 by man5

[Psycho]

Just because you don't have access to the back-end where the options originate from does not mean you cannot retrieve and format the options on your back-end. That most likely the reason why you are having trouble loading the lists on a mobile device because they do not have the same processing power of a normal PC. You should not push so much processing requirements on the user's system.

 

Here is what I propose:

 

First: If your page is not already a PHP (or other server-side page), convert it to one now. Even if there is no PHP code now and it is just an HTML page, it will still load fine when renamed to a PHP file. Although, this does require that the web server supports processing of PHP pages.

 

Second, put a small bit of PHP code at the top of the page to retrieve the options from wherever the Javascript is getting the data from. Then use PHP to convert the options into the format you need.

 

Lastly, add the reformatted options to the output and remove all the Javascript to dynamically create the options from the external lists.

 

EDIT: With the chained selects, the processing needed to switch out the values may still be too much. If so, then you should do an AJAX call to get the list for a child select list when the parent is changed.

Edited April 1, 2016 by Psycho

[man5]

Just because you don't have access to the back-end where the options originate from does not mean you cannot retrieve and format the options on your back-end. That most likely the reason why you are having trouble loading the lists on a mobile device because they do not have the same processing power of a normal PC. You should not push so much processing requirements on the user's system.

 

Here is what I propose:

 

First: If your page is not already a PHP (or other server-side page), convert it to one now. Even if there is no PHP code now and it is just an HTML page, it will still load fine when renamed to a PHP file. Although, this does require that the web server supports processing of PHP pages.

 

Second, put a small bit of PHP code at the top of the page to retrieve the options from wherever the Javascript is getting the data from. Then use PHP to convert the options into the format you need.

 

Lastly, add the reformatted options to the output and remove all the Javascript to dynamically create the options from the external lists.

 

EDIT: With the chained selects, the processing needed to switch out the values may still be too much. If so, then you should do an AJAX call to get the list for a child select list when the parent is changed.

 

I'm using Shopify platform so it doesn't support PHP, only Ruby. 

 

 

Could you please show me an example of the AJAX call you're talking about. 

 

To give you a better look at how the chained select drop downs look, here's a small bit.  Note that the #model options are around 6000 in number.

<select id="make" name="make" required>
  <option value="" >Select Make</option>
  <option value="acura">Acura</option>
  <option value="alfa-romeo">Alfa Romeo</option>
  <option value="american-motors">American Motors</option>
  <option value="aston-martin">Aston Martin</option>
  <option value="audi">Audi</option>
  <option value="bmw">BMW</option>
</select>
<select id="year" name="year" required>
  <option value="" class="grey-option">Select Year</option>
  <option value="2017 acura" class="acura">2017</option>
  <option value="2016 acura" class="acura">2016</option>
  <option value="2015 acura" class="acura">2015</option>
  <option value="2014 acura" class="acura">2014</option>

  <option value="1974 alfa-romeo" class="alfa-romeo">1974</option>
  <option value="1973 alfa-romeo" class="alfa-romeo">1973</option>
</select>
<select id="model" name="model" required>
  <option value="" class="grey-option">Select Model</option>
  <option value="ILX"                   class="2016 acura">ILX</option>
  <option value="ILX A-SPEC Package"    class="2016 acura">ILX A-SPEC Package</option>
  <option value="MDX-FWD"               class="2016 acura">MDX FWD</option>
  <option value="MDX-SH-AWD"            class="2016 acura">MDX SH-AWD</option>
  <option value="RDX-AWD"               class="2016 acura">RDX AWD</option>
  <option value="RDX-FWD"               class="2016 acura">RDX FWD</option>
  <option value="RLX-FWD"               class="2016 acura">RLX FWD</option>
  <option value="RLX-SH-AWD"            class="2016 acura">RLX SH-AWD</option>
  <option value="TLX"                   class="2016 acura">TLX</option>

  <option value="GTV"                   class="1974 alfa-romeo">GTV</option>
  <option value="Spider"                class="1974 alfa-romeo">Spider</option>
  <option value="GTV"                   class="1973 alfa-romeo">GTV</option>
  <option value="Spider"                class="1973 alfa-romeo">Spider</option>
</select>

Edited April 1, 2016 by man5

[mac_gyver]

Could you please show me an example of the AJAX call you're talking about. 

 

 

the chained select script you are using has a 'remote' version that uses ajax to retrieve the data. see the example at the site you posted a link to.