sameer manek sameer manek - 6 months ago 9
PHP Question

javascript function to insert values from content-editable span to a hidden form

I am trying to fetch values from editable spans for hidden form to a hidden form via this javascript:

<script type="text/javascript">
function fillup() {
document.getElementById('fname').value = document.getElementById('nfname').innerHTML;
document.getElementById('mname').value = document.getElementById('nmname').innerHTML;
document.getElementById('lname').value = document.getElementById('nlname').innerHTML;
document.getElementById('email').value = document.getElementById('nemail').innerHTML;
document.getElementById('gen').value = document.getElementById('ngen').innerHTML;
document.getElementById('dob').value = document.getElementById('ndob').innerHTML;
var str = document.getElementById('nloc').innerHTML;
var parts = str.split(',');
document.getElementById('city').value = parts[0];
document.getElementById('state').value = parts[1];
if(document.getElementById('fname').value == '' || document.getElementById('mname').value == '' || document.getElementById('lname').value == '' || document.getElementById('email').value == '' || document.getElementById('gen').value == '' || document.getElementById('dob').value == '' || document.getElementById('city').value == '' || document.getElementById('state') == '' ){
alert('something is empty!');
else {

and following is the form:

<form method="post" action="{{ path('admin_update') }}">
<div class="hidden">
<input type="text" id="fname" name="fname" />
<input type="text" id="mname" name="mname" />
<input type="text" id="lname" name="lname" />
<input type="email" id="mail" name="email" />
<input type="text" id="gen" name="gen" />
<input type="text" id="dob" name="dob" />
<input type="text" id="city" name="city" />
<input type="text" id="state" name="state" />
<input type="submit" id="btn" value="save changes" onclick="fillup()" />

as said earlier, except the submit button other textareas are disabled in the form, the spans are:

<div class="row">
<div class="fname">
<span class="fname" id="nfname" contenteditable="true" onchange="appear()">{{ fname }}</span>
<hr />
<span class="st">First name</span>
<div class="mname">
<span class="mname" id="nmname" contenteditable="true" onchange="appear()">{{ mname }}</span>
<hr />
<span class="st">Middle name</span>
<div class="lname">
<span class="lname" id="nlname" contenteditable="true" onchange="appear()">{{ lname }}</span>
<hr />
<span class="st">Last name</span>
<div class="row">
<div class="email">
<span class="email" id="nemail" contenteditable="true">{{ email }}</span>
<hr />
<span class="st">Email</span>
<div class="row">
<div class="gender">
<span class="gender" id="ngen" contenteditable="true">{{ gen }}</span>
<hr />
<span class="st">Gender</span>
<div class="DOB">
<span class="DOB" id="ndob" contenteditable="true" id="datepicker">{{ dob|date("m/d/Y") }}</span>
<hr />
<span class="st">Date of birth</span>
<div class="loc">
<span class="loc" id="nloc" contenteditable="false">{{ loc }}</span>
<hr />
<span class="st">Location</span>


I've put your code into a plunkr

To me it looks ok - and it definitly works, as far as I understand your requirement. I would suggest to bind the function call "fillup()" to the onSubmit event of the form.

<form method="post" action="." onSubmit="fillup()">

Also please check for this line in the function:

document.getElementById('email').value = document.getElementById('nemail').innerHTML;

The element's id is NOT "email" - it is "mail"