Spaces in optional form fields

Hi folks,

I have a form for collecting info for business cards.
Now I want mobile phone number and telephone extension number to be optional.
To make all business cards have the same “look” we have set rules for how to display mobile numbers (xxx xx xxx) and extension number (xx xx). This is done by two functions.
When someone fills out the form first time it inserts nothing to the database, but if they want to edit something the filled out form inserts 1 space in the extension field and 2 spaces in the mobile field.
I have tried many things to get rid of the spaces but nothing works.
Here is the two functions that splits the numbers (excerpt: it’s a quit long script):


	function fillMobil() {
		var mobil = '<?php echo $_POST["mob"]; ?>';
		document.getElementById("first_mob").value = mobil.substring(0, 3);
		document.getElementById("second_mob").value = mobil.substring(4, 6);
		document.getElementById("third_mob").value = mobil.substring(7, 10);
	}
	function fillTelefon() {
	var telefon ='<?php echo $_POST["tel"]; ?>';
		document.getElementById("first_tel").value = telefon.substring(0,2);
		document.getElementById("second_tel").value = telefon.substring(3,5);
	}

They are called in the form like this:


<body bgcolor="#ffffff" onLoad="SelectPos();SelectDep();SelectDep2();SelectPrintNumbers();fillMobil();fillTelefon();Selectphone();SelectAddress();SelectKplace();SelectKplace2();" >

How can I stop this function from splitting (nothing) and output 2 spaces for mobile and one space for extension (Telefon)?

Thanks for any help!

So this part of your PHP script is outputting javascript, yes? I don’t understand why you would be using the POST values to fill in default values of a form. Or why use javascript to do it.

I think it’s just too confusing without seeing more of what’s going on but if you view source, does that javascript show those variables as empty or with spaces?

Hi Robert,

Thanks for your reply.
When I view the source I can see the spaces in the value. For each time the form is edited it adds more spaces, also in the db.
Here is more of the script: This is when the form is edited.


<?php 
	} else if (($_POST["is_approved_or_edit"] == "edit") && (isset($_POST["name"]))) {
		
		$resultPos = @mysql_query("SELECT * FROM met_position where parentid=0");
		
?>
<script language="javascript">

	function SelectPos() {
		<?php 
		$index = 1;
		$resultPos=mysql_query("select id, name, en_name from met_pos ORDER BY name asc");
		while ($row = mysql_fetch_array($resultPos)) { 
if($row['name'] == 'Seksjonssjef') { $row['name'] .= " (".$row['en_name'].")"; }
	?>
       <!-- This is common in regardless of the result of the 'if' below  -->
        var option = document.createElement("option");
        option.text = "<?php echo $row['name']; ?>";
        option.value = "<?php echo $row['id']; ?>";
        document.drop_list.Pos.options.add(option);            
 
        if (<?php echo $row['id']; ?> == <?php echo $_POST['Pos']; ?>)
        {
            document.drop_list.Pos.options[<?php echo $index; ?>].selected = true;
        }		
	<?php $index = $index + 1;	}  ?>			
	}
	function SelectDep() {
		<?php 
		$index = 1;
		$resultDep=mysql_query("select id, name from met_dep where parentid=0 ORDER BY name asc");
		while ($row = mysql_fetch_array($resultDep)) { 
	?>
		if (<?php echo $row['id']; ?> == <?php echo $_POST['Dep']; ?>)
		{
			var option = document.createElement("option");
			option.text = "<?php echo $row['name']; ?>";
			option.value = "<?php echo $row['id']; ?>";
			document.drop_list.Dep.options.add(option);			
			document.drop_list.Dep.options[<?php echo $index; ?>].selected = true;
		} else { 
			var option = document.createElement("option");
			option.text = "<?php echo $row['name']; ?>";
			option.value = "<?php echo $row['id']; ?>";
			document.drop_list.Dep.options.add(option);
		}
	<?php $index = $index + 1;	}  ?>			
	}
	function SelectDep2() {
		removeAllOptions(document.drop_list.SubDep);
		addOption(document.drop_list.SubDep, "", "Velg avdeling");
		<?php
		$index = 1;
		$q2=mysql_query("select id, name from met_dep where parentid = '".$_POST["Dep"]."' ORDER BY name");
		while($row = mysql_fetch_array($q2)) { ?>
			if (<?php echo $row['id']; ?> == <?php echo $_POST['SubDep']; ?>)
			{
				var option = document.createElement("option");
				option.text = "<?php echo $row['name']; ?>";
				option.value = "<?php echo $row['id']; ?>";
				document.drop_list.SubDep.options.add(option);				
				document.drop_list.SubDep.options[<?php echo $index; ?>].selected = true;
			} else { 
				var option = document.createElement("option");
				option.text = "<?php echo $row['name']; ?>";
				option.value = "<?php echo $row['id']; ?>";
				document.drop_list.SubDep.options.add(option);
			}	
		<?php $index = $index + 1; } ?>
	}

	function SelectAddress() {
		<?php 
		$index = 1;
		$resultAddr=mysql_query("select id, name from met_addresses where parentid=0");
		while ($row = mysql_fetch_array($resultAddr)) { 
	?>
		if (<?php echo $row['id']; ?> == <?php echo $_POST['Address']; ?>)
		{
			var option = document.createElement("option");
			option.text = "<?php echo $row['name']; ?>";
			option.value = "<?php echo $row['id']; ?>";
			document.drop_list.Address.options.add(option);			
			document.drop_list.Address.options[<?php echo $index; ?>].selected = true;
		} else {	 
			var option = document.createElement("option");
			option.text = "<?php echo $row['name']; ?>";
			option.value = "<?php echo $row['id']; ?>";
			document.drop_list.Address.options.add(option);
		}
	<?php $index = $index + 1;	}  ?>		
	}
	function Selectphone() {
		<?php 
		$index = 1;
		$resultPho=mysql_query("select id, name from met_phone where parentid=0");
		while ($row = mysql_fetch_array($resultPho)) { 
	?>
		if (<?php echo $row['id']; ?> == <?php echo $_POST['phone']; ?>)
		{
			var option = document.createElement("option");
			option.text = "<?php echo $row['name']; ?>";
			option.value = "<?php echo $row['id']; ?>";
			document.drop_list.phone.options.add(option);			
			document.drop_list.phone.options[<?php echo $index; ?>].selected = true;
		} else {	 
			var option = document.createElement("option");
			option.text = "<?php echo $row['name']; ?>";
			option.value = "<?php echo $row['id']; ?>";
			document.drop_list.phone.options.add(option);
		}
	<?php $index = $index + 1;	}  ?>		
	}
	function SelectKplace() {
		<?php 
		$index = 1;
		$resultkplace=mysql_query("select id, name from met_kplace where parentid=0 ORDER BY name asc");
		while ($row = mysql_fetch_array($resultkplace)) { 
	?>
		if (<?php echo $row['id']; ?> == <?php echo $_POST['Kplace']; ?>)
		{
			var option = document.createElement("option");
			option.text = "<?php echo $row['name']; ?>";
			option.value = "<?php echo $row['id']; ?>";
			document.drop_list.Kplace.options.add(option);			
			document.drop_list.Kplace.options[<?php echo $index; ?>].selected = true;
		} else { 
			var option = document.createElement("option");
			option.text = "<?php echo $row['name']; ?>";
			option.value = "<?php echo $row['id']; ?>";
			document.drop_list.Kplace.options.add(option);
		}
	<?php $index = $index + 1;	}  ?>			
	}
	function SelectKplace2() {
		removeAllOptions(document.drop_list.SubKplace);
		addOption(document.drop_list.SubKplace, "", "Velg kostnadssted");
		<?php
		$index = 1;
		$subk=mysql_query("select id, name from met_kplace where parentid = '".$_POST["Kplace"]."' ORDER BY name");
		while($row = mysql_fetch_array($subk)) { ?>
			if (<?php echo $row['id']; ?> == <?php echo $_POST['SubKplace']; ?>)
			{
				var option = document.createElement("option");
				option.text = "<?php echo $row['name']; ?>";
				option.value = "<?php echo $row['id']; ?>";
				document.drop_list.SubKplace.options.add(option);				
				document.drop_list.SubKplace.options[<?php echo $index; ?>].selected = true;
			} else { 
				var option = document.createElement("option");
				option.text = "<?php echo $row['name']; ?>";
				option.value = "<?php echo $row['id']; ?>";
				document.drop_list.SubKplace.options.add(option);
			}	
		<?php $index = $index + 1; } ?>
	}
	function SelectPrintNumbers() {
		var _opplag = document.getElementById("opplag");
		for (var i = 0; i < _opplag.length; i++)
		{
			if (_opplag.options[i].value == <?php echo $_POST["opplag"]; ?>)
			{
				_opplag.options[i].selected = true;
			}
		}
	}
	function fillMobil() {
		var mobil = '<?php echo $_POST["mob"]; ?>';
		document.getElementById("first_mob").value = mobil.substring(0, 3);
		document.getElementById("second_mob").value = mobil.substring(4, 6);
		document.getElementById("third_mob").value = mobil.substring(7, 10);
	}
	function fillTelefon() { 
	var telefon ='<?php echo $_POST["tel"]; ?>';
		document.getElementById("first_tel").value = telefon.substring(0,2);
		document.getElementById("second_tel").value = telefon.substring(3,5);
	}
</script>
<body bgcolor="#ffffff" onLoad="SelectPos();SelectDep();SelectDep2();SelectPrintNumbers();fillMobil();fillTelefon();Selectphone();SelectAddress();SelectKplace();SelectKplace2();" >

<div id="stylized" class="myform">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="drop_list" onsubmit="return CheckTheForm();">
<input type="hidden" name="idValue" id="idValue" value="<?php echo $idValue; ?>"/>
<input type="hidden" name="is_approved_or_edit" id="is_approved_or_edit" value="update" />
<div id="logotop">
<div style="float:left;margin-right:50px;"><img src="images/logo.png" height="40" /></div>
<div style="width:450px;text-align:left;float:left;"><h1>Bestilling av visittkort</h1>
<h3>Felter merket med <span style="color:red;">*</span> må fylles ut. Engelsk innhold kommer opp automatisk.</h3>
</div>
</div><!--logotop-->
<div id="ctable">
	<table cellspacing="0" cellpadding="0" border="0">
		<tr><td></td><td class="error_msg" id="error_msg_name" name="error_msg_name" align="left"></td></tr>
		<tr>
			<td valign="top"><label for="name">Navn <span style="color:red;">*</span></label></td>
			<td><input type="text" class="longTextBox" name="name" id="name" value="<?php echo $_POST['name']; ?>"/></td>
		</tr>
		<tr><td></td><td class="error_msg" id="error_msg_position" name="error_msg_position" align="left"></td></tr>
		<tr>
			<td valign="top"><label>Stilling <span style="color:red;">*</span></label></td>
			<td>
				<SELECT  NAME="Pos" id="Pos" >
					<Option value="">Arbeidstittel</option>
				</SELECT>&nbsp;
			</td>
		</tr>
		<tr><td></td><td class="error_msg" id="error_msg_department" name="error_msg_department" align="left"></td></tr>
		<tr>
			<td valign="top"><label>Divisjon <span style="color:red;">*</span></label></td>
			<td>
				<SELECT  NAME="Dep" id="Dep" onChange="SelectSubDep();SelectSubDep2();" >
					<Option value="">Velg divisjon</option>
				</SELECT>&nbsp;
			</td>
		</tr>
		<tr><td></td><td class="error_msg" id="error_msg_sub_division" name="error_msg_sub_division" align="left"></td></tr>
		<tr>
			<td valign="top"><label>Avdeling <span style="color:red;">*</span></label></td>
			<td>
				<SELECT id="SubDep" NAME="SubDep">
					<Option value=""></option>
				</SELECT>
			</td>
		</tr>
		<tr><td></td><td class="error_msg" id="error_msg_telefon" name="error_msg_telefon" align="left"></td></tr>
		<tr>
			<td valign="top"><label>Telefon<span style="color:red;">*</span> + innvalg <span class="small" style="color:#000;">Maks fire siffer</span></label></td>
			<td>
				<SELECT id="phone" NAME="phone" class="phone">
					<Option value="">Velg telefon</option>
				</SELECT>
<span class="tlf" style="float:left;">/</span><input type="hidden" name="tel" id="tel" maxlength="4" size="4" value="<?php echo $_POST['tel']; ?>"/><input type="text" class="mobTextBox" name="first_tel" id="first_tel" maxlength="2" size="1"/><input type="text" class="mobTextBox" name="second_tel" id="second_tel" maxlength="2" size="1"/></td>
		</tr>
		<tr><td></td><td class="error_msg" id="error_msg_mobil" name="error_msg_mobil" align="left"></td></tr>
		<tr>
			<td valign="top"><label>Mobilnummer <span style="color:red;">*</span><span class="small" style="color:#000;">Maks åtte siffer<br /> Landskode legges inn automatisk</span></label></td>
			<td>
<input type="hidden" name="mob" id="mob" maxlength="8" size="8" value="<?php echo $_POST['mob']; ?>"/>
				<input type="text" class="mobTextBox" name="first_mob" id="first_mob" maxlength="3" size="3"/><input type="text" class="mobTextBox" name="second_mob" id="second_mob" maxlength="2" size="2"/><input type="text" class="mobTextBox" name="third_mob" id="third_mob" maxlength="3" size="3"/>
			</td>
		</tr>
		<tr><td></td><td class="error_msg" id="error_msg_email" name="error_msg_email" align="left"></td></tr>
		<tr>
			<td valign="top"><label>E-post <span style="color:red;">*</span><span class="small" style="color:#000;">Maks 26 tegn</span></label></td>
			<td width="10"><input class="mail" maxlength="26" type="text" name="email" id="email" value="<?php echo $_POST['email']; ?>"/><span class="tlf">@eksempel.no</span></td>
		</tr>
	</table>

	<fieldset>

		<legend>Annet:</legend>
		<table cellspacing="0" cellpadding="0" border="0">
			<tr><td></td><td id="error_msg_print_numbers" name="error_msg_print_numbers" align="left" class="error_msg"></td></tr>
			<tr>
				<td valign="top"><label >Antall visittkort <span style="color:red;">*</span></label></td>
				<td>
					<select name="opplag" id="opplag" >
						<option value="100">100</option>
					</select>
				</td>
			</tr>
		<tr><td></td><td class="error_msg" id="error_msg_kplace" name="error_msg_kplace" align="left"></td></tr>
		<tr>
			<td valign="top"><label>Kostnadssted <span style="color:red;">*</span></label></td>
			<td>
				<SELECT id="Kplace" NAME="Kplace" onChange="SelectSubKplace();SelectSubKplace2();" >
					<Option value="">Velg kostnadssted</option>
				</SELECT>&nbsp;
			</td>
		</tr>
		<tr><td></td><td class="error_msg" id="error_msg_sub_kplace" name="error_msg_sub_kplace" align="left"></td></tr>
		<tr>
			<td valign="top"><label>Kostnadssted 2<span style="color:red;">*</span></label></td>
			<td>
				<SELECT id="SubKplace" NAME="SubKplace">
					<Option value=""></option>
				</SELECT>
			</td>
		</tr>
		<tr><td></td><td class="error_msg" id="error_msg_address" name="error_msg_address" align="left"></td></tr>
		<tr>
			<td valign="top"><label>Leveringsadresse <span style="color:red;">*</span></label></td>
			<td>
				<SELECT  id="Address" NAME="Address" >
					<Option value="">Leveringsadresse</option>
				</SELECT>&nbsp;
			</td>
		</tr>
		</table>
	</fieldset>

	<button type="submit">Fortsett til korrektur og godkjenning</button>
</div><!--ctable-->
	<div class="spacer"></div>

 </form>
 </div>


This should take care of what you’re seeing with the spaces.


    function fillMobil() {
        var mobil = '<?php echo trim( $_POST["mob"] ); ?>';
        document.getElementById("first_mob").value = mobil.substring(0, 3);
        document.getElementById("second_mob").value = mobil.substring(4, 6);
        document.getElementById("third_mob").value = mobil.substring(7, 10);
    }
    function fillTelefon() {
    var telefon ='<?php echo trim( $_POST["tel"] ); ?>';
        document.getElementById("first_tel").value = telefon.substring(0,2);
        document.getElementById("second_tel").value = telefon.substring(3,5);
    }

I just added trim() to those two echo statements. This removes any spaces at the ends of the value.

I still don’t understand why it’s being done the way it is - with the javascript and POST as I mentioned before - but if all that is working and is good, this should get you what you’re looking for.