[jQuery] clone form information

Mon, 16 Feb 2009 14:44:35 -0800 

sometimes we have two form that almost the same fields, so we will
give client a clone button if the information is complete the same,
this is how I do now, is there any easy way to accomplish that?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>clone form</title>
<style type="text/css">
<!--
body {
        font-size: 12px;
}
div.box {
        width: 500px;
        border: 1px solid #000000;
        padding: 6px;
        margin: 0 0 6px 0;
}
-->
</style>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
</head>
<body>
<div class="box">
        <form method="post" name="form1" id="form1">
            <label for="name">name</label>
            <input name="name" type="text" id="name" value="David" />
            <br />
        <label>
            <input name="gender" type="radio" id="gender_0" value="1"
checked="checked" />
            male</label>
        <br />
        <label>
            <input type="radio" name="gender" value="0" id="gender_1" /
>
            female</label>
        <br />
                <input type="checkbox" id="clone" /><label 
for="clone">clone</label>
    </form>
</div>
<div class="box">
        <form method="post" name="form2" id="form2">
            <label for="name2">name2</label>
            <input type="text" name="name2" id="name2" />
        <label>
            <br />
            <input type="radio" name="gender2" value="1"
id="gender2_0" />
            male</label>
        <br />
        <label>
            <input type="radio" name="gender2" value="0"
id="gender2_1" />
            female</label>
        <br />
    </form>
</div>
<script language="javascript">
<!--
        $(function() {
                /*if click checkbox clone*/
                $('input#clone').click(function() {

                        $name = $('form#form1 input#name');
                        $gender = $('form#form1 input[name="gender"]');
                        $name2 = $('form#form2 input#name2');
                        $gender2 = $('form#form2 input[name="gender2"]');

                        /*
                         * check if it been checked
                         * if checked clone the information
                         * if not checked clear form2's value
                         */
                        if ($(this).is(':checked')) {
                                $name2.val($name.val());
                                $gender.each(function() {
                                        if ($(this).is(':checked')) {
                                                
$gender2.eq($gender.index(this)).attr('checked', true);
                                        }
                                });
                        } else {
                                $name2.val('');
                                $gender2.attr('checked', false);
                        }
                });
        });
-->
</script>
</body>
</html>

Reply via email to