Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Willian Correia

passar dados do formulario em ajax

Por , em Javascript

Recommended Posts

Willian Correia    0

Willian Correia
Postado

Galera preciso pegar os dados do formulario e passar para uma url externa

 

formulario:

 

 

 

             <form target='iFrame' id="buscaAereo" method="POST" name="formularioAereo" action="busca.php">
                <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="Pesquizar" name="Pesquizar" class="btn btn-primary botao" value="Pesquizar">
                </div>
            </fieldset>
        </form>

e precisa ser retornado os valores na seguinte url:

http://www.portaldoagente.com.br/OTAFrame/SuiteAerea/guiAereoAeroportos.aspx?PesquisaAutomatica=S&Tipo=&Origem=&Destino=&Adultos=&Criancas=&Bebes=&DataIda=&DataVolta=&LojaChave=bG9qYXRlbXBvc3Jpbw==

 

e essa url caregada em um iframe, alguem pode me ajudar.. por favor nao tenho experiencia com javascript e ajax..

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alan Rezende    0

Alan Rezende
Postado

 

Galera preciso pegar os dados do formulario e passar para uma url externa

 

formulario:

 

 

 

             <form target='iFrame' id="buscaAereo" method="POST" name="formularioAereo" action="busca.php">
                <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="Pesquizar" name="Pesquizar" class="btn btn-primary botao" value="Pesquizar">
                </div>
            </fieldset>
        </form>

e precisa ser retornado os valores na seguinte url:

http://www.portaldoagente.com.br/OTAFrame/SuiteAerea/guiAereoAeroportos.aspx?PesquisaAutomatica=S&Tipo=&Origem=&Destino=&Adultos=&Criancas=&Bebes=&DataIda=&DataVolta=&LojaChave=bG9qYXRlbXBvc3Jpbw==

 

e essa url caregada em um iframe, alguem pode me ajudar.. por favor nao tenho experiencia com javascript e ajax..

Amigo, vou te passar um script, porém ele envia somente dados recuperados de input type text, para recuperar os dados de select por exemplo você pode implementar o mesmo script porém com uma função separada e salvar o resultado em uma variável global e recupera-la no script que to te passando assim como a recuperação da imput.

 

Confesso pra ti que peguei teu código e passei horas tentando desenvolver algo pra recuperar os dados das selects porém não foi fácil e acabei não conseguindo.

Consegui em um script aparte identificar e recuperar os dados das selects em variaveis dentro da função porém para recuperar estas variaveis fora da função para exatamente coloca-la no meu script não consegui, se conseguir algo do tipo me avisa que implementamos.

 

Vamos lá!

 

Segue:

 

Para passar os dados para a URL destino você vai precisar de dois scripts, o primeiro chamaremos de script.js e o segundo de util.js.

O script.js fará todo o trabalho sujo e o script util.js criará um objeto de solicitação para enviar a nossa solicitação a URL.

 

Obs.: Terá que atualizar o código com as suas informações, pois fiz ele personalizado para uma situação minha.

 

(script.js)

 

 

window.onload = initPage; //este linha fora de função irá carregar a sua função initPage que será o ponto de partida pra todo o processo;
function initPage() {
document.getElementById("enter").onclick = checkUsername ;//esta linha irá capturar o clique do botão pesquisar e redirecionar o teu script para a função checkUsername que iniciará o processo de envio das informações para a URL.
}
function checkUsername() {
request = createRequest(); //recupera o objeto de solicitação criado no outro script (util.js);
if (request == null)
alert("Unable to create request"); //até aqui o script verifica se o objeto de solicitação é null se está afirmação for falsa ele inicia a execução do bloco de else.
else {
var theName = document.getElementById("username").value; //aqui crio as variaveis com as informações do formulario
var thePass = document.getElementById("password").value;//aqui crio as variaveis com as informações do formulario
var username = escape(theName); //aqui faço uma limpa nos caracteres invalidos da primeira variavel criada.
var password = escape(thePass);//aqui faço uma limpa nos caracteres invalidos da segunda variavel criada.
var url= "checkuser.php?username=" + username + "&password=" + password; //aqui recupero as informações e anexo elas na url de destino...
request.onreadystatechange = showUsernameStatus;//aqui é o callbak, neste caso redirecionando para outra função para continuar. no seu caso você pode colocar ao invés da função um redirecionamento tipo, location.href= (url); a url é a variavel de url criada já com as informações anexadas.
request.open("GET", url, true);//aqui configuramos a objeto de solicitação com os parâmetros de envio do formulário.
request.send(null);//aqui estamos dizendo para o objeto de solicitação que não temos mais nada para enviar que ele já pode seguir com a solicitaçãp
}
}
(util.js)
este é o arquivo separado que irá criar o objeto de solicitação;
function createRequest() {
try {
request = new XMLHttpRequest();
} catch (tryMS) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (otherMS) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}
return request;
}

 

Espero que tenha ajudado!

 

Abraços,

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito