CODEWITHSUNDEEP
javascriptjqueryhtmlforms
princesden
princesden

Reputation: 15

Copy form input to another form

I have a form 

<form name="search" action="">

    <label>Job No:</label> 
    <input type="text" name="job" id="job" value=""/> 

    <label>Project:</label> 
    <input type="text" name="project" id="project" value=""/> 

    <input type="submit"  class="search_button" value="Search" /> 

</form>

and a second form

<form name="search2" action="">

    <label for="from">Start Date:</label> 
    <input type="text" name="from" id="from"  value=""/> 

    <label for="to" >End Date:</label> 
    <input type="text" name="to" id="to"  value="" /> 

    <input type="submit"  class="search_button" value="Search+" />

</form>

Is there a way to populate form2 with the input fields in form1 when the search button for form2 is clicked. My implementation requires i do not join the both forms together. Thanks

Upvotes: 0

Views: 6001

Answers (5)

Mike
Mike

Reputation: 339

$form1=$('form[name="search"]');
$form2=$('form[name="search2"]');

$form1.find('.search_button').bind('click', function(e){
    e.preventDefault();
    $form2.children().not('.search_button').each(function(i){
        $(this).clone().appendTo($form2);
    });
});

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

Try this

$("form[name='search2']").submit(function(){
  var form1 = $(this);
  var form2 = $("form[name='search']");

  //Here read all the input elements from form2 and copy into form1 element.

});

Upvotes: 0

RiaD
RiaD

Reputation: 47619

<form name="search2" action="">

   <label for="from">Start Date:</label> 
   <input type="text" name="from" id="from"  value=""/> 

   <label for="to" >End Date:</label> 
   <input type="text" name="to" id="to"  value="" /> 

   <input type="hidden" name="job2" id="job2"/>
   <input type="submit"  class="search_button" value="Search+" />

</form>

<script>
    $('#job').change(function(){
         $('#job2').val( $('#job'));
    });
</script>

similarly second field too

Upvotes: 1

Ray Toal
Ray Toal

Reputation: 88378

Yes, in the onsubmit handler for form execute JavaScript code to read the fields from form1 and write the values into form2. Return false so you don't actually submit form2, assuming all you want to do is copy.

Funny though that the field names differ between the two forms. But if you want to copy, it is just JavaScript.

Upvotes: 0

Teja Kantamneni
Teja Kantamneni

Reputation: 17472

Use hidden variables in form2 matching the elements in form1. On Form submit, you can copu the values using javascript and then submit the form.

Upvotes: 0

Related Questions