This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I have php comment system like Facebook where user can post comment and reply. when I make 2 reply in a comment one after one then I cannot make 3rd reply in same comment. Also here cannot work emoticons slide and upload toggle. But can reply others comments. I cannot understand this type of jQuery behaviour!!! I also can't understand, can php create this type of problem?
For emoticons display yet I create review window behind textarea And make my textarea transparent. So here I used jQuery bind(). All comment and reply submit by AJAX.
When i going to reply 3rd time Its not work in same comment. But after refresh its work for more 2 reply only.
Here is some related jQuery:
$('.maintbox').on('keyup',function() {
$(this).css('height','auto');
$(this).css('height',Math.max(this.scrollHeight)+'px');
});
$('.replycom').livequery("click",function() {
var VID = $(this).attr('id').replace('replycom','');
$("#parent_id").attr("value", VID);
$("#replycom"+VID).bind("keyup", function() {
$("#replycom"+VID).html($(this).val());
$(".review"+VID).html(smilyMe($("#replycom"+VID).val()));
});
return false;
});
$('.showhide_emobox').livequery("click",function(){
var EID = $(this).attr("id");
$("#emobox"+EID).slideToggle();
});
$(".embtno").livequery("click",function(event){
var emotiText = $(event.target).attr("alt");
var EID = $(this).attr('id').replace('','');
var prevMsg = $("#replycom"+EID).val();
$("#replycom"+EID).val(prevMsg + emotiText);
$(".review"+EID).html(smilyMe($("#replycom"+EID).val()));
$('#emobox'+EID).fadeToggle();
});
my form:
echo'<div class="replyform"><ul>
<form action="" method="post" class="repfrm'.$rows['id'].'" id="prepfrm">
<fieldset id="cmntfs">
<input type="hidden" name="username" id="author" value="'.$_SESSION['username'].'"/>
<input type="hidden" name="url" id="url" value="" />
<div class="maintbox">
<div class="chat">
<div class="review'.$rows['id'].'" id="review"></div>
<textarea name="replycom" id="replycom'.$rows['id'].'" class="replycom" placeholder="Type your comment ..."></textarea>
</div>
<div align="right"><img src="images/envlop.png" width="25" alt="" class="uploadReply" id="'.$rows['id'].'" style="padding:2px;cursor:pointer;" />
<div class="em">
<img src="images/smile.png" id="'.$rows['id'].'" class="showhide_emobox"/>
<div id="emobox'.$rows['id'].'" class="emobox">
<img src="smilies/smile.gif" alt=":)" class="embtno" id="'.$rows['id'].'" />
<img src="smilies/sad.gif" alt=":(" class="embtno" id="'.$rows['id'].'" />
<img src="smilies/biggrin.gif" alt=":-D" class="embtno" id="'.$rows['id'].'" />
</div>
</div>
</div>
<input type="hidden" name="parent_id" id="parent_id" value="'.$rows['id'].'" />
<input type="hidden" name="tutid" id="tutid" value="'.$tutid.'" />
</form>
// Image upload system here
</div>
<button type="submit" name="submit" value="" id="repl'.$rows['id'].'" class="replyfrm">Post Reply</button>
</fieldset>
</ul></div>';
You are using:
$("#replycom"+VID)
There can be only one id of the same name. Your first reply gets unique id, your second reply gets duplicate, and your code stops to work.
Related
I am still working on my school project, which is almost finished.
With your help, I successfully created a working system that allows users to write, edit and delete data to/from the database.
The only problem I have right now us "user-friendly form." I managed to create auto-focus, insert correct values on edit so the user can see what was previously written in that field, etc.
I have my forms hidden with jquery. When a user clicks add, the form slides in. What I need to achieve is: "when a user clicks submit and the page refreshes and adds the element to the database, the form should appear again so users can add data faster."
Here is my code.
$(document).ready(function() {
$('#x').click(function() {
$('.y').toggle("slide");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="x">Click</div>
<div class="y" style="display: none;">
<div class="container">
<form action="insertzunanja.php" method="POST" id="x">
<input type="hidden" name="narocilo" value="0.1412312">
<input type="hidden" name="id" value="id-1">
<input type="text" name="dolzina" style="width:49%;" placeholder="Dolzina (v cm)">
<input type="text" name="sirina" style="width:49%;" placeholder="Sirina (v cm)">
<input type="text" name="kolicina" value="1" style="width:49%;" placeholder="Kolicina">
<input type="text" name="opombe" style="width:49%;" placeholder="Opombe">
<input type="submit" value="Send">
</form>
</div>
</div>
Thanks and best regards.
You can use AJAX call to send the data to php file instead of form action. According to your code you will have something like this:
<div id="x">Dodaj</div>
<div class="y" style="display: none;">
<div class="container">
<input type="hidden" name="narocilo" value="<?php echo $randomNum; ?>">
<input type="hidden" name="id" value="<?php echo $id; ?>">
<input type="text" name="dolzina" style="width:49%;" placeholder="Dolzina (v cm)">
<input type="text" name="sirina" style="width:49%;" placeholder="sirina (v cm)">
<input type="text" name="kolicina" value="1" style="width:49%;" placeholder="Kolicina">
<input type="text" name="opombe" style="width:49%;" placeholder="Opombe">
<input id="sub" type="submit" value="Send">
</div>
</div>
$(document).ready(function(){
$('#x').click(function() {
$('.y').toggle("slide");
});
});
$("sub").click(function(){
$.post("insertzunanja.php",
{
dolzina: $("input[name=dolzina]"),
sirin: $("input[name=sirina]")
},
function(){
$("input[name=dolzina]").val("");
$("input[name=sirina]").val("");
if($('.y').is( ":hidden" )) {
$('.y').toggle("slide");
}
});
});
Basically, when you click on button you call php with AJAX POST request passing two values dolzina and sirin retrieved by the html code(note: you have more values to pass so change it accordingly) to php file. Jquery deletes the values of the input fields and check if input fields are shown. If not the inputs fields are shown.
If you are using PHP to process the form submission and generate the code in your question, and you always want the form to be displayed after submission, you can do this:
At the PHP code identify submission (e.g. isset($_REQUEST['id']) ).
[if #1 is true] On generating jQuery code, add $('.y').show(); within the ready function (but separated from the existing click function).
Example:
<?php
// your existing code...
?>
$(document).ready(function() {
<?= ( isset($_REQUEST['id']) ? '$(".y").show();' : '' ); ?>
$('#x').click(function() {
$('.y').toggle("slide");
});
});
<?php
// your existing code...
?>
Hi I try to research my problem via Stack about 3 hours but I still not found.
So I decide to create the topic to ask about my problem.
I am creating search engine and the below are the result:
If I type test text into input form then click "enter" button from keyboard, the search result will working correctly.
If I type test text into input form then click "Search" button from webpage, the search result is not working.
My problem is result No 2.
This is my code:
<form action="search_content.php" method="POST" >
<div class="input-group mainsearch-home">
<input type="text" class="input-group-field" name="homesearchfield" id="homesearchfield2" placeholder="What are you looking for?" autocomplete="off">
<div class="input-group-button">
<button type="button" class="button button--search" >search</button>
<input type="hidden" name="homesearchfield" value="search">
</div>
</div>
</form>
What I do wrong?
I thought that my problem is happens from input type hidden data.
So I would like to know how to get value from input text box and send value to my target page.
I have added some php code from my "response" page on below.
$viewstate = isset( $_POST["homesearchfield"] ) ? $_POST["homesearchfield"] : "" ;
$sql="SELECT * FROM `article` WHERE topic_article LIKE '%$viewstate%' order by id_article DESC";
Currently your form doesn't know that the button is meant to submit the form, which can be fixed by changing the type on the button:
<button type="submit" class="button button--search" >search</button>
You could also use:
<input type="submit" class="button button--search" value="search" />
An option for controlling the data is using JavaScript / jQuery to control the action of the form. This way also allows you to view the data being posted before its actually sent and you can even comment out the post and just work on getting the form with the right data you are looking to get back.
also for serialize to work, you need to have a name for each item you want to pass back data.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script lang="JavaScript">
$(function(){
$("#button").click(fuction()
{
var formData = $("#form").serialize();
alert(formData);
/*
$.post({"search_content.php",
formData,
function(returndata)
{
//do something
//this will load the return data into the div tag on the fly
$("#divReturn").html(returndata);
},
"text"
});
//*/
});
});
</script>
<form id="form" onsubmit="return false;" >
<div class="input-group mainsearch-home input-group--search inputs--raspberry">
<input type="text" class="input-group-field" name="homesearchfield" id="homesearchfield2" placeholder="What are you looking for?" autocomplete="off">
<div class="input-group-button">
<button type="button" class="button button--search" id="button" name="button" value="search" >search</button>
</div>
</div>
</form>
<div id="divReturn">
</div>
Hello Everyone I am new to php and doing a project. My Problem is I am working on review page and fetching data from 3 tables using while loop.
The problem is I want to create comment reply system. I am using text area for comment in loop and showing the text area on button click but when I am click on button, each text area gets visible which I don't want. I think problem is due to while loop.
Please suggest me a proper idea.
Thank u in advance.
Php part:
<div class="feedback-list">
<!--img class="doc-img"src="img/doc-img.png" alt="tempimg" height="100" width="100"/>
<div class="feedback-header"-->
<?php
while($row1=mysql_fetch_array($result1))
{
$username1=$row1['username'];
$rtitle=$row1['reviewtitle'];
$rexperience=$row1['experience'];
echo '<div class="feedback"><img class="doc-img" src="img/doc-img.png" alt="temp img" height="100" width="100"/><div class="feedback-header">Rivew by '.$username1.'
<span class="stars" id="star1"><img src="img/stars.png"/></span>
</div>
<p> '.$rtitle.'</p><br/>
<p> '.$rexperience.'</p>
<form action="submitcomment.php" method="post" name="frms">
<!--button type="submit" onclick="showCommentBox()">Reply</button><br/-->
<input type="button" value="Reply" onclick="showCommentBox('.$row1['reviewid'].')"><br/>
<div class="hidden" id="comment">
<!--p>Comments and suggestions:<br><textarea name="comments" rows="3" cols="30" ></textarea><br><br>
<input type="submit" name="sub" value="Confirm"></p-->
</div>
</form>
<span class="read-more">Read More</span>
<span class="added-by">added on 25 March</span>
</div>';}?>
Script:
<script type="text/javascript">
function showCommentBox(x){
//alert(x);
var div=document.getElementById('comment');
div.className='visible';
document.getElementById("comment").innerHTML =
'<br/><textarea maxlength="5000" cols="30" rows="3" name="comments"></textarea>' +
'<input type="submit" name="sub" value="Confirm">';
}
</script>
ALL of your comment boxes have the same DOM ID:
<div class="hidden" id="comment">
^^^^^^^^^^^^
This is not permitted. An ID must be unique across the entire page. Because of this, getElementById() will only ever return ONE element which matches, which is generally the FIRST matching element it finds - there is no point in continuing to search for something of which only one can exist, right?
You probably want something more like
<div class="hidden" id="comment{$id}">
<button onclick="showComment($id);" >
function showComment(id) {
foo = document.getElementById('comment' + id);
}
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Reading a File's Metadata
i have this form where i am uploading mp3 files but i want users to upload music and all details like author,title etc of mp3 should automatically filled in form field.i am using php and want any php/javascript method which can find out the name of the file from local machine and put that name in my form title field
my form is given below. i dont want users to enter title,author etc
<form enctype="multipart/form-data" method="post" action="http://youshare.ca/music/writestorypost"><p><span class="form_label">Name of the song</span><input type="text" value="" name="title" style="width:400px" class="inputText required"></p><p><span class="form_label">Description</span>
<textarea class="rich" style="width:580px" rows="18" name="form_content"></textarea>
</p><p><span class="form_label">Tags</span>
<input type="text" value="" style="width:300px" name="tags" class="inputText">
<span>Multiple tags should be Separated with commas(,)</span>
</p>
<p><label>Upload</label><input type="file" name="song">
<span>Only mp3 is accepted</span></p>
<p><label>Music source</label>
<input type="radio" checked="1" value="own" name="musicsource">My own
<input type="radio" value="others" name="musicsource">From another musician
</p>
<div style="display:none" id="ms_others">
<p><label>Musician name</label><input name="musician"></p>
</div>
<div id="ms_own">
<p></p>
</div>
<p><label>Picture (Optional)</label><input type="file" name="picture">
<span>A picture about the song or the musician</span></p>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("input[value='own']").click(
function() {
$("#ms_others").hide();
$("#ms_own").fadeIn();
}
);
$("input[value='others']").click(
function() {
$("#ms_own").hide();
$("#ms_others").fadeIn();
}
);
})
</script><p><input type="submit" value="Submit" class="button"></p><input type="hidden" value="935" name="page_id"></form>
You will need to populate your MP3's details after the file is uploaded, unless they manually type in all information.
On the PHP side, you can install the following: PHP ID3
There are examples there on how to read ID3 tags from files.
I am trying to make a small form that lets the user pick one element from 3 different radiobutton lists to set one element as the users active element (that will be stored to MySQL). Somehow along the way it does not work and I can not seem to figure out why, perhaps someone of you can see what I did wrong?
HTML:
<form name="activeForm1" method="post">
<fieldset data-role="controlgroup">
<div class="ui-radio">
<input type="radio" name="active" value="1" id="1">
<label for="1"></label></input>
</div>
<div class="ui-radio">
<input type="radio" name="active" value="2" id="2">
<label for="2"></label></input>
</div>
<div class="ui-radio">
<input type="radio" name="active" value="3" id="3">
<label for="3"></label></input>
</div>
</fieldset>
<div data-role="footer">
<input type="submit" href="#" onclick="setActive(1)"/>
</div>
</form>
JavaScript / Ajax call
function setActive(formid)
{
$.ajax(
{
type:'POST',
url:'active.php',
data:$('#activeForm'+formid).serialize(),
success:function(response)
{
}
}
);
}
PHP code:
session_start();
include('connectToDb.php');
$id = $_SESSION['id'];
if (isset($_POST['active']))
{
$formValue = $_POST['active'];
mail('my#mail.com','Test',$formValue,'From: dummy#mail.com');
mysql_query(/* UPDATE MySQL */);
header("Location: main.php");
}
else
{
mail('my#mail.com','Test','No data recieved!','From: dummy#mail.com');
}
So it works up until the if (isset($_POST['active'])) but then mails me that no data was recieved. I already have 2 similar forms on the same page and they are way bigger and has no problems running. Can't figure out what I did wrong here.
Wrong code :
data:$('#activeForm'+formid).serialize(),
#activeForm is not an id, it is the name of the form tag,
Correct the form tag to,
<form name="activeForm1" id="activeForm1" method="post">
Replace following line
data:$('#activeForm'+formid).serialize(),
with
data: $('form[name="activeForm'+formid+'"]').serialize(),
change
<input type="submit" href="#" onclick="setActive(1)"/>
to
<input type="button" href="#" onclick="setActive(1)"/>
and then it should work