Question

Afternoon all, My question pertains to 2 chained forms, where values from the first form are validated and if OK the 2nd form is shown (and the input fields from the 1st are deactivated and the submit button hidden).

My question is: how can i get values from the first form be attached to the second form as hidden fields.

My code goes like this:

<form id="upfotos_dados" action="POST">
     <p class="desc_nome"><strong>O seu nome: </strong></p>
     <input type="text" id="fotos_nome" />

     <p class="desc_email"><strong>O seu email: </strong></p>
     <input type="text" id="fotos_email" />

     <p class="desc_especie"><strong>Fotografias da espécie: </strong></p>
     <input type="text" size="20" id="fotos_especie" value="Asplenium Cetarach" disabled />

     <input value="Confirmar" type="submit" name="submit" class="button submit_dados" />
     <div class="clearfix"></div>
</form>

<form id="upload_imagens" action="javascript:$('#file_upload').uploadifive('upload')">
  <div id="queue"></div>
  <input id="file_upload" name="file_upload" type="file" multiple>
  <input value="Enviar Fotografias" type="submit" name="submit" class="enviafotos-button" /> 
</form>

And the jQuery:

    $(document).ready(function(){
        $("#upload_imagens").hide();    
    });

    $('.submit_dados').live("click",function(){

        if($('#fotos_email').val() == ''){ $('#fotos_email').parent().find('.desc_email').append("<span style='color:#A00'>Campo obrigatório.</span>"); return false; }
        else if(!IsEmail($('#fotos_email').val()) ){ $('#fotos_email').parent().find('.desc_email').append("<span style='color:#A00'>Email incorrecto.</span>"); return false; }
        if($('#fotos_nome').val() == ''){ $('#fotos_nome').parent().find('.desc_nome').append("<span style='color:#A00'>Campo obrigatório.</span>"); return false; }
        if($('#fotos_especie').val() == ''){ $('#fotos_especie').parent().find('.desc_especie').append("<span style='color:#A00'>Campo obrigatório.</span>"); return false; }

        if($('#fotos_email').val() != '' && IsEmail($('#fotos_email').val()) && $('#fotos_nome').val() != '' && $('#fotos_especie').val() != ''){
            $("#upload_dados").hide();
            $("#upload_imagens").show();
            return false;
        }
    });  

Some things are still work in progress, like simultaneous validation of the fields that unfortunatelly I haven’t manage to do it right yet.

Answer 1

While I don’t know the reason you have to have two separate forms instead of one, one possible approach is looping through all inputs of first form and append them as children to the second form.. Something like this:

$('#form1 input, #form1 select').each(function(index, element){
  $(#form2).append('<input type="hidden" name="'+$(element).attr('id')+'" value="'+$(element).val()+'">');
});

Something like that, maybe that is what you’re looking for?