Jump to content

Form submit - ajuda jquery

jonhyhvaftn

By jonhyhvaftn
in Javascript

 Share
Go to solution Solved by tiago.f,

Recommended Posts

jonhyhvaftn boolean user

jonhyhvaftn

Posted
Posted

Olá a todos..

Tenho o seguinte form:

<form id="uploadform" method="post" target="frame" enctype="multipart/form-data" action="makefileup.php">

E o seguinte botão submit:

<input type="submit" value='Add' name="submitbtn" id="submitbtn" onclick='btnf(<?php echo $_GET["id"]; ?>)'>

Acontece que, se eu tiver o onclick no botão submit, o form não faz post. Nada acontece.

Então lembrei-me do seguinte:

$('#submitbtn').click(function() {
$('#uploadform').submit();
});

Mas igualmente nada acontece....

Alguém me consegue ajudar?

Link to comment
Share on other sites
jonhyhvaftn boolean user

jonhyhvaftn

Posted
  • Author
Posted

Não percebo bem o que queres fazer.

Se queres correr algum Javascript antes da form ser submetida, então o melhor é usar o evento onsubmit do form (e não do botão).

Qual é o objectivo?

E podes mostra o html todo?

Básicamente eu quero fazer o upload de uma imagem sem fazer refresh à página, e a melhor maneira que achei para o fazer é correr o PHP num iframe oculto, dado que usando JSON não posso fazer upload de imagens, pelo menos ainda não achei nada na net...

Anyway, a minha ideia é quando faço submit do form, ele vai correr o tal PHP na tal iframe, até aqui tudo bem e tudo funcional...

Mas ao mesmo tempo quero fazer refresh à tabela por baixo do form e para isso teria de correr um jquery ao mesmo tempo que faço o form submit, e não acontece isso, nem mesmo com o onsubmit como me disses-te agora 😞

WVXDd.png

Vê se consegues ter mais ou menos uma ideia a partir daí...

O Código posso mostrar sim, se ajudar...

HISTORY.PHP

<?php
include("database.php");
$id = $_GET['id'];
if(!isset($_COOKIE['loggedin'])){

   header("Location: index.html");

}
?>
<html>
<head>
 <title>ESTAMO - History</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <meta name="description" content="" />
 <meta name="keywords" content="" />
 <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
 <script src="js/jquery.min.js"></script>
 <script src="js/jquery.dropotron.min.js"></script>
 <script src="js/jquery.scrollgress.min.js"></script>
 <script src="js/skel.min.js"></script>
 <script src="js/skel-layers.min.js"></script>
 <script src="js/init.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script src="js/javascript.js"></script>
 <noscript>
  <link rel="stylesheet" href="css/skel.css" />
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/style-wide.css" />
	    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 </noscript>
</head>
<body class="landing">
 <!-- Banner -->
    <?php

    $result = $link->query("SELECT * FROM imovel WHERE id='".$id."'");
    while($row = $result->fetch_assoc()){

    ?>
  <section id="banner">
   <h2>ESTAMO</h2>
   <p>PARTICIPAÇÕES IMOBILIÁRIAS, SA</p>
  </section>
 <!-- Main -->
  <section id="main" class="container mainPage">


		  <section class="box">
			  <?php
			    $getMainImg = $link->query("SELECT * FROM imagens WHERE id_imovel='".$row['id']."' ORDER BY id ASC LIMIT 1");
			    while($rmainimg = $getMainImg->fetch_assoc()){

			  ?>
    <span class="image fit"><img id="mainGallery" src="<?php echo "uploads/".$rmainimg['link']; ?>" alt="" /></span>

			  <? } ?>

    </section>

    <!-- Table -->
   <section class="box">

						    <form id="uploadform" method="post" target="frame" enctype="multipart/form-data" action="makefileup.php">
						    <iframe style="display: none;" name="frame"></iframe>
						    <center><div class="row uniform half collapse-at-2">

							    <div class="2u">
								    <select name="tag">
								    <?php $qrGetTags = $link->query("SELECT * FROM tags");
									    while($getTags = $qrGetTags->fetch_assoc()){?>

									    <option value="<?php echo $getTags['nome']; ?>" name="<?php echo $getTags['nome']; ?>"><?php echo $getTags['nome']; ?></option>

									    <? } ?>
									    <option value="addnew">-- Add new tag --</option>
								    </select>
							    </div><div class="3u">
								    <input type="text" placeholder="Brief description" name="description">
							    </div><div class="2u">
								    <input type="text" id="date" name="date">
							    </div><div class="2u">
								    <input type="text" placeholder="Value" name="value">
							    </div><div class="1u">
								    <label for="fileup"><i class="fa fa-file fa-2x"></i></label><input type="file" name="fileup" style="display: none;" id="fileup">
							    </div><div class="2u" id="submitdv">
							    <input type="hidden" name="idd" value="<?php echo $_GET['id']; ?>">
							    <input type="submit" value='Add' name="submitbtn" id="submitbtn" onsubmit='btnf(<?php echo $_GET["id"]; ?>)'>
							    </div>

							    </div></center>

						    </form>

   </section>

					    <section class="box" id="listh"><?php echo $_GET['id']; ?></section>


    </section>

		  <? } ?> 
 <!-- Footer -->
  <footer id="footer">
   <ul class="copyright">
 <li>Copyright © 2015 Estamo. Todos os direitos reservados.</li><li>Design: <a href="#">Simple | Design Consulting</a></li>
   </ul>
  </footer>
</body>
</html>

MAKEFILEUP.PHP

<?php
include("database.php");
$tag = $_POST['tag'];
$description = $_POST['description'];
$date = $_POST['date'];
$value = $_POST['value'];
$id = $_POST['idd'];
$link->query("INSERT INTO insercao (tag,descritivo,data,valor,id_imovel) VALUES ('".$tag."','".$description."','".$date."','".$value."','".$id."')");
?>

Javascript.JS

function itemHistory(id){

	   window.location.replace("history.php?id="+id);

}

$("#date").ready(function(){

   var d = new Date();
   var dateNow = d.getFullYear() + "/" + (d.getMonth()+1) + "/" + d.getDate();
   $("#date").attr("value",dateNow);

});

function setFilter(name){

   $("tr."+name).fadeOut();
   $("a#"+name).attr("style","color: red;");
   $("a#"+name).attr("onclick","removeFilter('"+name+"')");
}
function removeFilter(name){

   $("tr."+name).fadeIn();
   $("a#"+name).attr("style","color: black;");
   $("a#"+name).attr("onclick","setFilter('"+name+"')");

}
$("#listh").ready(function(){
   var idIm = $("#listh").html();
   $.get("listh.php?id="+idIm, function(html) {
   $('#listh').html(html);
   });

});

$('#submitbtn').click(function() {
$('#uploadform').submit();
});

function btnf(id){


   $("#submitdv").html('<i class="fa fa-spinner fa-2x fa-spin"></i>');

   setTimeout(
 function()
 {
   $("#submitdv").html('<input type="submit" value="Add" name="submitbtn" id="submitbtn" onclick="btnf('+id+')">');
   $("#listh").fadeOut();
   $.get("listh.php?id="+id, function(html) {
   $('#listh').html(html);
   });
   $("#listh").fadeIn();

 }, 2000);

}
Link to comment
Share on other sites
tiago.f try-catch user

tiago.f

Posted
Posted (edited)

para correres javascript ao mesmo tempo que o form upload, colocas o teu codigo no evento onsubmit do form

onsubmit="fazerCenas(); return true;"

ou se queres só submeter conforme o resultado/return da tua função fazerCenas:

onsubmit="return fazerCenas();"

e tens que devolver true ou false desta função.

Ainda assim, repara que a função é executada antes do submit.

Se queres só correr depois de teres a certeza que o submit correu bem, então tens que o fazer (provavelmente, nunca usei) no onload to teu iframe.

Se fizeres isto, tens que fazer associar o teu fazerCenas ao onload do iframe só quando se carregar no submit.

algo tipo:

<form id="uploadform" method="post" target="frame" enctype="multipart/form-data" action="makefileup.php" onsubmit="$('#frame').load(fazerCenas); return true;">

Assim o teu fazerCenas é despoletado quando o iframe carregar (depois de submeter apenas, e não no load orignal da página..

Edited by tiago.f
Link to comment
Share on other sites
tiago.f try-catch user

tiago.f

Posted
Posted

Se o teu form está assim

<form id="uploadform" method="post" target="frame" enctype="multipart/form-data" action="makefileup.php"
onsubmit="$('#frame').load( function() { alert('submitted'); } ); return true;">

e

o teu submit assim

<input type="submit" value='Add' name="submitbtn" id="submitbtn">

devia funcionar e aparecer um alerta a dizer "submitted".

Se não dá só mesmo testando e vendo. Não tenho ambiente do meu lado para isso.

Já usaste os dev tools do firefox para ver o que se está a passar?

Já agora, podes por o MAKEFILEUP.PHP a imprimir alguma coisa, a ver se aparece no frame? (e pôr o frame visivel claro!)

Link to comment
Share on other sites
  • Solution
tiago.f try-catch user

tiago.f

Posted
  • Solution
Posted

Tem que ser

$('#frame')

e o frame tem que ter o id="frame"

Testei com isto e deu: (repara que pus o frame sempre visível e o action do form a "", para poder testar localmente) 

<html>
<head>
<title>ESTAMO - History</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

</head>
<body class="landing">
<!-- Banner -->
<section id="banner">
<h2>ESTAMO</h2>
<p>PARTICIPAÇÕES IMOBILIÁRIAS, SA</p>
</section>
<!-- Main -->
<section id="main" class="container mainPage">

<section class="box">

</section>
<!-- Table -->
<section class="box">
<form id="uploadform" method="post" target="frame" enctype="multipart/form-data" action="" onsubmit="alert('A');$('#frame').load(function() { alert('B'); }); return true;">
 <iframe id="frame" name="frame"></iframe>
 <center>
	 <div class="row uniform half collapse-at-2">
		 <div class="2u">
			 <select name="tag">
				 <option value="addnew">-- Add new tag --</option>
			 </select>
		 </div>
		 <div class="3u">
			 <input type="text" placeholder="Brief description" name="description" />
		 </div>
		 <div class="2u">
			 <input type="text" id="date" name="date" />
		 </div><div class="2u">
		 <input type="text" placeholder="Value" name="value" />
	 </div><div class="1u">
	 <label for="fileup"><i class="fa fa-file fa-2x"></i></label><input type="file" name="fileup" style="display: none;" id="fileup">
 </div><div class="2u" id="submitdv">
 <input type="hidden" name="idd" value="">
 <input type="submit" value='Add' name="submitbtn" id="submitbtn">
</div>
</div></center>
</form>
</section>
<section class="box" id="listh"></section>

</section>

<!-- Footer -->
<footer id="footer">
<ul class="copyright">
 <li>Copyright © 2015 Estamo. Todos os direitos reservados.</li><li>Design: <a href="#">Simple | Design Consulting</a></li>
</ul>
</footer>
</body>
</html>
 

Faz alerta de "A" antes de submeter e de "B" depois do frame ser carregado com a resposta..

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.