Replace Line Feeds With Commas Using Javascript

The following JavaScript function can be used to replace line feeds and carriage returns with commas. I find this particularly useful when formatting a data column from Excel into an SQL constraint.

Sample Input

1
2
3
4
5

Sample Result

1,2,3,4,5

The JavaScript function uses a simple regular expression to remove line feeds and carriage returns. The comma as the second argument to the ref.value.replace function may be replaced with any other character to meet your specific requirement.

Live Test

Test the code using the following text area. Enter a carriage return / line feed separated column of data, move focus off the text area, and the code will automatically format the list.

Source Code

function remove_crlf(ref) {
  ref.value = ref.value.replace(new RegExp("[\r\n]", "gm"), ",");
}

Using a simple HTML page with a Text Area, we can paste the data list into the form. When the cursor is moved away from the Text Area, the function is automatically called and the list is formatted with commas replacing the line feeds and carriage returns on each line.

Putting all of the code together, we get the following which can be saved to an html file.

<html>
  <head>
    <script language='javascript'>
      function remove_crlf(ref) {
        ref.value = ref.value.replace(new RegExp("[\r\n]", "gm"), ",");
      }
    </script>
  </head>
  <body>
    <form name='frmremover'>
      <textarea name="txtdata" rows="5" cols="40" onblur="javascript:remove_crlf(this)"></textarea>
    </form>
  </body>
</html>

Submit Form With Enter Key Using jQuery

By default in most browsers, hitting the Enter key will trigger the browser to follow the the URL or button that currently has tab focus. Sometimes it seems as though the browser does whatever it wants after the user hits Enter because the focus isn’t readily apparent. In an interface with one or more forms, it is preferable to have the Enter key trigger the submission of the form so that the user isn’t forced to use his pointer to click the submit button. It’s also nice to include this feature to avoid data loss when the user inevitably hits Enter and the browser decides to go wherever it feels like it.

In this example, we add code that allows the user to submit a form with the enter key using jQuery.

HTML Form

<div id='form_1'>
  Field 1: <input type='text' name='field_1' id='field_1'>
  <p> </p>
  <button type='button' id='form_1_submit_button'>Submit</button>
</div>

jQuery Code

In the following jQuery code, we have a self-executing anonymous function that binds a click event handler to #form_1_submit_button and an event handler for the Enter keypress inside #form_1. Whether the user specifically clicks the submit button or hits the Enter key anywhere inside the form, the ValidateForm() function is called.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 
<script language='javascript'>
  //submit form with enter key using jQuery
  $(function() {
    $("#form_1_submit_button").click(function() {
      ValidateForm();
    });
    $("#form_1").keypress(function(e) {
      if(e.which == 13) {
        ValidateForm();
        return false;
      }
    });
  });
</script>

Select a Drop-down List Item Using JavaScript

The following JavaScript functions are useful for selecting items in HTML drop-down lists. As an example, these can be used if you have server-side code returning values that should then be visually selected on the user’s screen without rebuilding the entire page.

<select id="country_list" name="country_list">
  <option value="1">USA</option>
  <option value="2">Canada</option>
  <option value="3">Mexico</option>
</select>

This first function selects an item based on its value. Pass an object referring to a list element, e.g. document.getElementById(“country_list”), and the value that should be selected.

function selectItemValue(list, selectedValue) {
  for(j = 0; j < list.options.length; j++) {
    if(toUpper(list.options[j].value) == toUpper(selectedValue)) {
      list.selectedIndex = j;
      break ;
    }
  }
}

This second function will select an item based on its displayed text name. Pass in an object referring to a list element, e.g. document.getElementById(“country_list”), and the displayed text value that should be selected.

function selectItemText(list, selectedText) {
  for(j = 0; j < list.options.length; j++) {
    if(toUpper(list.options[j].text) == toUpper(selectedText)) {
      list.selectedIndex = j;
      break ;
    }
  }
}

The following is an example of how to call both functions using the example list:

selectItemValue(document.getElementById("country_list"), 1);
selectItemText(document.getElementById("country_list"), "USA");