How to Auto Update Duplicate Fields on Same Page

Using FCKeditorV2 and asp.net 2 (also can use php or perl if needed for solution)

I have an application that has a list of fields that are filled in by a user. These same fields are in two places on the same page. How can I have a user fill out the top fields and have it automatically update the same fields with the same data on the bottom of the page BEFORE it's submitted to the database?

This feature is used on sites that have shipping and billing addresses that are the same, I know it's possible. We are using asp.net, but any solutions or ideas are appreciated. I am wondering if PHP would be better for this. I want this to happen without user interaction, so they won't have to check the "Is the billing address the same as the shipping address?" method.

Thanks

Sun, 08/21/2011 - 07:34

modernstyler

Joined: 21/08/2011

Posts: 2

Re: How to Auto Update Duplicate Fields on Same Page

Hi nojava4u
This probably isn't something specific to fckeditor, but the solution you are looking for would be a simple Javascript with an OnChange (or OnBlur) event on the first input field. Try googling for "javascript to copy fields to another".

Tue, 08/23/2011 - 04:10

nojava4u

Joined: 06/08/2011

Posts: 2

Re: How to Auto Update Duplicate Fields on Same Page

I used jquery and this script. And HTMl/PHP for the page. This works like a charm!1

<script type="text/javascript">


$(document).ready(function()
 {
 $('#add1').change(add1Change);
  $('#add12').change(add12Change);
$('#add2').change(add2Change);
$('#add22').change(add22Change);
$('#city').change(cityChange);
$('#city2').change(city2Change); 
$('#state').change(stateChange);
$('#state2').change(state2Change); 
  });

function add1Change()
   {
   $('#add12').val($('#add1').val());
   }
   
function add12Change()
   {
   $('#add1').val($('#add12').val());
   }
function add2Change()
   {
   $('#add22').val($('#add2').val());
   }
   
function add22Change()
   {
   $('#add2').val($('#add22').val());
   }
function cityChange()
   {
   $('#city2').val($('#city').val());
   }
   
function city2Change()
   {
   $('#city').val($('#city2').val());
   }
function stateChange()
   {
   $('#state2').val($('#state').val());
   }
   
function state2Change()
   {
   $('#state').val($('#state2').val());
   }      



function data_copy()
{
alert("Hello");
if(document.form1.copy[0].checked){
document.form1.add12.value=document.form1.add1.value;
document.form1.add22.value=document.form1.add2.value;
document.form1.city2.value=document.form1.city.value;
document.form1.state2.value=document.form1.state.value;
}else{
document.form1.add12.value="";
document.form1.add22.value="";
document.form1.city2.value="";
document.form1.state2.value="";
}
}

</script>

THIS IS THE PHP PAGE WITH HTML- THIS YOU CAN PUT DIRECTLY INTO THE FCDEDITOR "sOURCE" WINDOW

<h2 style="text-align: center;"><span style="color: rgb(0, 0, 255);">Duplicate Data Auto Populate Using FCKeditor and PHP&nbsp;with jquery doing the magic. Just put Your HTML&nbsp;info in here<br />
</span></h2>
<h2 style="text-align: center;"><span style="color: rgb(0, 0, 255);">and your java into a .js file and call it from scripteditor.aspx!! </span></h2>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="500" cellspacing="1" cellpadding="0" border="0">
    <form action="duplicate.php" method="post" name="form1">
        &nbsp;
    </form>
    <tbody>
        <tr>
            <td colspan="2"><b>Ofice Address</b></td>
        </tr>
        <tr>
            <td>Address 1</td>
            <td><input type="text" id="add1" name="add1" /></td>
        </tr>
        <tr>
            <td>Address 2</td>
            <td><input type="text" id="add2" name="add2" /></td>
        </tr>
        <tr>
            <td>City</td>
            <td><input type="text" id="city" name="city" /></td>
        </tr>
        <tr>
            <td>State</td>
            <td><input type="text" id="state" name="state" /></td>
        </tr>
        <tr>
            <td><b>Residence Address</b></td>
        </tr>
        <tr>
            <td>Address 1</td>
            <td><input type="text" id="add12" name="add12" /></td>
        </tr>
        <tr>
            <td>Address 2</td>
            <td><input type="text" id="add22" name="add22" /></td>
        </tr>
        <tr>
            <td>City</td>
            <td><input type="text" id="city2" name="city2" /></td>
        </tr>
        <tr>
            <td>State</td>
            <td><input type="text" id="state2" name="state2" /></td>
        </tr>
        <tr>
            <td align="center" colspan="2"><input type="submit" value="Submit" /></td>
        </tr>
    </tbody>
</table>
<h1 style="text-align: center;"><span style="color: rgb(255, 0, 0);"><br />
</span></h1>