Develop Reference

How to split one field in two and submit as one

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 class="smalltext"><label for="username">{$lang->username}</label></span></td>
</tr>
<tr>
<td colspan="2"><input type="text" class="textbox" 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']}" class="tborder">
<tr>
<td class="thead" colspan="2"><strong>{$lang->registration}</strong></td>
</tr>
<tr>
<td width="50%" class="trow1" valign="top">
<fieldset class="trow2">
<legend><strong>{$lang->account_details}</strong></legend>
<table cellspacing="0" cellpadding="{$theme['tablespace']}" width="100%">
<tr>
<td colspan="2"><span class="smalltext"><label for="fullname">{$lang->fullname}</label></span></td>
</tr>
<tr>
<td colspan="2"><input type="text" class="textbox" name="fullname" id="fullname" style="width: 100%" value="fullname" /></td>
</tr>
{$passboxes}
<tr>
<td><span class="smalltext"><label for="email">{$lang->email}</label></span></td>
<td><span class="smalltext"><label for="email2">{$lang->confirm_email}</label></span></td>
</tr>
<tr>
<td><input type="text" class="textbox" name="email" id="email" style="width: 100%" maxlength="50" value="{$email}" /></td>
<td><input type="text" class="textbox" name="email2" id="email2" style="width: 100%" maxlength="50" value="{$email2}" /></td>
</tr>
<tr>
<td colspan="2" style="display: none;" id="email_status"> </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" class="button" name="regsubmit" value="{$lang->submit_registration}" />
</div>
</form>```

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.

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>

Javascript Web Crawler Confirm Confirmation box

I am trying to confirm a confirmation box in Javascript for a school project. The confirmation box comes up asking if you want to submit, and I would like to submit programmatically. Here is the HTML for the form:
<form action="https://weekend.lps.wels.net/lpswp/index.php" method="post" id="form_wp_entry" onsubmit="return lpswp_confirm_submission('3,4','Friday,Saturday','Sunday')" style="display: inline;">
<table class="em_table" width="100%" style="margin-bottom: 5px;">
<tbody><tr>
<th align="left" id="lpswp_night_label_title_3">
Friday
</th>
</tr>
<tr>
<td>
Location: <input type="radio" name="lpswp_nights[3][location]" id="lpswp_nights_location_dorm_3" value="dorm" checked="checked" onclick="lpswp_toggle_location(3)"> <label for="lpswp_nights_location_dorm_3">Dorm</label> |
<input type="radio" name="lpswp_nights[3][location]" id="lpswp_nights_location_home_3" value="home" onclick="lpswp_toggle_location(3)"> <label for="lpswp_nights_location_home_3">Home</label><br>
<input type="radio" name="lpswp_nights[3][location]" id="lpswp_nights_location_other_3" value="other" onclick="lpswp_toggle_location(3)"> <label for="lpswp_nights_location_other_3" id="lpswp_night_label_text_3">Other</label>:
<input type="text" size="60" name="lpswp_nights[3][other]" id="lpswp_nights_other_3"><br>
Phone Number (if known): <input type="text" size="20" name="lpswp_nights[3][phone]" id="lpswp_nights_phone_3"> (999-999-9999)
</td>
</tr>
<tr>
<th align="left" id="lpswp_night_label_title_4">
Saturday
</th>
</tr>
<tr>
<td>
<input type="checkbox" name="lpswp_nights[4][same]" id="lpswp_nights_same_4" value="1" checked="checked" onclick="lpswp_toggle_same(4)"> <label for="lpswp_nights_same_%temp_night%">Same as Friday night.</label><br>
Location: <input disabled="disabled" type="radio" name="lpswp_nights[4][location]" id="lpswp_nights_location_dorm_4" value="dorm" checked="checked" onclick="lpswp_toggle_location(4)"> <label for="lpswp_nights_location_dorm_4">Dorm</label> |
<input disabled="disabled" type="radio" name="lpswp_nights[4][location]" id="lpswp_nights_location_home_4" value="home" onclick="lpswp_toggle_location(4)"> <label for="lpswp_nights_location_home_4">Home</label><br>
<input disabled="disabled" type="radio" name="lpswp_nights[4][location]" id="lpswp_nights_location_other_4" value="other" onclick="lpswp_toggle_location(4)"> <label for="lpswp_nights_location_other_4" id="lpswp_night_label_text_4">Other</label>:
<input disabled="disabled" type="text" size="60" name="lpswp_nights[4][other]" id="lpswp_nights_other_4"><br>
Phone Number (if known): <input disabled="disabled" type="text" size="20" name="lpswp_nights[4][phone]" id="lpswp_nights_phone_4"> (999-999-9999)
</td>
</tr>
<tr>
<th align="left" id="lpswp_final_dinner_label_title">
Sunday Dinner
</th>
</tr>
<tr>
<td id="lpswp_final_dinner_label_text" style="border: 0px;">
I WILL be eating in the cafeteria: <input type="radio" name="lpswp_final_dinner" id="lpswp_final_dinner_1" value="1"><br>
I will NOT be eating in the cafeteria: <input type="radio" name="lpswp_final_dinner" id="lpswp_final_dinner_0" value="0"><br>
<input type="hidden" name="lpswp_final_dinner_night" value="5">
</td>
</tr>
</tbody></table>
<input type="submit" value="Submit Weekend Plans">
<!--input type="reset" value="Cancel" /-->
</form>
Here is my current code that does not do anything to the confirmation box:
mWebView.loadUrl("javascript:(function(){" +
"document.getElementById('form_wp_entry').setAttribute('onsubmit','return true;');" +
";})()");
Please help me, I am new to javascript... and coding in general.

You're looking for .submit().Note that this won't trigger any functionality that's hooked up to the onsubmit of the form:
function output() {
console.log('Submitted');
return false;
}
// Forcibly submit the form
function customSubmit() {
document.getElementsByTagName('form')[0].submit();
}
<form name="a_form" onsubmit="return output()">
<button type="submit">Submit</button>
</form>
<br />
<button onclick="customSubmit()">Submit Programmatically</button>
Hope this helps!

dynamically created elements not appearing on submission

I have code which will dynamically create elements which works great.
But I have two forms on my page .. one to load an image and the other to input data which is ordered as follows
<form name=image>
</form>
<form name=data>
<div id="p_scents">
JavaScript elements are inserted here
</div>
</form>
Now if I have the image form and I submit the form, the javascript created elements are not submitted and do NOT appear in _POST.
But without the image form, these javascript created elements do appear in _POST
Any reason why?
See code below...
<table border=1 cellpadding="1" cellspacing="0" width=80%>
<tr>
<td>
Select image for new banner
</td>
<td>
<form method="post" action="/index.php/dashboard/create/" enctype="multipart/form-data" name=LoadImage>
<input type="file" name="image"/>
<input type="submit" value="upload"/>
</form>
</td>
</tr>
<tr><td colspan=2 align=center>
<form action="index.php/create" method="post" accept-charset="utf-8" name="CreateBanner">
Add Another Input Box
</td>
</tr>
<tr><td>
Give your banner a unique name</td>
<td>
<input type="text" name="name" value="" id="name" autofocus /></td></tr>
<tr><td>Specify email address or domain to brand</td>
<td>
<input type="text" name="domainName" value="" id="domain" /></td></tr>
<tr><td>Status</td>
<td>
<select name="status">
<option value="enabled">Enabled</option>
<option value="disabled">Disabled</option>
</select>
</td></tr>
<tr><td>Give you banner a default URL</td>
<td>
<input type="text" name="url" value="" id="url" /></td></tr>
<tr><td valign=top>Alternate Urls
</td>
<td>
<div id="p_scents">
</div>
<input type=submit>
</form>
</td>
</tr>
</table>

Replacement for action of 2 forms with one anchor tag

I am a noob when it comes to HTML. I have a HTML template. In this template, I am trying to replace two form tags with a tag. Both form have different action defined. I need an a tag equivalent of performing the same actions what the two forms performed.
Here is my HTML code:
<form target="_top" action="###URL###/spg/proxy" method="POST"></form>
<form method="POST" action="###S_URL###" target="_top">
<td class="buttonbg" colspan="2">
<input name=rurl type=HIDDEN value="###URL###">
<input name=udata type=HIDDEN value="###URLDATA###">
<input type="submit" class="buttoned unhighlight" value="###PROXY_VIEW_UNPROXIED###" style="*padding:0 4px;" name="###PROXY_VIEW_UNPROXIED###" />
</td>
</form>
finally I desire like this:
<td class="buttonbg" colspan="2">
<a href="**CODE**" onClick="**CODE**" >
<input name=rurl type=HIDDEN value="###URL###">
<input name=udata type=HIDDEN value="###URLDATA###">
<input type="submit" class="buttoned unhighlight" value="###PROXY_VIEW_UNPROXIED###" style="*padding:0 4px;" name="###PROXY_VIEW_UNPROXIED###" /></a>
</td>
I googled and found solutions saying that "Add two Javascript functions func1 and func2. Now call func2 in func1. Set func1 as onClick event in a tag."
But I am considering this as a last option, is there any better way of doing this?
EDIT:
If you want to see whole of my HTML code here:
<div id='results_header'>
<form action="###CGIBASE###/search" autocomplete="off" method="POST" name="blah1" id="search_form" onSubmit="return verifyChecked(this);" target="_parent">
<table cellspacing="0" cellpadding="0" border="0" >
<tr>
<td id='input_p'>
<input type=hidden name=cmd value="process_search">
<input type=hidden name=language value="###LANGUAGE###">
<input type=hidden name=enginecount value="1">
<input type=hidden name=pl value="">
<input type="hidden" name="abp" class='abp' value="-1" />
<input type=hidden name=ff value="">
<input type=hidden name=theme value="">
<input type=hidden id=flag_ac1 name=flag_ac value="0">
<input name="cat" type=hidden value="###CAT###">
<input type='text' autocomplete='off' name='query' id='query_top' value="###ESCAPEQUOTEDQUERY###" style="width:256px\9;" >
</td>
<td><input type='image' src='graphics/stp_search.gif' id='submit1' style="margin-left:0\9;"/></td>
<td class="mesg"><p style="visibility:hidden"></p></td>
<td>
<table border="0" cellspacing="0" cellpadding="0" class="buttonwrap">
<tr>
<td class="buttonbg"><a href="###HIGHLIGHTERBACKBUTTONREFERRER###" target="_top" onClick="return goback('###HIGHLIGHTERBACKBUTTONREFERRER###');" style="text-decoration: none;">
<input type="button" class="buttoned" value="###HIGHLIGHTERBACKBUTTON###" style="*padding:0 21px;"/ name="BACKBUTTON"></a>
</td>
</tr>
</table>
<span class="return_result_page">###HIGHLIGHTERBACKBUTTONDESC###</span></td>
<td width="25"><img src="graphics/spacer.gif" width="25" height="1"/></td>
<td>
<form style="margin:0; padding:0" target="_top" action="###SCRIPTURL###" method="POST">
<table border="0" cellspacing="0" cellpadding="0" class="buttonwrap">
<tr>
<form target="_top" action="###CGIBASE###/spg/proxy" method="POST"></form>
<form method=POST action="###SCRIPTURL###" target="_top">
<td class="buttonbg">
<input name=rurl type=HIDDEN value="###URL###">
<input name=udata type=HIDDEN value="###URLDATA###">
<input type="submit" class="buttoned unhighlight" value="###LINKUNHIGHLIGHTED###" style="*padding:0 4px;" name="submit" />
</td>
</tr>
</table></form>
<span class="return_result_page" style="*margin-top:-20px;">###VIEWUNHIGHLIGHTED###</span>
</td>
</tr>
</table>
</div>

Simple form validation

POST #1
How can I validate this simple form (checking for empty field strings)?
<p>Please select your Gift Certificate amount below. Please also enter your name and the Gift Certificate recipient's name. Once you click 'Buy Now' you will be sent to our Paypal site to complete the purchase.</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="sdsafsdafsadfdsafsdafsadfsadfsadfasdfsadfsdaf">
<table width="100%">
<tr>
<td width="130"><input type="hidden" name="on0" value="Amount"><p>Amount</p></td>
<td><select name="os0">
<option value="Option 1">$20.00</option>
<option value="Option 2">$50.00</option>
<option value="Option 3">$100.00</option>
</select></td>
</tr>
<tr>
<td><input type="hidden" name="on1" value="To:"><p>To (Full Name):</p></td>
<td><input type="text" name="os1" maxlength="60" size="30"></td>
</tr>
<tr>
<td><input type="hidden" name="on2" value="From:"><p>From (Full Name):</p></td>
<td><input type="text" name="os2" maxlength="60" size="30"></td>
</tr>
</table>
<table width="100%" style="margin-top: 10px;">
<tr>
<td><input type="hidden" name="currency_code" value="CAD">
<p><input type="image" src="BUTTON.jpg" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"></p>
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"></td>
<td align="right"><img src="../paypal_logo.jpg" alt="PayPal" /></td>
</tr>
</table>
</form>
POST #2
function validate_form()
{
valid = true;
if ( document.GiftForm.os1.value == "" )
{
alert ( "Please fill in the 'Your Name' box." );
valid = false;
}
return valid;
}
-=-=-=-= Form
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" method="GiftForm" onsubmit="validate_form( )">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="sdsafsdafsadfdsafsdafsadfsadfsadfasdfsadfsdaf">
<table width="100%">
<tr>
<td width="130"><input type="hidden" name="on0" value="Amount"><p>Amount</p></td>
<td><select name="os0">
<option value="Option 1">$20.00</option>
<option value="Option 2">$50.00</option>
<option value="Option 3">$100.00</option>
</select></td>
</tr>
<tr>
<td><input type="hidden" name="on1" value="To:"><p>To (Full Name):</p></td>
<td><input type="text" name="os1" maxlength="60" size="30"></td>
</tr>
<tr>
<td><input type="hidden" name="on2" value="From:"><p>From (Full Name):</p></td>
<td><input type="text" name="os2" maxlength="60" size="30"></td>
</tr>
</table>
<table width="100%" style="margin-top: 10px;">
<tr>
<td><input type="hidden" name="currency_code" value="CAD">
<p><input type="image" src="BUTTON.jpg" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"></p>
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"></td>
<td align="right"><img src="../paypal_logo.jpg" alt="PayPal" /></td>
</tr>
</table>
</form>

Is jQuery an option? There's a really nice Validation tool http://docs.jquery.com/Plugins/Validation

A couple of hints that should get you going.
Add a submit event handler:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="return validate()">
Give IDs to the input fields you want to get.
<input id="currency_code" type="hidden" name="currency_code" value="CAD">
Write the validation code, return false if you don't want to submit.
<script type="text/javascript">
function validate() {
var currencyCode = document.getElementById("currency_code");
var ok = currencyCode.value !== '';
return ok;
}
</script>

Give your form a name (GiftForm)
<script type="text/javascript">
function validate_form ( )
{
valid = true;
if ( document.GiftForm.os1.value == "" )
{
alert ( "Please fill in the 'Your Name' box." );
valid = false;
}
return valid;
}
</script>

Here is a simple tutorial along with demo and source code, I hope this works for you, all the best!
http://gonga.in/simple-javascript-form-validation/