Add a character to separate results in a form output only when the text box has text-CodePudding

I made a form that renders text after the user fills up the text boxes. I want to add an underscore between words but only when a text box is filled with text.

Box1: One

Box2: (empty)

Box3: Three

Current Result: One__Three (notice the double underscore)

Desired result: One_Three.

    <form onsubmit="return false" oninput="totalamount.value = client.value   '_'   campaign.value   '_'   spotname.value   '_'   market.value">
                
            <ul >
            <li id="li_1" >
                <div>Client:<input name="client" id="client" type="text" maxlength="100" value="" /></div></li>
            <li id="li_2" >
                <div>Campaign:<input name="campaign" id="campaign" type="text" value="" /></div></li>
            <li id="li_3" >
                <div>Spot Name:<input name="spotname" id="spotname" type="text" value="" /></div></li>
            <li id="li_4" >
                <div>Market:<input list="market" name="market" />
                    <datalist id="market">
                        <option value="HM" >
                        <option value="OLV" >
                        <option value="SM_Vertical" >
                        <option value="SM_Square" >
                        <option value="GM" >
                        <option value="InternalUse" >
                        <option value="Country?" >
                    </datalist>
                </div></li>
            <li id="li_5" align="center" style="font-weight:bolder; background-color: #F5F5F5; padding:10px">
                <output name="totalamount" id="totalamount" for="filename"></output>
                </li>

I know the _ is adding the underscore, but I don't know how to add it to a value so it only shows in the result box when there is text in the corresponding text box.

Thanks in advance for your help!

CodePudding user response：

Add the following on event attributes to the <form>:

onkeyup
onkeydown
onchange

Asign the following expression to each of the attributes previously listed:

 totalamount.value = totalamount.value.replace(/_{2,}/, '_')

So now every keystroke will be covered from 2 to 3 times as well as anytime focus is lost. On "keyup", "keydown", and "change" events, the value of totalamount will be searched for a pattern consisting of two or more consecutive occurance of an underscore -- any match will be replaced by a single underscore.

Also the [for] attribute has been corrected to the #ids of the four <input>s: "client campaign spotname market". Whether it makes a difference in this situation IDK, but I didn't see any "filename" anyhow.

:root {
  font: 1ch/1.5 'Segoe UI';
}

body {
  font-size: 3ch;
}

label,
output,
input {
  display: inline-block;
  font: inherit
}

label {
  width: 10ch
}

<form onsubmit="return false" oninput="totalamount.value = client.value   '_'   campaign.value   '_'   spotname.value   '_'   market.value" onkeyup="totalamount.value = totalamount.value.replace(/_{2,}/, '_')" onkeydown="totalamount.value = totalamount.value.replace(/_{2,}/, '_')"
  onchange="totalamount.value = totalamount.value.replace(/_{2,}/, '_')">

  <label for='client'>
  Client: </label>
  <input name="client" id="client" type="text" maxlength="100" value="">
  <br>
  <label for='campaign'>
  Campaign: </label>
  <input name="campaign" id="campaign" type="text" value="">
  <br>
  <label for='spotname'>
  Spot Name: </label>
  <input name="spotname" id="spotname" type="text" value="">
  <br>
  <label for='market'>
  Market: </label>
  <input list="market" name="market">
  <datalist id="market">
    <option value="HM">
    <option value="OLV">
    <option value="SM_Vertical">
    <option value="SM_Square">
    <option value="GM">
    <option value="InternalUse">
    <option value="Country?" >
  </datalist>
  <br>
  <label for='totalamount'>Total Amount: </label>
  <output name="totalamount" id="totalamount" for="client campaign spotname market"></output>
</form>