将表单值提交到显示为iframe的外部URL

时间:2013-04-18 19:29:45

标签: javascript url forms

我正在尝试创建一个表单,在提交时将值传递给外部URL并将结果显示为iframe。表单是主页,结果也必须显示在第一页中。

Everery time我提交它会返回404错误。

以下是代码:

<form id="buscaAereo" method="POST" name="formularioAereo" action="<?php echo home_url('/' ); ?>">
    <fieldset>
        <div class="half">
            <label class="radio">
                <input type="radio" name="idaevolta" id="idaevolta" value="1" checked>
                Ida e Volta
            </label>
        </div>

        <div class="half">
            <label class="radio">
                <input type="radio" name="idaevolta" id="idaevolta" value="2" checked>
                So ida
            </label>
        </div>

        <div class="half">
            <label for="name">Origem:</label>
            <input type="text" class="cidade" name="origem" data-provide="typeahead">
        </div>
        <div class="half">
            <label for="name">Destino:</label>
            <input type="text" id="cidade" name="destino" data-provide="typeahead">
        </div>

        <div class="half">
            <label for="name">Data de ida:</label>
            <div class="input-prepend">
                <span class="add-on"><i class="icon-calendar"></i></span>
                <input class="sapn1" id="date" name="ida" type="text">
            </div>
        </div>

        <div class="half">
            <label for="name">Data de volta:</label>
            <div class="input-prepend">
                <span class="add-on"><i class="icon-calendar"></i></span>
                <input class="" id="date" name="volta" type="text">
            </div>
        </div>

        <div class="quarter">
            <label for="country">Adultos:</label>
            <select id="country" name="adultos">
                <option value="0">00</option>
                <option value="1" selected="selected">01</option>
                <option value="2">02</option>
                <option value="3">03</option>
                <option value="4">04</option>
                <option value="5">05</option>
                <option value="6">06</option>
                <option value="7">07</option>
                <option value="8">08</option>
                <option value="9">09</option>
            </select>
        </div>
        <div class="quarter">
            <label for="country">Criancas:</label>
            <select id="country" name="criancas">
                <option value="1" selected="selected">00</option>
                <option value="1">01</option>
                <option value="2">02</option>
                <option value="3">03</option>
                <option value="4">04</option>
                <option value="5">05</option>
                <option value="6">06</option>
                <option value="7">07</option>
                <option value="8">08</option>
                <option value="9">09</option>
            </select>
        </div>

        <div class="quarter">
            <label for="country">Bebes:</label>
            <select id="country" name="bebes">
                <option value="1" selected="selected">00</option>
                <option value="1">01</option>
                <option value="2">02</option>
                <option value="3">03</option>
                <option value="4">04</option>
                <option value="5">05</option>
                <option value="6">06</option>
                <option value="7">07</option>
                <option value="8">08</option>
                <option value="9">09</option>
            </select>
        </div>

        <div class="quarter">
            <input type="submit" id="busca" name="submit" class="btn btn-primary botao" value="Pesquizar">
        </div>
    </fieldset>
</form>

PHP代码:

function buscaPassagem() {
    if(isset($_POST['submit'])) {
        $idaevolta = $_POST["idaevolta"];
        $origem = $_POST["origem"];
        $destino = $_POST["destino"];
        $ida = $_POST["ida"];
        $volta = $_POST["volta"];
        $adultos = $_POST["adultos"];
        $criancas = $_POST["criancas"];
        $bebes = $_POST["bebes"];

        $link = "http://www.portaldoagente.com.br/OTAFrame/SuiteAerea/guiAereoAeroportos.aspx?PesquisaAutomatica=S&Tipo="; 

        $UrlFinal = $link
            .$idaevolta
            ."&Origem=".$origem
            ."&Destino=".$destino
            ."&Adultos=".$adultos
            ."&Criancas=".$criancas
            ."&Bebes=".$bebes
            ."&DataIda=".$ida
            ."&DataVolta=".$bebes
            ."&LojaChave=bG9qYXRlbXBvc3Jpbw==";

        echo "<script>window.open('$UrlFinal', 'meu_frame');</script>";
    }
}

有人知道解决方案吗?

1 个答案:

答案 0 :(得分:0)

您必须将表单操作定位到iframe。此外,该操作必须指向您的PHP代码。 (你问题的第二段代码)

 <form target='iFrame' id="buscaAereo" method="POST" name="formularioAereo" action="your_php_code">
   ....
 </form>

 <iframe id="iFrameID" name="iFrame"></iframe>

编辑:试用此代码

<强> JQuery的:

function enviar()
{
   var link = "http://www.portaldoagente.com.br/OTAFrame/SuiteAerea/guiAereoAeroportos.aspx?PesquisaAutomatica=S&Tipo="; 

   var UrlFinal = link + $('input[name=idaevolta]:checked').val()
        +"&Origem="+$("#origem").val()
        +"&Destino="+$("#destino").val()
        +"&Criancas="+$('#criancas :selected').val()
        +"&DataIda="+$("#ida").val()
        +"&DataVolta="+$("#volta").val()
        +"&Bebes="+$('#bebes :selected').val()
        +"&Adultos="+$('#adultos :selected').val()
        +"&LojaChave=bG9qYXRlbXBvc3Jpbw==";
    $("#iFrameID").attr("src", UrlFinal);
}

<强> HTML:

                                                       Ida e Volta                      

    <div class="half">
        <label class="radio">
            <input type="radio" name="idaevolta" value="2" checked>
            So ida
        </label>
    </div>

    <div class="half">
        <label for="name">Origem:</label>
        <input id="origem" type="text" class="cidade" name="origem" data-provide="typeahead">
    </div>
    <div class="half">
        <label for="name">Destino:</label>
        <input type="text" id="destino" name="destino" data-provide="typeahead">
    </div>

    <div class="half">
        <label for="name">Data de ida:</label>
        <div class="input-prepend">
            <span class="add-on"><i class="icon-calendar"></i></span>
            <input class="sapn1" id="ida" name="ida" type="text">
        </div>
    </div>

    <div class="half">
        <label for="name">Data de volta:</label>
        <div class="input-prepend">
            <span class="add-on"><i class="icon-calendar"></i></span>
            <input class="" id="volta" name="volta" type="text">
        </div>
    </div>

    <div class="quarter">
        <label for="adultos">Adultos:</label>
        <select id="adultos" name="adultos">
            <option value="0">00</option>
            <option value="1" selected="selected">01</option>
            <option value="2">02</option>
            <option value="3">03</option>
            <option value="4">04</option>
            <option value="5">05</option>
            <option value="6">06</option>
            <option value="7">07</option>
            <option value="8">08</option>
            <option value="9">09</option>
        </select>
    </div>
    <div class="quarter">
        <label for="criancas">Criancas:</label>
        <select id="criancas" name="criancas">
            <option value="1" selected="selected">00</option>
            <option value="1">01</option>
            <option value="2">02</option>
            <option value="3">03</option>
            <option value="4">04</option>
            <option value="5">05</option>
            <option value="6">06</option>
            <option value="7">07</option>
            <option value="8">08</option>
            <option value="9">09</option>
        </select>
    </div>

    <div class="quarter">
        <label for="bebes">Bebes:</label>
        <select id="bebes" name="bebes">
            <option value="1" selected="selected">00</option>
            <option value="1">01</option>
            <option value="2">02</option>
            <option value="3">03</option>
            <option value="4">04</option>
            <option value="5">05</option>
            <option value="6">06</option>
            <option value="7">07</option>
            <option value="8">08</option>
            <option value="9">09</option>
        </select>
    </div>

    <div class="quarter">
        <button onClick="javascript:enviar();">Pesquizar</button>
    </div>
</fieldset>
<iframe id="iFrameID" name="iFrame"></iframe>

希望这有帮助。