JSFiddle - React, Tailwind, and code Playground

by vikrant singh

HTML

<h2>Form 1</h2>

<form method="get" target="_new" id="form1">
    <label for="name">Name</label>
    <input type="text" name="name1" value="def">
    <label for="address1">Address</label>
    <input type="text" name="address1"value="ghi">
    <br>
    <label for="postcode">Post code</label>
    <input type="text" name="postcode1" value="abc">
    <p>
        <input type="submit" name="submit" value="fill in form 2">
    </p>
</form>
 <h2>Form 2</h2>

<form method="get" target="_new" id="form2">
    <label for="name">Name</label>
    <input type="text" name="name2">
    <label for="address1">Address</label>
    <input type="text" name="address2" >
    <br>
    <label for="postcode">Post code</label>
    <input type="text" name="postcode2" >
    <p>
        <input type="reset" name="submit" value="reset">
    </p>
</form>

JavaScript

$.fn.values = function (data) {
    var els = $(this).find(':input').get();

    if (typeof data != 'object') {
        // return all data
        data = {};
        $.each(els, function () {
            if (this.name && !this.disabled && (this.checked || /select|textarea/i.test(this.nodeName) || /text|hidden|password/i.test(this.type))) {
                data[this.name] = $(this).val();
            }
        });
        return data;
    } else {
        $.each(els, function () {
            if (this.name && data[this.name]) {
                if (this.type == 'checkbox' || this.type == 'radio') {
                    $(this).attr("checked", (data[this.name] == $(this).val()));
                } else {
                    $(this).val(data[this.name]);
                }
            }
        });
        return $(this);
    }
};
$("#form1").submit(function () { //map both forms field, form1 field as key & form 2 field as value
    var mapper = {
        "name1": "name2", //name1 from form1 corrosponds to name2 from form2
        "address1": "address2", //address1 from form1 corrosponds to address2 from form2
        "postcode1": "postcode2" //postcode1 from form1 corrosponds to postcode2 from form2
    };
    var formData1 = $(this).values();
    var formData2 = {};
    //filling data2 from data 1
    for (var i in mapper) {
        formData2[mapper[i]] = formData1[i];
    }
    $("#form2").values(formData2); //filling form 2 from data2
    return false;
});