CODEWITHSUNDEEP
htmlhtml-select
SoundChaos
SoundChaos

Reputation: 307

How to format text of option values inside of a select tag?

I have a list of table items that when a copy button is pressed, all the table items concatenate into one text box, get selected, and get put on windows clipboard.

Boxes are formatted like so:

<tr>
  <td>Name of Person:</td>
  <td><textarea name="name" rows="2" cols="30" id="name"></textarea></td>
</tr>
<tr>
  <td>Type of Service:</td>
  <td><select name="drop1" id="txt_drop1">
      <option value="">None</option>
      <option value="Type of Service: Minimal">Minimal</option>
      <option value="Type of Service: Normal">Normal</option>
      <option value="Type of Service: Full">Full</option>
      <option value="Type of Service: Premium">Premium</option>
    </select></td>
</tr>
<tr>
  <td>Dollar Amount:</td>
  <td><textarea name="amount" rows="1" cols="30" id="txt_info2"></textarea></td>
</tr>
<tr>
<td><textarea name="bigtextbox" rows="5" cols="30" id="txt_info2"></textarea></td>
</tr>

What I need is the formatting, in that when the copy button is pressed, the resulting text concatenates in a neat manner. I can make it happen like so:

Name: John
Type of Service: Full
Amount: $125

But I also need to not line break if no option is selected in the drop down box, like so:

Name: John
Amount: $125

Instead of:

Name: John

Amount: $125

Is there a way to apply formatting code such as '\n' to the value of the option? Right now all my non box textboxes are formatted in the concatenate code after the copy button is clicked, ex: 

    <input type="button" style="font-weight:bold;" name="clipboard_copy" value="Copy" onClick="document.data_entry.bigtextbox.value = 'Name:&nbsp;' + document.data_entry.name.value + '\n' + document.data_entry.drop1.value + '\n' + 'Amount: $' + document.data_entry.amount.value>

Upvotes: 5

Views: 7383

Answers (1)

DaGLiMiOuX
DaGLiMiOuX

Reputation: 889

Probably I didn't understand you. I thought you wanted to change option element format into the select element. If you want to achieve that format after pressing the button, you can try this:

<input type="button" style="font-weight:bold;" name="clipboard_copy" value="Copy"
onClick="document.data_entry.bigtextbox.value = 'Name:&nbsp;' + 
document.data_entry.name.value + (document.data_entry.drop1.value.trim().length 
=== 0) ? '' : '\n' + document.data_entry.drop1.value + '\n' + 'Amount: $' + 
document.data_entry.amount.value">

I added this line to your button example:

(document.data_entry.drop1.value.trim().length === 0) ? '' : '\n' + 
document.data_entry.drop1.value

This checks (you can check whatever condition you want. I just used this to check if you have selected "blank", for example) if your select has a value. If does not have a value, it sets '' to your "response" text. If it contains something, it will add '\n' + document.data_entry.drop1.value.

Upvotes: 1

Related Questions