How to split one field in two and submit as one-CodePudding

I have Full name in my form as one input box but I want to make it split in two input boxes

box1= First Name
box2= Last Name

and when submit button is pressed, the value is saved as box1 box2 in the same old full name data scheme in my mysql database.

Here is my current code.

<td colspan="2"><span ><label for="username">{$lang->username}</label></span></td>
</tr>
<tr>
<td colspan="2"><input type="text"  name="username" id="username" style="width: 100%" value="" /></td>
</tr>

and here is full page code

<form action="member.php" method="post" id="registration_form"><input type="text" style="visibility: hidden;" value="" name="regcheck1" /><input type="text" style="visibility: hidden;" value="true" name="regcheck2" />
{$regerrors}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" >
<tr>
<td  colspan="2"><strong>{$lang->registration}</strong></td>
</tr>
<tr>
<td width="50%"  valign="top">
<fieldset >
<legend><strong>{$lang->account_details}</strong></legend>
<table cellspacing="0" cellpadding="{$theme['tablespace']}" width="100%">
<tr>
<td colspan="2"><span ><label for="fullname">{$lang->fullname}</label></span></td>
</tr>
<tr>
<td colspan="2"><input type="text"  name="fullname" id="fullname" style="width: 100%" value="fullname" /></td>
</tr>
{$passboxes}
<tr>
<td><span ><label for="email">{$lang->email}</label></span></td>
<td><span ><label for="email2">{$lang->confirm_email}</label></span></td>
</tr>
<tr>
<td><input type="text"  name="email" id="email" style="width: 100%" maxlength="50" value="{$email}" /></td>
<td><input type="text"  name="email2" id="email2" style="width: 100%" maxlength="50" value="{$email2}" /></td>
</tr>
<tr>
    <td colspan="2" style="display: none;" id="email_status">&nbsp;</td>
</tr>
{$hiddencaptcha}
</table>
</fieldset>






<div align="center">
<input type="hidden" name="step" value="registration" />
<input type="hidden" name="action" value="do_register" />
<input type="submit"  name="regsubmit" value="{$lang->submit_registration}" />
</div>
</form>```

CodePudding user response：

You can concatenate the values in your php file and store them in your database column. I can explain it more in detail if you share your php file.

CodePudding user response：

I'm going to give you a frontend solution (because of the tags attached to the question), which could work if:

You just need a quick fix
This is a one-time problem
You know that this won't create complications in the future

Other than that, I highly recommend you do this in the backend.

The idea here is to create a hidden fullname input and use javascript to concatenate the first and last name.

const name = {
  firstName: '',
  lastName: ''
}

document.querySelector('[name="firstName"]').addEventListener('input', (e) => {
  name.firstName = e.target.value
  updateFullName()
})

document.querySelector('[name="lastName"]').addEventListener('input', (e) => {
  name.lastName = e.target.value
  updateFullName()
})

function updateFullName() {
  document.querySelector('[name="fullname"]').value = `${name.firstName} ${name.lastName}`
}

<form>
  <input type="text" name="firstName">
  <input type="text" name="lastName">
  <input type="hidden" name="fullname">
</form>