Welcome Guest! To access all forums & features, please register an account or sign-in. → Why register?


Jony Ive’s iOS 7 redesign described as ‘black, white, and flat all over’ in Back Page News

[Javascript] Combine 2 form fields into one.

Started by Axel, Jan 28 2013 20:10

7 replies to this topic - - - - -

#1 Axel

    --[Est. 1986]--

  • 5,304 posts
    • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 28 January 2013 - 20:10

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

Ad Bot


#2 Jose_49

    Neowinian Wise One

  • 3,012 posts
    • Joined: 30-July 09

Posted 28 January 2013 - 20:28

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();">

Edit:
Time to explain. First we have a form with an id called 'yy'. We get its value through the document.getElementById('id_name').value 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 joint through the same procedure as I took the other two's (mm and yy) value.
We do this again with the document.getElementById('joint').value = function and operator, whereas joint is the id of hidden form.
For concatenating strings, I used the + 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 joint, my hidden form.

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

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

#3 OP Axel

    --[Est. 1986]--

  • 5,304 posts
    • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 28 January 2013 - 22:38

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!

#4 palenous

    Neowinian

  • 29 posts
    • Joined: 19-January 13
  • Location: Ohio, United States
  • OS: Windows 7 Ultimate
  • Phone: Samsung Galaxy SIII (Verizon)

Posted 29 January 2013 - 00:00

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>

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. :)

#5 OP Axel

    --[Est. 1986]--

  • 5,304 posts
    • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 29 January 2013 - 11:10

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:


<input id="expiry" type="hidden" name="field18317078" value="" />


<input id="month" class="tiny" placeholder="mm" type="text" oninput="join_expiry();" onpaste="join_expiry();">
<input id="year" class="tiny" placeholder="yy" type="text" oninput="join_expiry();" onpaste="join_expiry();">


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

#6 Jose_49

    Neowinian Wise One

  • 3,012 posts
    • Joined: 30-July 09

Posted 29 January 2013 - 11:52

View PostAxel, on 29 January 2013 - 11:10, 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:


<input id="expiry" type="hidden" name="field18317078" value="" />


<input id="month" class="tiny" placeholder="mm" type="text" oninput="join_expiry();" onpaste="join_expiry();">
<input id="year" class="tiny" placeholder="yy" type="text" oninput="join_expiry();" onpaste="join_expiry();">


<script type="text/javascript">
function join_expiry()
{
var mm = document.getElementById('month').value;
var yy = document.getElementById('year').value;
document.getElementById('expiry').value = mm+yy;
}
</script>
No probs.

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

#7 OP Axel

    --[Est. 1986]--

  • 5,304 posts
    • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 29 January 2013 - 12:28

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

#8 palenous

    Neowinian

  • 29 posts
    • Joined: 19-January 13
  • Location: Ohio, United States
  • OS: Windows 7 Ultimate
  • Phone: Samsung Galaxy SIII (Verizon)

Posted 29 January 2013 - 14:44

View PostJose_49, on 29 January 2013 - 11:52, said:

No probs.

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

View PostAxel, on 29 January 2013 - 12:28, 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. :)
Back to Web Design / Programming · Next Unread Topic →


  1. Quick Nav
  2. Neowin Forums
  3. → Technical Help & Support
  4. → Web Design / Programming