can i split a input field into two fields with jquery???

Hi there,

I am using a particular Wordpress Plugin and it comes with a simple form generator. Now i like to alter the form layout a bit using the unique id's per input field.

for example, i use this to alter the color and add a footnote
Copy codejQuery(document).ready(function() {

jQuery('#wpsc_checkout_form_7').css("color","blue");
jQuery('#wpsc_checkout_form_7').after('<br/>(Look closely)');
});

Code (markup):

Now i want to

• split input field #wpsc_checkout_form_7 into 2 input fields
• on form submit have the values of the 2 input fields as #wpsc_checkout_form_7 value

Any tips, suggestions?

 

If you are manually joining the input fields before this function, you could include a separator (like ~) and using String split function to break it into two fields.

Else, if there is any other character that is distinguishing, you can go ahead with it.

To have two hidden fields onsubmit, you can have a hidden control, populate it programmatically to get it after submit.

Hope this helps!!

 

add the two elements before the input field, and merge the data together, and fill it into the "#wpsc_checkout_7" input field on blur

var joinCheckoutForms = function() {};
var emptyThisIfDefault = function() {};
jQuery( "#wpsc_checkout_form_7" )
    .before( jQuery("<input />", { 
        type: "text", 
        value: "First Name", 
        "name": "wpsc_checkout_7_1",
        id: "wpsc_checkout_7_1",
        blur: joinCheckoutForms,
        focus: emptyThisIfDefault
    }) )
    .before( jQuery("<input />", { 
        type: "text", 
        value: "Last Name", 
        "name": "wpsc_checkout_7_2",
        id: "wpsc_checkout_7_2",
        blur: joinCheckoutForms,
        focus: emptyThisIfDefault
    }) )
    .hide();

Code (markup):

further, you can once again join checkout forms on submit of the form, and then before sending the request to the server, you can destroy these two elements.