Everything is ok in my code but jQuery does not affect the code at all. I have ascss.css and other file that I have include and all of them work but this animation (fadeIn) does not
<head>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$document.ready(function(){//this code does not run
$(".btn").submit(function(){
$(".find").fadeIn(3000);
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="searchFile.php">
<table>
<tr><br>
<td >id :</td>
<td><input name="id" type="text" maxlength="40" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input name="search" type="submit" value="search" class="btn"/></td>
</tr>
</table>
</form>
<?php
if(isset($_POST['id']) and !empty($_POST['id']) and strlen($_POST['id'])==10)
{
require_once("staticfileread.php");
$s=staticfileread::search($_POST['id']);
echo "<br><br><div class='find'>$s</div>";
}
?>
</body>
</html>
First: $document is undeclared, so you'll throw a reference error.
$document.ready(someFunction) should be $(document).ready(someFunction), or the short hand: $(someFunction).
Second: Submit events fire on forms not submit buttons.
Third: Even if the event handler was called, it is entirely possible that the form would finish submitting and a new page load before the content you were fading in had appeared.
Fourth: You only show $(".find") after the new page has loaded anyway, and it appears to be visible by default so there is nothing for it to fade in from.
$document.ready(function() {
// Should be:
$(document).ready(function() {
When that is said; You can shorten the .ready function down to:
jQuery(function($) {
// Same as $(document).ready(function() {});
});
Also note that you properly want to change:
$(".btn").submit(function() { ...
// Buttons doesn't emit a submit event, but forms do:
$("#form1").submit(function() { ...
There are two problems with your code:
$document should be $(document)
The submit() listener can only be bound to <form> elements. It should be $("#form1").submit().
in your code jquery code need to start like
$(document).ready(function() {
// need to write your code here
});
check it once..
Related
I'm increasing my system by entering the functionality of loading a page inside a div dynamically, in the other words, the central area of the page is updated. For this I am using the JQuery. But even I having a problem which is the following, when submitting the same FORM one has to load the next page via JQuery-Ajax to send the post to use the data on this second page.
The funny thing is that I'm not getting the pick. Submit() the FORM always and only in one case. I will post the HTML below the two situations:
In the html code below warning test that I created within the form.submit () is being displayed.
<form id="form" accept-charset="utf-8" name="frmPadrao" method="POST" action="HTTP://localhost/fwsibe/index.php/acesso/listarSistemasValidar">
<br>
<fieldset id="tabelainfo" style="width: 560px;">
<legend style="color: #083C06;">
<b>Dados</b>
</legend>
<br>
<table id="tabelainfo">
<tbody>
<tr>
<td>
<b>SIBE:* </b>
</td>
<td>
<select name="slSibe">
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td colspan="2">
<input class="button" type="submit" value="Confirmar" name="btConfirmar">
</td>
</tr>
</tbody>
</table>
</fieldset>
<br>
<br>
</form>
In the second code warning. Submit () is not displayed, or is not recognized submission form:
<form id="form" accept-charset="utf-8" name="frmPadrao" method="POST" action="HTTP://localhost/sibe/index.php/almembal/motivoajustealm/pesquisar">
<br>
<fieldset id="tabelainfo" style="width: 560px;">
<legend style="color: #083C06;">
<b>Filtrar por:</b>
</legend>
<br>
<table id="tabelainfo">
<tbody>
<tr>
<td>
<b>SubTipo Produto:* </b>
</td>
<td>
<select name="slSubTipo">
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td colspan="2">
<input class="button" type="submit" value="Confirmar" name="btConfirmar">
</td>
</tr>
</tbody>
</table>
</fieldset>
<br>
<br>
<div>
<a title="" onclick="window.open('HTTP://localhost/sibe/index.php/almembal/motivoajustealm/incluir', '_blank', 'width=800,height=600,scrollbars=yes,status=yes,resizable=yes,screenx=0,screeny=0');" href="javascript:void(0);">Incluir</a>
</div>
<br>
<table id="tabelainfo">
<tbody>
<tr id="corpotabela">
<td align="center">Não existem Motivos de Ajuste cadastrados para esta pesquisa.</td>
</tr>
</tbody>
</table>
</form>
Below the JQuery script that is already properly initialized in the HEAD of the page, in addition, already tested for other enventos as $ (this). Click and everything is ok.
$(document).ready(function() {
$("#form").submit(function() {
alert("SUBMIT FORM");
// alert($(this));
// console.log($(this));
// $.post($(this).attr("action"), $(this).serialize(), function(data) {
// $("#divCentral").html(data);
// });
// return false;
});
});
Could you help me find the bug that causes. Submit () is not recognized by JQuery?
Edited:
I already discovered the source of the problem. Looks like that when the component is drawn for a page loaded by jquery-ajax, the event .submit() doesn't works, but when the page is loaded for default away, the event works.
The problem is that the is loaded by Ajax, and the JQuery function don't recognize it. I'am creating the function for load the central page of the template by a ajax request to a file. I have two functions, the first just for test, and the second I'am creating for works with the $_POST. The JQuery function for now is well:
function carregaUrl(url) {
//alert("carregaUrl=" + url);
$("#divCentral").load(url);
console.log($('form').attr('name'));
}
function carregaUrl2(url) {
var data = $("form").serialize();
$.ajax({
type: "POST",
url: url,
data: data
}).done(function(data) {
$("#divCentral").html(data);
});
}
What is happening here, is that the handler fires, starts the alert, and then form submit occurs, effectively reloading your page.
You need your event handler to return false if you want to prevent this submit and stay on your current page, or add an alert to the page you're going with this submit.
If you want to stay on your current page, try this:
jQuery(function($){
function formSubmit(form) {
$.post(form.attr('action'), form.serialize(), function(data){
$("#some-outer-container-with-form").html(data);
});
$("#form").submit(function(){ return formSubmit(form) }); //we need to rebind
return false;
}
$("#form").submit(function(){ return formSubmit( $(this) ) });
});
I am trying to assign a session variable whenever an event is triggered (using Javascript here). But I'm failing to make it happen so that it's loaded just after the body of my page loaded, not the after event generated like pressing a button.
I have two pages: one is to check wether the session var is set. If yes, then perform the action and destroy it.
Another one is a huge page in which it is included as a sub page (using include), and it is a form, which is submitted to itself, making it reload. Now that subpage will have set a session whenever an event is generated (like pressing a submit button, and clicking a button).
first.php --> session checking and destroying
second.php --> session initialisation and assigning
And both are iterative.
I can use a back-end to store the data but that huge page has some restrictions not to include other dbs inside it.
first.php
<?php
session_start();
print_r($_SESSION);
var_dump($_SESSION);
if(isset($_SESSION['submit']) && isset($_SESSION['click']) ) {
echo "passed both tests";
unset($_SESSION['submit']);
unset($_SESSION['click']);
session_destroy():
}
var_dump($_SESSION);
print_r($_SESSION);
var_dump($_SESSION);
?>
second.php(form)
<?php
session_start();
?>
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<script type="text/javascript">
function submit_valid(){
<?php
$_SESSION['submit']='yes';
?>
}
</script>
<script type="text/javascript">
function click_valid1(){
document.getElementById('submitButton').disabled=true;
<?php
$_SESSION['click']='clicked';
?>
window.location.replace("first.php");
}
</script>
<script type="text/javascript">
function load_valid3(){
<?php
$_SESSION['submit']='no';
$_SESSION['clicked']='not';
?>
}
</script>
<script type="text/javascript">
setTimeout (function(){
document.getElementById('submitButton').disabled = null;
},10000);
var countdownNum = 10;
incTimer();
function incTimer(){
setTimeout (function(){
if(countdownNum != 0){
countdownNum--;
document.getElementById('timeLeft').innerHTML = 'Time left: ' + countdownNum + ' seconds';
incTimer();
} else {
document.getElementById('timeLeft').innerHTML = 'Ready!';
}
},1000);
}
</script>
<title></title>
</head>
<body onload="return load_valid3()">
<form action="search.php" method="get" onsubmit="return submit_valid()">
<table border="2" width="150" cellpadding="0" cellspacing="2">
<tr>
<td align="center">
<input type="text" id="query" name="query" size="30" value="">
</td>
<td align="center">
<input type="submit" value="Search"> <input type="hidden" name="search" value="1">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="SUBMIT" disabled="disabled" id="submitButton" onclick="return click_valid1()">
</td>
<td align="center">
<p id="timeLeft">
Time Left: 10 seconds
</p>
</td>
</tr>
</table>
</form>
</body>
</html>
Is there any concept of static variables in PHP? So that I can get rid of this situation.
Despite not really knowing where you are going with this:
Using jQuery I exemplary implemented your first JS-function "valid()":
function valid() {
$.ajax({
type: "POST",
url: "first.php",
data: {
"color": "red"
}
});
}
This is how you update the session variable.
$_SESSION['color'] = $_REQUEST['color']
I still do not really see what the point of the "valid" functions are but maybe this shows you where you could go.
Try to seperate javascript function calls from the form submit action. You may use "isset function" with "if condition statements" to check whether the form is submitted or not. Something like:
if(isset($_GET['submit']))
{
}
I have a php script page with a form like this:
<form method="post" action="clientmanager.php">
<input type="text" name="code_client" id="code_client" />
<input type="submit" value="Save" />
</form>
In my file "clientmanager.php", I have a function for example "addClient()".
I want to click the button and only call the function "addClient()" in the file "clientmanager.php" instead of call the whole file "clientmanager.php", So how could I do??
Thx!!!!
Add this to the top of the file:
if (isset ($_POST ['code_client'])) addClient();
However, you should consider using a different setup - processing forms like this is considered bad practice.
Maybe create a separate file, use OOP, MVC, a framework, anything other than this.
You can do that over jquery (ajax).
Call jquery library in head
Call clientmanager.php over this code:
my_form.php
....
<script type="text/javascript" src="jquery.js"></script>
...
<form method="post" action="">
<input type="text" name="code_client" id="code_client" />
<input id="my_button" type="button" value="Save" />
</form>
<div id="response_div"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#my_button").click(function(){
$.post("clientmanager.php", {code_client: $('#code_client').val()}, function(data){
if(data.length >0) {
$('#response_div').html(data);
}//end if
});
});
});
</script>
clientmanager.php
<?php
echo $_POST['code_client'];
?>
this a simple example in how to submit form using the Jquery form plugins and retrieving data using html format
html Code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
// prepare the form when the DOM is ready
$(document).ready(function() {
// bind form using ajaxForm
$('#htmlForm').ajaxForm({
// target identifies the element(s) to update with the server response
target: '#htmlExampleTarget',
// success identifies the function to invoke when the server response
// has been received; here we apply a fade-in effect to the new content
success: function() {
$('#htmlExampleTarget').fadeIn('slow');
}
});
});
</script>
</head>
<body>
<form id="htmlForm" action="post.php" method="post">
Message: <input type="text" name="message" value="Hello HTML" />
<input type="submit" value="Echo as HTML" />
</form>
<div id="htmlExampleTarget"></div>
</body>
</html>
PHP Code
<?php
echo '<div style="background-color:#ffa; padding:20px">' . $_POST['message'] . '</div>';
?>
this just work fine
what i need to know if what if i need to Serialize the form fields so how to pass this option through the JS function
also i want show a loading message while form processed
how should i do that too
thank you
To serailize and post that to a php page, you need only jQuery in your page. no other plugin needed
$("#htmlForm").submit(function(){
var serializedData= $("#htmlForm").serialize();
$.post("post.php", { dat: serializedData}, function(data) {
//do whatever with the response here
});
});
If you want to show a loading message, you can do that before you start the post call.
Assuming you have div with id "divProgress" present in your page
HTML
<div id="divProgress" style="display:none;"></div>
Script
$(function(){
$("#htmlForm").submit(function(){
$("#divProgress").html("Please wait...").fadeIn(400,function(){
var serializedData= $("#htmlForm").serialize();
$.post("post.php", { dat: serializedData},function(data) {
//do whatever with the response here
});
});
});
});
The answer posted by Shyju should work just fine. I think the 'dat' should be given in quotes.
$.post("post.php", { 'dat': serializedData},function(data) {
...
}
OR simply,
$.post("post.php", serializedData, function(data) {
...
}
and access the data using $_POST in PHP.
NOTE: Sorry, I have not tested the code, but it should work.
Phery library does this behind the scenes for you, just create the form with and it will submit your inputs in form automatically. http://phery-php-ajax.net/
<?php
Phery::instance()->set(array(
'remote-function' => function($data){
return PheryResponse::factory('#htmlExampleTarget')->fadeIn('slow');
}
))->process();
?>
<?php echo Phery::form_for('remote-function', 'post.php', array('id' => ''); ?> //outputs <form data-remote="remote-function">
Message: <input type="text" name="message" value="Hello HTML" />
<input type="submit" value="Echo as HTML" />
</form>
<div id="htmlExampleTarget"></div>
</body>
</html>
i can not use this keypad plugin on multiple fields. The first one works perfect but the other ones do not work. what do i need to do to make it work on all?
<script type="text/javascript">
$(function () {
$('#item_fee').keypad();
});
</script>
</head>
<body>
<tr>
<?
$query="SELECT * FROM item WHERE orderr_reference ='$ref' order by item_name";
$result=mysql_query($query);
$num=mysql_numrows($result);
$i=0;
while ($i < $num) {
$item_fee = mysql_result($result,$i,"item_fee");
?>
<td><input name="item_fee[]" id="item_fee" type="text" value="<?=$item_fee;?>" size="6" /></td>
</tr>
<? $i++; } ?>
ID's are unique in any one html page try this:
JS
<script type="text/javascript">
$(function () {
$('.keypad input').keypad();
});
</script>
Make it work for all inputs in another element with the keypad class
HTML
<body>
<table class="keypad">
Also make sure to update your html and remove the duplicate ID's.
id's are supposed to be unique for each html element in a webpage.
so change id="item_fee" to class="item_fee"
like so <td><input name="item_fee[]" class="item_fee" type="text" value="<?=$item_fee;?>" size="6" /></td>
and then you cane write in jquery
$(function () {
$('.item_fee').keypad();
});