• 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

    • Camtasia screen recorder now has a free version that works in your browser by Aditya Tiwari TechSmith, the minds behind Camtasia, has announced an online version of its popular screen recording and video editing tool. The web-based version, called Camtasia Online, is now available through popular web browsers like Google Chrome and Safari. Camtasia Online is essentially a stripped-down version of its desktop counterpart. It is designed to let you screen record, customize, share, and collaborate on high-quality videos without needing to download any software or purchase a subscription. Screen recording tools are often used to create step-by-step walkthroughs and tutorials, personalized feedback or coaching, and showcase a product or service. Camtasia has been around since 2002 and is primarily accessible through paid offerings. The screen recorder has over 34 million users globally. TechSmith offers a free trial of the desktop version, but the exported files automatically include a watermark. That's not the case with its modern counterpart, according to the company, which doesn't require any subscription. Note that while the online screen recorder is free to use, you still need a TechSmith account to use it. "While this first release focuses on streamlined creation, it will continue to grow in capability, and users can move projects into the Camtasia desktop editor for more advanced editing when needed,” TechSmith's CTO, Tony Lambert, said in an emailed statement. The web-based version allows you to create 1080p short clips (Scenes) of up to 5 minutes in length, with options to record a specific app, window, or the entire screen. It can record the screen, camera, and microphone on separate layers for more flexibility during editing. You can record multiple scenes and export them as a single video file. Camtasia Online offers a variety of visual effects and backgrounds, and the ability to pick a custom size and position on the screen. For instance, you can place the screen recording in the top-left or bottom-right corner of the screen, depending on your preference. Camtasia Online comes with more than 85 pre-defined "looks" to match your preference, its maker said. You can remove the background, add borders, drop shadows, make corners round, add reflections, and more, before and after recording a scene. You can also trim a video after recording with support for reversible changes. The online screen recorder also lets you collaborate with other users by sending invitation links. You can either give them access to the entire project or just a single scene. You can also preview the scenes before exporting them or re-record if something doesn't feel right. TechSmith also offers integration with Camtasia 2025's desktop version, allowing you to utilize additional features such as transitions, annotations, and dynamic captions. You can click on the Export button to download the project and use it in the desktop editor. Overall, Camtasia Online could be a suitable option for quick screen recording sessions and a viable choice for beginners. However, one downside is that it can be a bit tricky to download the video file directly through your browser. First, click on the "Export to Screencast" option in Export settings, which opens TechSmith's online hosting service. Then, make sure you're signed in to your TechSmith account, and click on More > Download to download the video file to your device.
    • Intel is pretty consistent about dropping a new CPU every year, typically in Q3. The fact that we are starting to get more information now implies they are on track.
    • TerraMaster D4 SSD review: Palm-sized DAS with up to 32TB of storage over USB4 by Steven Parker TerraMaster is back with another disk enclosure. I was offered the chance to take a look at their new D4 SSD, which is a palm-sized DAS that supports four M.2 SSDs ahead of its launch, today, on June 17. This follows our review of the all SATA D9-320 that we did last month, and the D5 Hybrid and D8 Hybrid, both of which are essentially multi-disk (HDD and SSD) enclosures for external backup, or to expand the capacity of a NAS. Here are the full specs of it: TerraMaster D4 SSD Dimensions: 138 x 60 x 140 mm Weight: 419g (with 3x M.2 SSDs) Power: 24W (100V to 240V AC) 50/60 HZ, Single Frequency System Fan: 50 x 50 x 10mm x3 Max Noise Level: 19 dB(A) using M.2 SSDs in standby mode; Test environment noise: 17.3dB(A); Test distance: 1m Compatible Disk Types: PCIe NVMe M.2 2280 SSD Reading Speed (max.) Writing Speed (max.) 3257 MB/s (Samsung 990 Pro 4TB x4 RAID0; 1600MB/s 4TB x1 3192 MB/s (Samsung 990 Pro 4TB x4 RAID0; 1500MB/s 4TB x1 Power Consumption: 15.0 W (Fully loaded Seagate 2TB M.2 SSDs in read/write state) 6.0 W (Fully loaded Seagate 2TB M.2 SSDs in hibernation) Raw Capacity: 32TB (8TB SSD x4) RAIDs Supported: SINGLE DISK Power saving: Hibernation Ports: USB4 40Gbps DC IN 12V Barrelport (MSRP) Price: $299.99 First, I should mention that TerraMaster only put SINGLE DISK support in the RAID specification, however unlike the D9-320 9-bay HDD enclosure, I was surprised to see that it actually supports both Striped and Spanned volumes in Windows 11, so you can get RAID1 in Windows 11 with this if you wanted, or simply combine all of the available drives into a single volume spanning the size of all drives combined. Technically, they are correct with the only SINGLE disk support, that is, if you plan to connect it to a NAS. Because it connects over USB, this means you will only be able to create usbshares, not storage pools. However, it is a nice surprise that Windows supports more functions with this D4 SSD than a NAS offers, which may also result in how you decide to use it. Also, for some reason, they have put that it weighs 600 grams. I think this is the package weight, because I weighed the D4 SSD after putting in three SSDs, and it came to 419 grams, which is really light! What's in the box D4 SSD device USB Type-C cable (C to C) 0.8m Power adapter Quick installation guide Limited warranty notice Bag of 2x M.2 screws I should mention that the "Quick Installation Guide" is simply a card with a QR code that links to https://start.terra-master.com. It requests your email and product details, which then opens to a full online User Guide. After getting to the end of the online User Guide (37 pages), which frustratingly encountered really slow page loads at times, there's a link to download a PDF of the User Manual. Design The design of the D4 SSD matches that of the F8 SSD Plus that I reviewed last year; in fact, it shares almost the same dimensions, but is 3.7cm shorter than its full NAS SSD counterpart, which is another example of how TerraMaster disk enclosures closely match their NAS sibling. It is essentially a metal frame with what I would call a matte black plastic cover. It is a bit of a dust and fingerprint magnet, too, but a quick wipe, and it's all gone, unlike what you would see with a glossy plastic exterior. It has a slightly textured feel to it and definitely feels premium, but also not in such a way that it would easily slip out of your hand. On the front, the D4 SSD is completely bare aside from a small sticker with D4 SSD printed on it; both sides are the same, with the TERRAMASTER logo stamped in the center. Unlike the D5-, D8 Hybrid, and NAS' in the same class (2- and 4-bay,) the logos do not double as ventilation on the D4 SSD. Around the back is a pretty bare affair with regulatory information stamped on it, then you have the Type C USB4 port and barrel power port input along with the screw that once removed, lets you slide off the cover to access the internals and manage the M.2 SSDs. Top Bottom The top uses the full surface area aside from the power button to assist with ventilation, and on the bottom, there are two 50 x 50 x 10mm intake fans that are very quiet. Installation Well, like the D9-320, there's hardly anything to it. Take off the screw around the back and screw in your PCIe NVMe M.2 2280 SSDs. They run at a (combined) max speed of USB4 (40 Gbps). TerraMaster includes a screw on each M2 connector, so need to go hunting, there are also two "backup screws" included in the box. For our review, we used two MP44Q 4TB NVMe SSDs ($224.99 on Amazon or Newegg) that TEAMGROUP supplied us with, and a 2TB Rocket 4 Plus ($219.99 on Newegg) that Sabrent sent to us. They are all PCIe 4.0 x4 drives. TerraMaster also uploaded a video to YouTube that shows how to install the storage options. Usage First, a bit of background on the capabilities of the D4 SSD. The ASMedia ASM2464PDX chip offers four lanes at PCIe 4.0 x 1; however, you can only expect to see up to 3257 MB/s speeds, and that will need to be in a RAID configuration; it basically translates to speeds you would expect from a traditional PCIe 3.0 SSD. This drops to around half that speed if the disks are being used independently in SINGLE disk mode. Here is how TerraMaster breaks it down: Unlike the D9-320 that we recently tested, it is not possible to daisy chain the D4 SSD with multiple units. As of writing, TerraMaster is not offering it in any other sizes (so, there is no D8 SSD option). RAID Happily, you can create a Striped or Spanned Volume of the disks in Windows, but be aware that it will only combine the total size of the smallest-sized SSD (so if you have 2TB + 4TB + 4TB, a volume of 3x 2TB will be created). In TOS 6 the same is true with the default TRAID setting, which is basically TerraMaster's own flavor of RAID5. Creating a storage pool on the D4 SSD in TOS 6 Creating a 3.71TB Storage pool (using two 4TB SSDs in TRAID) took around three hours to synchronize. On the official website, it is suggested that you download TPC Backupper, which is not included in the box, on a USB or onboard storage in the D8 Hybrid. There's a card that also instructs to download TPC Backupper. Still, I find that a bit of a shame because even most Razer or Logitech keyboards and mice include the setup program for Synapse or Logitech Options when you connect these devices to your Windows PC. Upon installing TPC Backupper by AOMEI a web page automatically opens in the default browser, thanking for a successful installation of what is actually a rebranded version of the free AOMEI Backupper Standard, and it "helpfully" suggests upgrading to a paid version for more features. The nag to upgrade to a paid version of the software seems a bit desperate if you ask me. I decided to emulate a daily backup that I usually do with the excellent SyncFolder, which basically backs up my Documents and Pictures folders from my main PC to my NAS Cloud drive. For this, I used the TPC Backupper app that I mentioned earlier. D4 SSD attached to local PC, local disk backup to D4 SSD over USB The process took a little under ten minutes to back up 34,979 files in 2,213 folders totaling 35,7GB into an .afi image file on a Striped volume. Restoring to the same local SSD only took 2m30s, which is impressive. D9-320 attached to local PC, backup to NAS over network Next, I backed up the same Documents and Pictures folders from the Striped volume in the D4 SSD to my Cloud backup over the network, and this took 11m20s. Restoring to the D4 SSD took just under three minutes, which is only half a minute longer than restoring the same data locally. Local PC backup over LAN to D4 SSD attached to NAS over USB Lastly, I ran the backup with the D4 SSD attached directly to my TerraMaster F4-424 Max over USB, so this meant copying the Documents and Pictures folder from my local PC over my LAN to the D4 SSD. The process took 14m33s to back up 34,979 files in 2,213 folders totaling 35,7GB into an .afi image file on the Simple volume, which is a little longer over the network than with the D4 SSD attached via USB to my local PC. Restoring the data locally over the network only took 1m30s, which was a minute quicker than restoring from the D4 SSD when attached locally, for some reason. Drive speed Striped volume Simple volume However, back to the drive setup, I ran CrystalDiskMark 8.0.5 in Windows 11 24H2 with the D4 SSD attached to that PC. I included both RAID and SINGLE disk mode, and the results definitely align with TerraMaster's drive speed claims, mentioned earlier in this review. I tried to measure the noise, but it did not register over the (roughly) 50dB of ambient noise of my work-from-home office. We will have to take TerraMaster's word for the claim about noise levels being as low as 19 dB. The Cooler Master NR200P Max towers above the TerraMaster D4 SSD Conclusion TerraMaster markets the D4 SSD as "specifically designed for media creation and video production applications," but also says that it "serves as an ideal external storage expansion solution for Mac mini and can be used as a Mac OS boot drive." Sorry, but I do not have a Mac mini to test this claim. TerraMaster also claims that this would suit gamers, for its "seamless experience indistinguishable from running on a local drive, with truly zero-latency performance." So it really has several use case applications depending on your wishes, and affordability to populate with up to four (large) SSDs. It looks premium, but it is what it is, essentially a plastic shell of a DAS. But it does not feel cheap either, the bottom intake fans are quiet, and overall, it is a nice-looking device that will not take up much room anywhere you place it. The added bonus here is RAID support, unlike with the D9-320 in Windows. However, do not expect RAID support on any NAS other than TerraMaster's own TOS 6 because you cannot create a storage pool over USB (at least in Synology DSM). Say you had a few one- or two-terabyte SSDs lying around, you could stick them all in and create a striped volume for anything up to 8TB for a really large storage volume in Windows. If I had any complaints at all, it would be how it does not really fully support 3rd party NAS' for creating a storage pool, but that would probably require an eSATA port. Secondly, I would have preferred to have seen a toolless method for installing and managing the SSDs. Most modern motherboards now use the toolless method of a clip or latch for M.2 SSDs, and given that the D4 SSD only supports 2280-sized SSDs, I don't feel this is a huge ask. You can purchase the TerraMaster D4 SSD for $299.99 from today (June 17) on the official website. As an Amazon Associate, we earn from qualifying purchases.
    • they are breaking stuff on purpose in the classic outlook to say look go over there! it's odd how since new outlook appeared old outlook as broke a LOT more then it used to
  • Recent Achievements

    • Experienced
      dismuter went up a rank
      Experienced
    • One Month Later
      mevinyavin earned a badge
      One Month Later
    • Week One Done
      rozermack875 earned a badge
      Week One Done
    • Week One Done
      oneworldtechnologies earned a badge
      Week One Done
    • Veteran
      matthiew went up a rank
      Veteran
  • Popular Contributors

    1. 1
      +primortal
      685
    2. 2
      ATLien_0
      266
    3. 3
      Michael Scrip
      206
    4. 4
      +FloatingFatMan
      185
    5. 5
      Steven P.
      142
  • Tell a friend

    Love Neowin? Tell a friend!