jquery在2个链式表单之间传递值

时间:2012-10-26 13:24:50

标签: jquery html

下午全部,我的问题涉及2个链式表格,其中第一个表格的值被验证,如果确定,则显示第二个表格(并且第一个表格中的输入字段被取消激活,隐藏提交按钮)。

我的问题是:如何将第一个表单中的值作为隐藏字段附加到第二个表单。

我的代码是这样的:

<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>

和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;
        }
    });  

有些事情仍在进行中,比如同时验证那些不幸的我还没有成功完成的字段。

3 个答案:

答案 0 :(得分:1)

虽然我不知道您必须有两个单独的表单而不是一个表单的原因,但是一种可能的方法是循环遍历第一个表单的所有输入并将它们作为子项附加到第二个表单。这样的事情:

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

这样的事情,也许这就是你要找的东西?

答案 1 :(得分:1)

这应该从upfotos_dados获取所有输入,并在upload_imagens中为每个输入添加隐藏的输入,其中id为&gt;名称和价值 - &gt;值

$("#upfotos_dados input").each(function() {
    $(#upload_imagens).append('<input type="hidden" name="'+this.id+'" value="'+this.value+'">');
});

答案 2 :(得分:1)

您可以修改.submit_dados点击事件处理程序。使用一些重构代码,并将upload_dados的输入值附加到upload_imagens中的隐藏字段。

在附加这些值时,您不需要再次检查值,因为您已经完成了这些验证。

$('.submit_dados').on("click", function () {
    var parent =$("#upload_dados");
    var fotos_email = $('#fotos_email');
    var fotos_email_value = fotos_email.val();
    var fotos_nome = $('#fotos_nome');
    var fotos_nome_value = fotos_nome.val();
    var fotos_especie = $('#fotos_especie');
    var fotos_especie_value = fotos_especie.val();

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

    //if (fotos_email_value != '' && IsEmail(fotos_email_value) && fotos_nome_value != '' && fotos_especie_value.val() != '') {
    //var upload_dados = $("#upload_dados");
    parent.hide();
    var upload_imagens = $("#upload_imagens");

    parent.find('input').each(function () {
        upload_imagens.append($('<input/>').attr('type', 'hidden').attr('name', this.id).val(this.value));
    });
    return false;
    //}
});