• 0

[Javascript] Combine 2 form fields into one.


Question

I've got a credit card form and on submission it requires that the expiry date is submitted from a single string as mmyy. Instead, the form is mm and yy in separate submission boxes.

I figured it would be possible to take the two value's and combine them by sitcking them into a hidden field.

I found a script online and due to my very limited knowledge of javascript I wouldn't actually know what to do with this and it looks looks somewhat incomplete:

  Quote

<script language=javascript>

funtion populate(){

Fname = document.form1.FirstName.value;

Lname = document.form1.LastName.value;

document.form1.CONTACT.value = Fname + " " + Lname;

}

</Script>

Then call the function with onchange on your lastname field <input ID="LastName" value="" onChange="populate()"

I'm completely full of cold at the moment so my brains not firing on all thrusters.

Would this require any library like jquery to work?

If there's a way to do this without javascript that would be even better. Thing is as the forms being submitted via a thirdparty api I don't have the luxury of combining them via PHP at form submission.

Appreciate any help.

Many thanks.

Alex

8 answers to this question

Recommended Posts

  • 0

No, it's simple.

<script type="text/javascript">
function join_ym()
{
var yy = document.getElementById('yy').value;
var mm = document.getElementById('mm').value;
document.getElementById('joint').value = yy+mm;
alert(document.getElementById('joint').value);
}
</script>

<input type="text" id="yy" />
<input type="text" id="mm" />
<input type="hidden" id="joint">
<input type="button" value="Join!" onclick="join_ym();">[/CODE]

Edit:

Time to explain. First we have a form with an id called 'yy'. We get its value through the [b]document.getElementById('id_name').value[/b] javascript function. Replace id_name with the id of the text input.

We do the same for mm. We get its value through the document.getElementById('mm').value, whereas mm is the text input's id.

We then assign the value to the hidden form, which I called [u][b]joint [/b][/u] through the same procedure as I took the other two's (mm and yy) value.

We do this again with the [b]document.getElementById('joint').value = [/b]function and operator, whereas joint is the id of hidden form.

For concatenating strings, I used the [b]+[/b] operator. Which joined the yy and mm variables together, forming a new string.

At the end, I used alert, to throw at screen what is the value of [b]joint, [/b]my hidden form.

I hope I've been clear, anything else just ask.

Edit #2. Since you seem to have PHP knowledge, the [b]+[/b] operator is analog to the [b].[/b] (dot) in PHP

  • 0

Thanks for this! I'm not at home right now so will implement this in the morning.

Would adding the function to the onclick operator on the submit button ensure that the appropriate hidden field was populated prior to the form being submitted? Or would it be best to have the relevant field updated as and when those fields are filled out?

Again, many thanks!

  • 0

Here you go:


<html>
<head>
</head>
<body>
<form action="" method="get">
<input type="text" name="name_first" placeholder="First Name" oninput="join_names();" onpaste="join_names();" /><br />
<input type="text" name="name_last" placeholder="Last Name" oninput="join_names();" onpaste="join_names();" /><br />
<input type="text" name="name_full" placeholder="Full Name" /><br />
<input type="submit" onclick="join_names();" />
</form>
<script type="text/javascript">
function concatenate(/*String*/string_one, /*String*/string_two, /*boolean*/with_space) {
if (with_space===true) {
return string_one+' '+string_two;
}
else {
return string_one+string_two;
}
}
function join_names() {
var input_name_first = document.getElementsByName('name_first')[0].value;
var input_name_last = document.getElementsByName('name_last')[0].value;
var input_name_full = document.getElementsByName('name_full')[0];
var var_name_full = concatenate(input_name_first, input_name_last, true);
input_name_full.value = var_name_full;
}
</script>
</body>
</html>
[/CODE]

This will not only update the code with every key they press, but also eliminates the need for ids for your elements if you don't want them. This works solely off of the name attribute of your inputs which is a bit cleaner and more useful if you are styling your inputs similarly (using classes instead of ids). Also, I added the ability to concatenate the strings with or without a space, and made it cross browser compatible. Hopefully you find this useful!

Also, if you plan on using a textarea, change the oninput attribute to textInput. :)

  • 0

Thanks fellas.

I combined elements from both methods to a nice simple scripts which seemingly does what I wanted. I based it mostly off Jose_49's method because it seemed simpler for me to achieve but if I've overlooked something please let me know:

&lt;input id="expiry" type="hidden" name="field18317078" value="" /&gt;


&lt;input id="month" class="tiny" placeholder="mm" type="text" oninput="join_expiry();" onpaste="join_expiry();"&gt;
&lt;input id="year" class="tiny" placeholder="yy" type="text" oninput="join_expiry();" onpaste="join_expiry();"&gt;


&lt;script type="text/javascript"&gt;
function join_expiry()
{
var mm = document.getElementById('month').value;
var yy = document.getElementById('year').value;
document.getElementById('expiry').value = mm+yy;
}
&lt;/script&gt;

  • 0
  On 29/01/2013 at 11:10, Axel said:

Thanks fellas.

I combined elements from both methods to a nice simple scripts which seemingly does what I wanted. I based it mostly off Jose_49's method because it seemed simpler for me to achieve but if I've overlooked something please let me know:

&lt;input id="expiry" type="hidden" name="field18317078" value="" /&gt;


&lt;input id="month" class="tiny" placeholder="mm" type="text" oninput="join_expiry();" onpaste="join_expiry();"&gt;
&lt;input id="year" class="tiny" placeholder="yy" type="text" oninput="join_expiry();" onpaste="join_expiry();"&gt;


&lt;script type="text/javascript"&gt;
function join_expiry()
{
var mm = document.getElementById('month').value;
var yy = document.getElementById('year').value;
document.getElementById('expiry').value = mm+yy;
}
&lt;/script&gt;

No probs.

Be careful with the oninput, placeholder methods. They are HTML5 and only modern browsers support it.

  • Like 2
  • 0
  On 29/01/2013 at 11:52, Jose_49 said:

No probs.

Be careful with the oninput, placeholder methods. They are HTML5 and only modern browsers support it.

  On 29/01/2013 at 12:28, Axel said:

So I suppose it's best to add the function on submit too? Would "onclick" work with older browsers?

Well, the onpaste (which is not html5) has support accross IE, Firefox, Safari, and Chrome. The oninput is a more up-to-date method, and also adds support for Opera. By combining them, it is very unlikely that you will have any issues at all.

Thanks for pointing that out though. :)

  • 0

I have to say... THANK YOU!!!!!! Awesome how it worked like a charm to me! really THANK YOU!!!!!!!! i have implemented this into RsForm Pro with joomla! with a little variation to fit my forms.

My case was:
Create a user name field (one field of the form) based on two form field filled by the user, with a special caracter dividing the two captured field forms data.
Apart, the JS to do the trick of join two field into one, will be ran only if the user select to create the account selecting a checkbox field and if not nothign will be done.

<script type="text/javascript">
function copy(){
  //This is the check box option where i want if selected, the data to be copied to the form field "test"
if (document.getElementById("copy0").checked==true)
    
    {
var cupon = document.getElementById('cupon').value;
var celular = document.getElementById('celular').value;
//Agregue un signo '-' al resultado compilado y agregue un signo + al segundo valor.
document.getElementById('test').value = cupon+'-'+celular;
alert(document.getElementById('test').value);
    }
    //my checkbox got two options. So first one is "copy0" second one is "copy1" and if they choose secondone, no copy will be done.
    else if (document.getElementById("copy1").checked==true)
    
    {
    document.getElementById("cupon").value="";
    document.getElementById("celular").value="";
    }
    
}
</script>

XHTML 
<fieldset class="formFieldset">
<legend>{global:formtitle}</legend>
{error}
<!-- Do not remove this ID -->
<ol class="formContainer" id="Trend_{global:formid}_page_0">
	<li class="block-cupon">
		<div class="formCaption">{cupon:caption}<strong class="formRequired">(*)</strong></div>
		<div class="formBody">{cupon:body}<span class="formClr">{cupon:validation}</span></div>
		<div class="formDescription">{cupon:description}</div>
	</li>
	<li class="block-descphone">
		<div class="formCaption">{DescPhone:caption}</div>
		<div class="formBody">{DescPhone:body}<span class="formClr">{DescPhone:validation}</span></div>
		<div class="formDescription">{DescPhone:description}</div>
	</li>
	<li class="block-celular">
		<div class="formCaption">{celular:caption}<strong class="formRequired">(*)</strong></div>
		<div class="formBody">{celular:body}<span class="formClr">{celular:validation}</span></div>
		<div class="formDescription">{celular:description}</div>
	</li>
	<li class="block-email">
		<div class="formCaption">{email:caption}<strong class="formRequired">(*)</strong></div>
		<div class="formBody">{email:body}<span class="formClr">{email:validation}</span></div>
		<div class="formDescription">{email:description}</div>
	</li>
	<li class="block-test">
		<div class="formCaption">{test:caption}</div>
		<div class="formBody">{test:body}<span class="formClr">{test:validation}</span></div>
		<div class="formDescription">{test:description}</div>
	</li>
	<li class="block-copy">
		<div class="formCaption">{copy:caption}<strong class="formRequired">(*)</strong></div>
		<div class="formBody">{copy:body}<span class="formClr">{copy:validation}</span></div>
		<div class="formDescription">{copy:description}</div>
	</li>


</ol>
</fieldset>

Really thank you so much dude @Jose_49!

  Quote

what tipe of course do you suggest to learn more about this? Jose_49

Expand  

 

Edited by DavidDem
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • I'm wondering if they are doing this as a "backup" in case CISA ceases to exist. It almost did recently due to funding and it's future is shaky. CISA - https://www.cisa.gov/known-exploited-vulnerabilities-catalog Example "CVE-2023-39780" https://www.cve.org/CVERecord?id=CVE-2023-39780 ASUS RT-AX55 Routers OS Command Injection Vulnerability
    • Over regulation is bad. That's why the EU is behind the US. But, it's a good thing the EU stepped in, in this case.
    • Thanks to the EU, Windows 11 is now a little more tolerable.
    • Microsoft will finally stop shoving Edge down your throat, on one condition by David Uzondu Avid Windows users must be familiar with the dirty tactics Microsoft employs to push its Edge browser. It's a song as old as time; remember when Internet Explorer was primarily used as a tool to download Chrome or Firefox because it was the only thing available? Shortly after IE died, Edge inherited that legacy, becoming the browser you often had to use just to get the browser you actually wanted. Even Microsoft knows this: For years, we have endured the relentless pop-ups after updates, third parties being blocked from changing the default browser on Windows 11, banners appearing when you dare visit a competitor's download page, a fake "how to uninstall Edge" guide, and links within Windows apps that just had to open in Edge, regardless of your set preferences. Microsoft has announced it is dialing back some of this aggressive behavior, promising a reprieve from the constant Edge bombardment. But (and it's a pretty big but) this only applies if you're in the EEA. This shift isn't Microsoft suddenly having a profound change of heart and deciding to respect user choice out of the goodness of its heart. No, this is all thanks to the Digital Markets Act, a major EU rule that targets big online platforms, what they call "gatekeepers", because these companies have a huge impact on how the digital market works. So, what is actually changing for users in the EEA? For starters, Microsoft Edge will not prompt you to set it as the default browser unless you actually open it directly, like by clicking its icon on the taskbar. This specific change started rolling out with Edge version 137.0.3296.52. Other Microsoft apps will also stop bugging you to reinstall Edge if you dared to remove it, with updates for this rolling out in June to Windows 10 and 11. And speaking of default browsers, this is where a significant improvement lies. Previously, hitting "Set default" for your browser in Windows was half baked, only grabbing basic web links like http and https and HTML files. Now, if you're in the EEA, setting your default browser will also cover more obscure link types like ftp and "read," plus a wider array of web-related file formats such as .mht, .svg, .xml, and even .pdf files, provided your chosen browser says it can handle them. The Bing app and those Windows Widgets, which previously had a nasty habit of ignoring your browser choice, will also start opening web links in your default browser. Hallelujah. Users in the EEA will also gain the ability to uninstall the Microsoft Store entirely later this year, though apps previously installed from it will still receive updates. Windows Search is also getting an upgrade in the EEA. Right now, searching from the taskbar mostly just sends you to Bing, no matter what browser you use. But for users in the EEA, other apps will be able to plug into Windows Search and show web results too. If an app registers as a web search provider, it'll start working as soon as you install it. You'll also be able to see results from multiple providers in the search interface, not just Bing. The usual scoping tabs will still be there if you want to filter things, but the default view will be more varied. And yes, you'll even be able to reorder the providers in Settings. These changes are already in Windows Insider builds and are expected to roll out to Windows 10 and 11 in early June.
  • Recent Achievements

    • One Year In
      WaynesWorld earned a badge
      One Year In
    • First Post
      chriskinney317 earned a badge
      First Post
    • Week One Done
      Nullun earned a badge
      Week One Done
    • First Post
      sultangris earned a badge
      First Post
    • Reacting Well
      sultangris earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      172
    2. 2
      ATLien_0
      125
    3. 3
      snowy owl
      123
    4. 4
      Xenon
      118
    5. 5
      +Edouard
      92
  • Tell a friend

    Love Neowin? Tell a friend!