jQuery, PHP form echo does not work - php

Could you guys let me know what is wrong below, for some reason, when I click on the delete image, which is supposed to return the echo from dela.php file, but does not.
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#del_form').ajaxForm({
target: '#del',
success: function() {
$('#del').fadeIn(40000);
}
});
});
</script>
<div>
<form action="dela.php" id="del_form" method="post">
<input type="image" src="del.gif" id="al_del" value="clicked" />
click the image on the left
</form>
</div>
<div id="del" style="background-color:#FFFF99; width:200px; height:100px;"></div>
// dela.php
<?
if ($_POST['al_del']) {
echo 'variable pass success';
}
?>

POST variables are based on input names, not ID's, afaik.
Also I'd usually go
if(isset($_POST['al_del']))
But that's a side bar.

You forgot to put the name attribute.
changing
<input type="image" src="del.gif" id="al_del" value="clicked" />
to
<input type="image" src="del.gif" id="al_del" name='al_del' value="clicked" />
may fix it.

fadeIn takes duration as milliseconds. Your fade in takes 40 seconds... is this what you want?
Although this is not the problem, you should consider to write
$('#del').fadeIn('slow');

Related

Form Submit Button Works, but not Submit() in Link

I've done this so often before on different websites, but can't get it to work now.
I've got a simple form that posts perfectly well using a submit button, but for a specific reason I actually need it to submit via a url link instead. I'm using submit(). The form submits, but the data isn't posting.
What am I missing?
<html>
<body>
<?
if(isset($_POST['bar'])) { echo 'testing button<br>'; }
if(isset($_POST['information'])) {
echo $_POST['information'];
echo '</br>Info successfully posted.';
}
?>
<form action="test.php" method="post" id="fooform">
Hello World.<br>
Select checkbox: <input type="checkbox" id="information" name="information" value="yes">
<input type="submit" name="bar" value="Send"><br>
Confirm and Post<br>
Post Directly
</form>
<script type="text/javascript">
function SubmitForm(formId) {
var oForm = document.getElementById(formId);
alert("Submitting");
if (oForm) { oForm.submit(); }
else { alert("DEBUG - could not find element " + formId); }
}
</script>
</body>
</html>
The form starts to submit, then the href of the link is followed, and this cancels the form submission.
If you are using old-style onclick attributes, then return false; at the end to prevent the default action.
You would, however, be better off using a submit button (you are submitting a form). You can use CSS to change its appearance.
Try this code :
<html>
<body>
<?php
if (isset($_POST['bar'])) {
echo 'testing button<br>';
}
if (isset($_POST['information'])) {
echo $_POST['information'];
echo '</br>Info successfully posted.';
}
?>
<form action="test.php" method="post" id="fooform">
Hello World.<br>
Select checkbox: <input type="checkbox" id="information" name="information" value="yes">
<input type="submit" name="bar" value="Send"><br>
Confirm and Post<br>
Post Directly
</form>
<script type="text/javascript">
function SubmitForm(formId) {
var oForm = document.getElementById(formId);
alert("Submitting");
if (oForm) {
oForm.submit();
}
else {
alert("DEBUG - could not find element " + formId);
}
}
</script>
</body>
</html>
try to submit form with form id in jquery
<a class="submit">Post Directly </a>
$('a.submit').click(function(){
$('#fooform').submit();
})

A textbox will appear when a checkbox is clicked works on jsfiddle but not on my browser

Good day! Basically, I want a textbox to appear when a checkbox is clicked and disappear when unclicked. Here is the JSFiddle http://jsfiddle.net/GBSZ8/2/ and it works just fine. However, when I saved it as check.php, the text box doesn't appear even if I click the checkbox.
<html>
<head>
<script>
$('#supplied').live('change', function(){
if ( $(this).is(':checked') ) {
$('#date').show();
} else {
$('#date').hide();
}
});
</script>
</head>
<body>
<input type="checkbox" name="supplied" id="supplied" value="supplied" class="aboveage2" />
<ul id="date" style="display:none">
<li><input id="start" name="start" size="5" type="text" class="small" value="1" /></li>
</ul>
</body>
</html>
Please help me. Thank you!
You have to include JQuery in your file. Put
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Above your first tag.
Feel free to change the version number as appropriate or adjust the url to go to a local version of the jquery .js file
You probably need to wrap it in onLoad as well as Paarth's answer.
$(document).ready(function() {

Combing JS and PHP on one button. Is it possible?

Hiya:
i know some people would be so tired of my questions, but I'm working on a uni project and need to get it done as soon as possible. This question is about using JS on a button(button) and sending a php_my_sql update on the same button. The problem is JS uses button, right? but PHP uses button(submit). How can I get these two to work on one of these buttons, cuz there has to be only one button.
this is my code for JS
<script type="text/javascript">
function formAction(){
var x=document.getElementById("collect")
x.remove(x.selectedIndex)
}
</script>
HTML
<form method="post">
<select id="collect" name="Select1" style="width: 193px">
<option>guns</option>
<option>knife</option>
</select> <input type="**submit/button**" onclick="formAction()" name="Collect" value="Collect" /></form>
PHP
<?
if (isset($_POST['Collect'])) {
mysql_query("UPDATE Player SET score = score+10
WHERE name = 'Rob Jackson' AND rank = 'Lieutenant'");
}
?>
This can be a way
Submit the form through JS after removing parameter
<script type="text/javascript">
function formAction(){
var x=document.getElementById("collect")
x.remove(x.selectedIndex);
document.forms[0].submit();
}
</script>
Input type button
<input type="button" onclick="formAction()" name="Collect" value="Collect" />
Embed jQuery and use $.post() to send an AJAX request.
JavaScript can interact with the button whilst the user is navigating the page and entering data into the form. The instant the user pushes the submit button and the request for the form submission is sent JS no longer has control. The request is sent to the form's action (most likely a PHP file) which processes the request and gives an answer back.
If you really need to combine the two, look into AJAX.
<?php print_r($_POST); ?>
<script type="text/javascript">
function formAction(){
var x=document.getElementById("collect");
x.remove(x.selectedIndex);
submit_form();
}
function submit_form() {
document.form1.submit();
}
</script>
<form method="post" name='form1'>
<input type='hidden' name='Collect'/>
<select id="collect" name="Select1" style="width: 193px">
<option>guns</option>
<option>knife</option>
</select> <input type="button" onclick="formAction()" name="Collect" value="Collect" /></form>
<?
if (isset($_POST['Collect'])) {
//do whatever update you want
}
?>
Simple Solution
Make this modification in the form tag
<form method="post" onsubmit="return formAction()">
In JavaScript function add a line "return true;" at the end of the function.
Voila ..!!! you are done..!!
Enjoy..!!

check filename before posting using jquery/ php

I need jquery to check if my posted filename (up_image) is empty or not.
if it's empty i need a div tag to be shown and come with some kind of alert message.
if not, just do the
$("#submit").submit();
<form action="/profile/" method="post" enctype="multipart/form-data" id="submit">
<p>
<label for="up_image">image:</label>
<input type="file" name="up_image" id="up_image" />
</p>
Upload
</form>
$(function() {
$("#post_submit").click(function() {
var fil = $("#up_image");
if($.trim(fil.val()).length == 0) {
alert("Choose a file!");
fil.focus();
return false;
}
$("#submit").submit();
});
});
1: use a standard submit button to submit your form rather than a javascript-dependent link, for accessibility reasons, and to prevent brokenness if someone tries to right-click-open-in-new-window or other similar action on the link. If you want it to look like a link, you can still use a button, just apply some CSS to make it no longer look like a button.
2: use the form.onsubmit event to do validation rather than relying on a submit button click (forms can also be submitted by pressing enter, which may not always generate a button click)
<form id="uploadform" method="post" action="/profile/" enctype="multipart/form-data">
<p>
<label for="up_image">image:</label>
<input id="up_image" type="file" name="up_image" />
</p>
<p>
<input type="submit" value="Upload" />
</p>
</form>
<script type="text/javascript">
$('#uploadform').submit(function(e) {
if ($('#up_image').val()=='') {
alert('Please choose a file to upload.');
e.preventDefault();
}
});
</script>

PHP/JavaScript How to combine 2 page in one

I need a reference on how to make 2 pages become one.
Originally i have 2 php pages. View.php and comment.php
The view.php will have a link to call comment.php. When click the 'comment' link, it will open comment.php like pop up. After fill in the comment, and click send, it will closed and return the view.php.
The problem is, Instead of popup i want it hide until i click it. I dont know what is the exact term to call this process. I know it got something to do with javascript, using id, onclick function and similar to frame function. Because i dont know what it call, it hard for me to research. So anyone please tell me what it called or gimme any references or example solution on how to do it.
thank you very much
UPDATED:
dear all..
found this code in internet. Like RageZ said..it uses css and javascript to show and hide img. how to use for others?
do i need to convert my comment.php into a function and put in view.php n use the id for that function. is it possible?
<html>
<head>
<script>
function changeme(id, action) {
if (action=="hide") {
document.getElementById(id).style.display = "none";
} else {
document.getElementById(id).style.display = "block";
}
}
</script>
</head>
<body>
<img id="myIMG" style="display: none;" src="question.php.html"width="100" height="100" />
<span onclick="changeme('myIMG', 'show');" style="color: blue; text-decoration: underline; cursor: pointer;">Show the image</span>
<span onclick="changeme('myIMG', 'hide');" style="color: blue; text-decoration: underline; cursor: pointer;">Hide the image</span>
</body>
</html>
I think what your looking for is something like Greybox?
It opens a new pag ontop of the page, instead of opening a popup, you best check out the examples, they will be way more clear than anything I can say here.
You can do the described process for example with the following:
view.php
<script language="JavaScript">
function openComment(id) // Open comment.php in a new window and send the id of the thing you want to comment
{
window.open('comment.php?id='+id, '_blank');
}
</script>
Comment
comment.php
<?php
if ( isset($_POST['msg']) && intval($_POST['id']) > 0 ) // If a comment is sent and the id is a number > 0
{
/* Write your message to db */
?>
<!-- Reload the underlying window and close the popup -->
<script language="JavaScript">
window.parent.reload();
window.close();
</script>
<?php
}
else // Show the Form to post a comment
{
?>
<form name="comment" action="comment.php" method="POST">
<input type="hidden" name="id" value="<?php echo $_GET['id'] ?>" />
<input type="text" name="msg" value="Input your comment here" />
<input type="submit" value="Submit" />
</form>
<?php } ?>
you can use Ajax/DHTML to make the popup and post the data to the server in the same page.
I think you would need a framework to do that quick there is a lot of javascript framework around:
jquery
dojo
ExtJS
prototype
All I have forgotten

Categories