I am trying to get the value of the hidden field to the next page using PHP's $_POST and submit the function via jQuery, but it does not work.
Part of CSS OOP
<ul>
<li class="selectable" id="cakeType-<?= $cake->id ?>">
<a href="?cakeType=<?php echo ($cake->id); ?>" title="Selecteer">
<?php if ($cake == $order->cakeType){?><span class="checked"></span><?php } ?>
<img src="data/<? echo $cake->id ?>.jpg" alt="" width="50" height="50" /></a>
</li><?php } ?></ul>
My form
<form id="formhide" method="post">
<input name="img" type="text" value="" id="hiddenimg" action="stap2.php"/>
</form>
jQuery
$(function(){
$('a img').click(function(e) {
var photo=$(this).attr('src');
$("#div1 img:last-child").remove()
$('#div1'). append('<img src="' + photo + '" />') ;
$('#hiddenimg').val(photo);
console.log( $('#hiddenimg').val() );
e.preventDefault();
});
$('a.nextStep').click(function() {
if (debug) { alert('submit!') };
$('#formhide').submit();
});
Next page as the form gets submited
$img=$_POST['img'];
echo $img; // the value of my hidden field does not show up i get error msg
$_SESSION['img']=$img;
What's wrong with the above code?
http://api.jquery.com/jQuery.noConflict/
jQuery.noConflict()
Related
I have working code for posting data to DB using PHP and Jquery without refreshing the page.
But however, I could only use 1 form with the given code, if I'm to add another form with different variables both the forms getting submitted.
My code goes as:
index:
Query starts
$countlikes = 1;
$countdislikes = 1;
<form data-id='<?= $countlikes?>' action="likeinsert" method="post" id="myform<?= $countlikes?>">
<input type="hidden" id="fid<?= $countlikes?>" name="fid" value="<?php echo $f_id; ?>" />
<input type="hidden" id="uid<?= $countlikes?>" name="uid" value="<?php echo $u_id; ?>" />
<button style="border:none; background:transparent;" data-toggle="tooltip" data-placement="right" title="Like" class="up"><i class="fa fa-thumbs-o-up"></i><?= $f_likes; ?></button>
</form>
<form data-id='<?= $countdislikes?>' action="dislikeinsert" method="post" id="myform<?= $countdislikes?>">
<input type="hidden" id="fid<?= $countdislikes?>" name="fid" value="<?php echo $f_id; ?>" />
<input type="hidden" id="uid<?= $countdislikes?>" name="uid" value="<?php echo $u_id; ?>" />
<button style="border:none; background:transparent;" data-placement="right" data-html="true" title="DisLike" class="down"><i class="fa fa-thumbs-o-down"></i><?= $f_dislikes; ?></button>
</form>
$countlikes ++;
$countdislikes ++;
Query Ends
<script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
$(document).on('submit','form',function(e){
e.preventDefault();
let id = $(this).data('id');
$.post(
'likeinsert.php',
{
fid: $("#fid"+id).val(),
uid: $("#uid"+id).val()
},
function(result){
if(result == "success"){
$("#result").val("Values Inserted");
} else {
$("#result").val("Error");
}
}
);
});
</script>
<script>
$(document).on('submit','form',function(e){
e.preventDefault();
let id = $(this).data('id');
$.post(
'dislikeinsert.php',
{
fiid: $("#fid"+id).val(),
uiid: $("#uid"+id).val()
},
function(result){
if(result == "success"){
$("#result").val("Values Inserted");
} else {
$("#result").val("Error");
}
}
);
});
</script>
When I to click on any form button, both forms are getting submitted.
It is happening, because you are adding two submit event listeners on both forms, so when you submit one form, both jquery scripts are getting executed.
To prevent this, add form's unique ids to your event listeners (in your case they are myform1 and myform1, but you should make them unique), somewhat like this:
$(document).on('submit','form#dislikesForm',function(e){
request to dislikeinsert.php ...
$(document).on('submit','form#likesForm',function(e){
request to likeinsert.php...
I am using a form to allow file download and to store the number of downloads but now I can't seem to find a way to fadeIn a subscribe div (#cover) on form success..
This is my form:
<form action="<?php $_SERVER['PHP_SELF']; ?>" method="post" name="free-download" id="free-download">
<button class="download" type="submit" name="clicks" onclick="window.open('download/imagins_._ro_free_files_format_icons.rar')">download (<span class="small"><?php echo getClickCount(); ?> times</span>)</button>
</form>
Is there a jquery way of doing this?
This is what I tried:
$("#free-download").bind('ajax:complete', function() {
$('#cover').fadeIn(600);
$('body').addClass('hidescroll');
});
Update
By changing the form action to <?php echo $_SERVER['PHP_SELF']; ?>
and adding the following (below) I managed to add an echo to the page
on form success, but how do I have the #cover div fadeIn?
<?php
if(isset($_POST['clicks']))
{
echo "<p class='section-desc'>You just downloaded it</p>";
}
?>
Working solution
Use php to echo a script tag containing whatever you want to achieve
on submit success (in my case, a div fadeIn).
<?php
if(isset($_POST['clicks']))
{
echo '
<script type="text/javascript">
$(function() {
$( "#cover").fadeIn();
});
</script>';
}
?>
i found this code to upload profile image,
http://www.phpdevblog.eu/2011-04/combined/jquery-ajax-and-php-based-profile-image-upload-without-reloading-the-page.html#comments
everything are fine. but i want to set a name file = user_id
how i pass the input hidden user_id value to the php upload file process?
var uploadURL = "processupload.php";
$(document).ready(function(){
$('a#uploadFile').file();
$('a#delete').click(function(){
$('input#profileImageFile').val("");
$('img#profileImage').attr("src","/images/styles/profileBlank.jpg");
$('div#messageBox').html("Image deleted !");
$('div#messageBox').attr("class","success");
$('a#delete').hide();
});
$('input#uploadFile').file().choose(function(e, input) {
input.upload(uploadURL, function(res) {
if (res=="invalid"){
$('div#messageBox').attr("class","error");
$('div#messageBox').html("Invalid extension !");
}else{
$('div#messageBox').attr("class","success");
$('div#messageBox').html("Imagen cargada !");
$('img#profileImage').attr("src","/images/avatars/"+res);
$('input#profileImageFile').val(res);
$('a#delete').show();
$(this).remove();
}
}, '');
});
});
html
<div class="imageContainer">
<img alt="" src="/images/avatars/<?php echo $row_rs_user['user_image']; ?>" width="150" height="150" id="profileImage">
<img alt="" src="/images/styles/upload.jpg">
<img alt="" src="/images/styles/delete.jpg">
<input type="hidden" name="user_id" value="<?php echo $row_rs_user['user_id']; ?>">
<div id="messageBox"></div>
</div>
PHP upload process
if(isset($_POST))
{
.
.
.
.
I'm not familiar with the plugin you are using to handle the uploads, but if the form elements are hitting the PHP as they should, you simply can call
$fileId = $_POST['user_id'];
This will set a variable in your PHP Process equal to the hidden value. Make sure you include it within the ISSET conditional as not to cause any errors.
Just pass the information through the uploadURL:
input.upload(uploadURL + "?user_id=" + $("input[name=user_id]").val(), function(res) {});
Make sure the name of the hidden input holding the user id is 'user_id'.
Server side in PHP you can read the value of the variable with isset($_REQUEST['user_id']).
I have web application in PHP and i need some variables in this page to get refreshed automatically. Therefore i have put that processing in another page - "test.php" - which gets loaded into this div every 10 seconds.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval( function ()
{
$('#refresh').load('test.php').fadeIn("slow");
}, 10000);
</script>
</head>
<body>
<div id="refresh">
</div>
</body></html>
The problem is that this page has a form which on clicking, doesn't not submit the values and do the processing as it is supposed to do. Without the auto refresh code, it works fine. How do i overcome this problem?
the test.php contains this form:
<form action="count.php" method="post">
<?php
$votes = getVoteCount($popular[$i][1]);
$voted=checkVoted($screenName,$id);?>
<td><img src="<?php echo $popular[$i][4]; ?>" width=60></td>
<td align="center"><CITE><?php echo "#".$username; ?></CITE>
<?php echo "<br >".$text.
"<br >".$votes." votes |";?>
<?php
if($screenName!=$username && $voted==false){
?>
<input type="hidden" name="addID" value="<?php echo $id;?>">
<input type="hidden" name="username" value="<?php echo $screenName;?>">
<INPUT TYPE="image" src="images/vote.png" name='vote' ALT="Submit Form" onMouseOver="this.src='images/vote_link.png'"
onMouseOut="this.src='images/vote.png'" width="35" height="20" title="Click to Vote!"></form>
<?php }else if($voted){ ?>
<img src="images/voted.png" width="35" height="20" title="You have already voted">
<?php } else{
echo "<img src='images/authored.png' width='40' height='20'>";
}?>
Because you're reloading the page with ajax requests you no longer can use
$("submit-button").click()
or
$("submit-button").submit();
You will need to use either jquery's live, delegate, or on to do this. (Live is no longer a recommended way of doing this.
$("body").on("click", "submit-button", function()
{
//execute code here
});
or
$("body").on("submit", "submit-form", function()
{
//execute code here
});
I currently have a table of about 30 rows and I would like to make <td> clickable in each case:
<tr height="100px" align="center">
<?php do { ?>
<td style="background-color: <?php echo $row_dd1['colour']; ?>;">
<form action="pay.php?id=<?php echo $row_dd1['dNo']; ?>&user=<?php echo $username; ?>" method="post">
<input type="hidden" id="<?php echo $row_dd1['dNo']; ?>"><input type="hidden" value="<?php echo $username; ?>">
<button type="submit" class="link" id="t<?php echo $row_dd1['dNo']; ?>"><span><?php echo $row_dd1['dNo']; ?></span></button></form>
</td>
<?php } while ($row_dd1 = mysql_fetch_assoc($dd1)); ?>
</tr>
How do you make the table cell clickable? I would like it to have the same link as the form action that I have used which is:
<form action="pay.php?id=<?php echo $row_dd1['dNo']; ?>&user=<?php echo $username; ?>" method="post">
This is a perfect example of where to use .delegate(), like this:
$("#myTableID").delegate("td", "click", function() {
$(this).find("form").submit();
});
.delegate() attaches one handler to the <table>, rather than n handlers, one per cell. If you just want to navigate to the URL, it would look like:
$("#myTableID").delegate("td", "click", function() {
window.location.href = $(this).find("form").attr("action");
});
To actually submit the form:
$('td > form').each(function(i,e){
var form = $(this);
var cell = form.parent();
if(cell.is('td')){
cell.click(function(){
form.submit();
});
}
});
If you jsut want to follow the link instead, jsut modify the form.submit() part to change window.location.href with form.attr('action').
What about jQuery's click-event?
$('td').click(function () {
$('form', this).submit();
return false;
});
This submits the form inside the clicked <td>.