Call Flow Note / Fom с использованием JS / HTML

Question

Я пытаюсь создать HTML-форму, используя Javascript, который копирует содержимое каждого поля и вставляет его в единственное текстовое поле.

HTML КОД ПРЕДОСТАВЛЯЕТСЯ

<h1><a>Call Flow Cheat Sheet</a></h1>

<form id="callflow" class="appnitro"  method="post" action="">

<div class="form_description">

<h2>Callflow</h2>

<p>Flowsheet to take notes and ensure you meet all QA elements on every call.</p>

</div>                      

<ul >

<li id="li_1" >

<label class="description" for="cust_name">Greet Customer </label> <br> 
Thank you for calling ___________ My Name is David to Whom do I have the Pleasure of Speaking with today? <br><br>
<label class="description" for="cust_name"> Customer Name</label>
<div>
<input id="cust_name" name="cust_name" class="element text medium" type="text" maxlength="255" value=""/> 
<br>
</div>
<label class="description" for="call_reason">Reason for the call. </label>
<div>
<textarea id="call_reason" name="call_reason" class="element textarea medium"></textarea> 
</div>  
</li>

<li id = "li_2" >
<label class="description" for="element_2">Provide Assurance Statement </label>
<p>____________ I want to personally apologize that your having to deal with this if this happened to me I would be fustrated as well.</p> <br>


</li>
<li id = "li_3" >
<label class="description" for="element_3">Provide Promoter Statement </label>
<p> This is not the experience we want our customers to have here at ______________. I would be more than happy to take care this for you. </p><br>
</li>

<li id="li_4" >
<label class="description" for="element_4">Ask Probing Questions:</label>
Why do you want to return [insert item]? <br>
Can I ask why your seeking to cancel your order? <br>
Was this item for an event? <br>
Could you describe the damage to me? 
<br>
<br>  
</li>
<li id = "li_5">
<label class="description" for="tailored_solution"> Propose Solution </label>
<p>D. Discount to keep. | R. Replacement Parts | U. Unit | M. Money Back</p> 
<br>
<div>
<textarea id="tailored_solution" name="tailored_solution" class="element textarea medium"></textarea> 
</div>
<br>
<br>
<label class="description" for="tailored_solution"> WRAP Call </label>

<p> It's going to take just a brief moment here for me to finish up processing this request for you. You wont hear anything but rest assured I am still here just holler if you need anything.  </p>
</li>
<li id="li_6" >

<label class="description" for="set_expectations">Recap & Set Expectations. </label>

<span>

<input id="set_expectations_discount" name="set_expectations_discount" class="element checkbox" type="checkbox" value="1" />

<label class="choice" for="set_expectations_discount">Discount Expectations</label>

<input id="set_expectations_replacement" name="set_expectations_replacement" class="element checkbox" type="checkbox" value="1" />

<label class="choice" for="set_expectations_replacement">Replacement Expectations</label>

<input id="set_expectations_refund" name="set_expectations_refund" class="element checkbox" type="checkbox" value="1" />

<label class="choice" for="set_expectations_refund">Refund Expectations</label>

<input id="set_expectations_return" name="set_expectations_return" class="element checkbox" type="checkbox" value="1" />

<label class="choice" for="set_expectations_return">Return Expectations</label>

</span> 

</li>
<li id="li_7" >

<label class="description" for="close">Check for Additional Needs Addressing  any Remaining Questions. </label>

<span>

<input id="close_1" name="close_1" class="element checkbox" type="checkbox" value="1" />

<label class="choice" for="close_1">Yes</label>

<input id="close_2" name="close_2" class="element checkbox" type="checkbox" value="1" />

<label class="choice" for="close_2">No</label>

</span> 
</li>
<li id = "li_8">
<label class="description" for="notes"> Generate Notes  </label>
<input type="checkbox" name="notes_gen" onclick="FillNotes(this.form)">
<em>Check this box to generate notes.</em>
<div>
<textarea id="notes" name="notes" class="element textarea medium"></textarea> 
</div>


<li class="buttons">

<input type="hidden" name="form_id" value="6865" />


<input id="clearForm" class="button_text" type="reset" name="Clear" value="Clear" />

</li>

</ul>

</form> 

<div id="footer">
        <a>Created by David Desilets Associate SSC 1</a>


</div>

</div>

<img id="bottom" src="bottom.png" alt="">

</body>

</html>

Предоставлен код Javascript

function FillNotes(f) {
  if(f.notes.checked == true) {
    f.notes.value = f.cust_name.value;
    f.notes.value = f.call_reason.value;
    f.notes.value = f.tailored_solution.value;
    f.notes.value = f.set_expectations.value;
    f.notes.value = f.set_expectations_discount.value;
    f.notes.value = f.set_expectations_refund.value;
    f.notes.value = f.set_expectations_replacement.value;
    f.notes.value = f.set_expectations_return.value;
    f.notes.value = f.close.value;
    f.notes.value = f.close_1.value;
    f.notes.value = f.close_2.value;
  }
}

Теперь я хочу скопировать содержимое каждого флажка и текстовой области, кроме последнего текстового поля, куда я хочу вставить его, и добавить разделитель между каждой записью, как |или /

Во-первых, что я делаю не так, во-вторых, мой JS в лучшем случае неудовлетворительный.Кто-нибудь захочет мне помочь?

PS кнопка отправки была заменена на кнопку сброса, поскольку она предназначена для замены «заметок» на работе, чтобы мы могли запретить доступ к заметкам на компьютерах агентов.

Answer 1

Когда вы присваиваете значение элемента с помощью =, как и при любой другой операции присваивания, предыдущее значение больше не связано со свойством;это исчезнет.Вместо этого вы должны либо объединить , чтобы строки были соединены вместе, чем непрерывно заменять друг друга:

function FillNotes(f) {
  if(f.notes.checked == true) {
    f.notes.value = f.cust_name.value;
    f.notes.value += f.call_reason.value;
    f.notes.value += f.tailored_solution.value;
    f.notes.value += f.set_expectations.value;
    f.notes.value += f.set_expectations_discount.value;
    f.notes.value += f.set_expectations_refund.value;
    f.notes.value += f.set_expectations_replacement.value;
    f.notes.value += f.set_expectations_return.value;
    f.notes.value += f.close.value;
    f.notes.value += f.close_1.value;
    f.notes.value += f.close_2.value;
  }
}

Или было бы намного лучше, если бы вы придумалиодна строка для начала, и затем присвоили эту строку f.notes.value:

function FillNotes(f) {
  if(f.notes.checked !== true) return;
  const props = [
    'cust_name',
    'call_reason',
    'tailored_solution',
    'set_expectations',
    'set_expectations_discount',
    'set_expectations_refund',
    'set_expectations_replacement',
    'set_expectations_return',
    'close',
    'close_1',
    'close_2',
  ];
  const newValue = props.reduce((strSoFar, prop) => strSoFar + f[prop].value + '\n', '')
  f.notes.value = newValue;
}