Combine two form elements with JS and non-JS backup

Question

So I'm going to combine two form input fields together with jQuery:

//onSubmit of form
//$('#element').val(element1 + element2);

How can I combine these two fields/submit the correct value even if JS isn't enabled?

Can I use the

<noscript> 

tag in some way to achieve this?

Sever side logic is not an option. It has to be in the front-end unfortunately.

It's for a phone field like:

Phone:  <select name="countrycode">
<option value="44" selected>UK (+44)</option> 
<option value="1">USA (+1)</option> 
<option value="213">Algeria (+213)</option> 
<option value="376">Andorra (+376)</option> 
</select>
<input type="text" name="phone_number" id="phone_number"/>

Answer 1

Without JS, the very first suggestion I'd have to say is how the old days would have done it.

One way would involve at least 2 pages on your site. One would have a page filled with countries and the user will select one. Clicking one redirects the browser to a page with the phone number input prefilled with the country code of the country selected in the previous page. This will involve the server partially, just to prefill the input.

Another suggestion is to have a list of area codes, and your input prefilled with the format. For newer browsers, one would use the placeholder property to provide a format. That way, the user knows how to write it. That list of area codes may be hidden in a <noscript> element.

---

PS: Just so you know, 95% of the browsers in the world have JavaScript on. That other 5% are in the form of feature phone browsers, web crawlers, and paranoid people who disable JS or use script blockers to disable some analytics tools. You should not be developing for them. Instead, focus on the 95% who do use JS.

Answer 2

If JavaScript is not enabled you can combine them server-side.

You cant do this without JavaScript enabled, if they are different fields you need script to get their values and concatenate them.