getting the value of a hidden input - php

I have this code:
<div id = "askpost" class="row">
<input type="hidden" name="askid" id="askid" value="<?php echo $askpostid ?>">
</div>
and i want to get the id of the hidden input but when tried using this:
<script>
$(document).ready(function() {
$('input[name="iaskcomment"]').on('keyup', function(e){
e.preventDefault();
var comment = $(this).val();
var ask_id = $(this).siblings('.askid').val();
alert(ask_id); <----undefined
});
});
</script>
i even used this code :
var sid = $(this).closest("div#askpost").find("input[type='hidden']").val();
but also i get "undefined". what i wanted to do is to get the id of $askpostid

direct use $("#askid").val(). No need to use anything like siblings()
Example:-
$(document).ready(function() {
$('input[name="iaskcomment"]').on('keyup', function(e){
e.preventDefault();
var comment = $(this).val();
var ask_id = $('#askid').val();
alert(ask_id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "askpost" class="row">
<input name = "iaskcomment"><br>
<input type="hidden" name="askid" id="askid" value="2">
</div>
Note:- Your code doesn't have any input with name iaskcomment. I have added in my example to just show you how it will work.So check at your end.

Related

jquery event method to get input

I've used jquery to get an "id" as a value for an input according to a dropdown value. Now the problem is, I want to use the 'id' to insert value to some other inputs. I don't know which event method to be used. For testing, I used the keyup method to check if the code works, when I manually type in a number, it works. So the problem is with the event method I choose. Please give me some suggestions.
//Get id
$(document).ready(function() {
$('#salary_eid').change(function() {
var sid = $(this).val();
var data_String = 'sid=' + sid;
$.get('search1.php', data_String, function(result) {
$.each(result, function(){
$('#can').val(this.c_id);
});
});
});
//display other information
$('#can').change(function() {
var id = $(this).val();
var data_String1 = 'id=' + id;
$.get('search.php', data_String1, function(result1) {
$.each(result1, function(){
$('#morning_rate').val(this.cMorning);
$('#night_rate').val(this.cNight);
$('#ot_rate').val(this.clientOt);
});
});
});
});
<label>Name</label>
<input type="text" name="salary_eid" />
<select id="salary_eid">
<option>opt1</option>
<option>opt2</option>
</select>
<input type="hidden" name="can" id="can" class="form-control" >
You can trigger the keyup() event from the id code, this will then work through a manual or jQuery edit,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
//Get id
$(document).ready(function() {
$('#salary_eid').change(function() {
var sid = $(this).val();
$('#can').val(sid).keyup();
});
});
//display other information
$(document).on('keyup', '#can', function() {
console.log($(this).val())
});
</script>
<label>Name</label>
<input type="text" name="salary_eid" />
<select id="salary_eid">
<option>opt1</option>
<option>opt2</option>
</select>
<input type="text" name="can" id="can" class="form-control" />
If you are going to hide the second input then I might suggest using a function instead without an input,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
//Get id
$(document).ready(function() {
$('#salary_eid').change(function() {
var sid = $(this).val();
display_info(sid)
});
});
//display other information
function display_info(value) {
console.log(value)
};
</script>
<label>Name</label>
<input type="text" name="salary_eid" />
<select id="salary_eid">
<option>opt1</option>
<option>opt2</option>
</select>

$(this).data("value") not passing value using $.post

My form
<div class="replymsg">
<form class="mainform" action="reply.php" method="POST">
<textarea class="replytext" ></textarea>
<button data-value="<?php echo $id; ?>"
class="replybutton">Submit</button>
</form>
</div>
$id comes from a MYSQL database. The following "test" code gives me the id of the reply form using Jquery:
<script>
$(".replybutton").click(function(){
alert($(this).data("value"));
});
</script>
Value of commentid :id is not passed when I use "actual" code for the website as follows (reply:replytext ... sends message is working):
<script>
$(document).ready(function(){
$(".replybutton").click(function(){
var id = $(this).data("value");
var replytext = $(".replytext").val();
$.post("reply.php",{ commentid: id, reply: replytext },function(data){
$("#result").html(data);
});
});
});
</script>
Any ideas,any help is appreciated?
Most probably you should stop the form to submit if you are using ajax because a buttons default behavior is to submit the form:
<script>
$(document).ready(function(){
$(".replybutton").click(function(e){
e.preventDefault(); //<---------------stops the form submission here
var id = $(this).data("value");
var replytext = $(".replytext").val();
$.post("reply.php",{ commentid: id, reply: replytext },function(data){
$("#result").html(data);
});
});
});
</script>
or add a type to the button:
<button type='button' data-value="<?php echo $id; ?>" class="replybutton">Submit</button>
//------^^^^^^^^^^^^
another way is to use .submit() event:
<script>
$(document).ready(function(){
$(".mainform").submit(function(e){ //<-----pass the event here
e.preventDefault(); //<---------------still you need this
var id = $(this).find('.replybutton').data("value"); // find the elements
var replytext = $(this).find(".replytext").val(); // and here.
$.post("reply.php",{ commentid: id, reply: replytext },function(data){
$("#result").html(data);
});
});
});
</script>
and in this case you don't need to have a type to your button, but it's good to have it.
Submitting form with AJAX
In form
<div class="replymsg">
<form class="mainform" action="" method=" ">
<textarea class="replytext" ></textarea>
<input type="text" value="<?php echo $id; ?>" name="comment_id" id="comment_id" style="display: none"> <!-- this contain the ID-->
<input type="submit" class="replybutton" id="replybutton" value="Submit">
</form>
</div>
use AJAX
<script>
$(function(){
$( "#replybutton" ).click(function(event)
{
event.preventDefault();
var comment_id = $("#comment_id").val();
var replytext = $(".replytext").val();
$.ajax(
{
type:"post",
url: "./reply.php",
data:{ id:comment_id, reply:replytext,},
success:function($data)
{
$("#result").html(data);
}
});
});
});
</script>
$(document).ready(function(){
$(".replybutton").click(function(e){
e.preventDefault();
var id = $(this).data("value");
var replytext = $(this).prev().val();
$.post("reply.php",{ commentid: id, reply: replytext
},function(data){
$("#result").html(data);
});
});
});
Thanks for the help,I figured it out,my problem was sending Id and replytext in a comment/reply system when clicking replybutton. Working code above.

Jquery Onclick Change hidden parameter and submit

Hi i'm using php and jquery. I have create dinamically a list of a div like that
<div class="divclass" id="<?php echo $i-1;?>">
<a href=" <?php echo $this->url(array('controller'=>'controller name','action'=>'action name'));?>">
<span>Date: </span>
</a>
</div>
My javasctipt script is, i pick the name of the id clicked, i set the hidden parameter to the name of the id and i want to submit the form
<script type="text/javascript">
$(document).ready(function() {
$('.divclass').click(function(){
var idarray = $(this).attr("id");
document.getElementById('testo').value=idarray;
document.forms["prova"].submit();
});
});
The form is:
<form id="prova" method="post" action="<?php echo Zend_Controller_Front::getInstance()->getBaseUrl().'/controller-name/action-name';?>">
<input type="hidden" value="" id="testo">
</form>
</script>
But in the next page i don't have the post parameter.
You need to give name attribute to #testo and then try this:
e.g
<input type="hidden" value="" id="testo" name="testo">
Your form is within <script> tag, Place it outside of <script> tag.
and write following code within DOM ready like follwing:
<script type="text/javascript">
$(function() {
// after DOM ready
$('.divclass').click(function(){
var idarray = $(this).attr("id"); // or this.id do the same thing
$('#testo').val(idarray); // set value to testo
$("form#prova").submit(); // submit the form
});
});
</script>

Jquery Ajax selectors

Im trying to make something like this http://demos.99points.info/facebook_wallpost_system/ which is a comment system. I have the ajax code below except i don't know how to uniqely select textareas. The challenge is that the number of posts is variable so all of the posts need to be uniquely identified so that when the data is put into the database i know which post it relates to.
JQUERY:
<script type='text/javascript'>
$('document').ready(function(){
$('.commentContainer').load('../writecomment.php');
//commentContainer is a class so it applies to all of the textareas, but i need this selector to be unique
$('.submitCommentBox').click(function(){
//these are the selectors that i can't get to work right
var comment = $('').val();
var postid = $('').val();
$.post('../comment.php',
{
comment: comment,
postid: postid,
},
function(response){
$('#commentContainer').load('../writecomment.php');
$('.commentBox').val('');
}
}
return false;
}):
});
</script>
HTML/PHP
<?php while ($row=mysql_fetch_assoc($query)){
echo"
<p name='singlePost'>$post[$f]</p>
<div id='commentContainer'></div>
<textarea class='commentBox'></textarea>
<input type='button' value='submit' class='submitCommentBox'>";
}
basically the HTML/PHP generates for each post on the page as to create a textarea and subimt button for each post. therefore the user can comment on each post.
Using the markup in the link you provided, I would do something like:
var container = $(this).closest('.friends_area');
var comment = $(container).find('.commentbox').val();
var questionid = $(container).find('#hidden').val();
var answerid = $(container).find('').val();
A more correct solution would be something like:
HTML
<div id="posting">
<form method="post" action="">
<input type="hidden" name="record_id" value="123" />
<textarea name="comment"></textarea>
<button type="submit">Comment</button>
</form>
...
</div>
JS
$('#posting').on('submit', 'form', function(e) {
e.preventDefault();
var form = $(this).closest('form');
$.post($(form).attr('action'), $(form).serialize(), function() {
$('#commentContainer').load('../writecomment.php');
$('.commentBox').val('');
});
});

How to write data option in jQuery.ajax() function when it include in a php mysql_query?

I want to add a comment system after my article,
php part code
<?php
...
while($result = mysql_fetch_array($resultset))
{
$article_title = $result['article_title'];
...
?>
<form id="postform" class="postform">
<input type="hidden" name="title" id="title" value="<?=$article_title;?>" />
<input type="text" name="content" id="content" />
<input type="button" value="Submit" class="Submit" />
</form>
...
<?php
}
?>
ajax part:
$(function($) {
$(document).ready(function(){
$(".Submit").click(function(){
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
var anyBlank = 0;
if(anyBlank == "0")
{
var title = $("#title").val();
var content = $("#content").val();
$.ajax({
type: "POST",
url: "ajax_post.php",
data: "title="+title+"&content="+content,
success: function(date_added){
if(date_added != 0)
{
structure = '<div class="comment_date_added">'+date_added+'</div><div id="comment_text"><div id="comment_content">'+content+'</div>';
$("#post_comment").prepend(structure);
}
});
});
ajax_post.php
echo $title;
echo $content;//get $title and $content and insert into database.
my question: <form id="postform" class="postform"> is written into a MYSQL_QUERY result circle. how to modify ajax part so that every div.submit can post its own value to ajax_post.php and then return the data into $("#post_comment").prepend(structure); Thanks to all.
You have to give the input fields a class instead of an ID. IDs have to be unique in an HTML document:
<form class="postform">
<input type="hidden" name="title" class="title" value="<?=$article_title;?>" />
<input type="text" name="content" class="content" />
<input type="button" value="Submit" class="Submit" />
</form>
Then you can make the data lookup relative to the clicked element:
var title = $(this).siblings('.title').val();
var content = $(this).siblings('.content').val();
I also suggest to pass an object to the data attribute for automatic URL encoding of the values:
data: {title: title, content: content}
Then, when you create a new entry for the #post_comment section, you have to give these elements also a class instead of an ID (and don't forget to use var!):
var structure = '<div class="comment_date_added">'+date_added+'</div><div class="comment_text"><div class="comment_content">'+content+'</div>';
or more jQuery like:
$('<div />', {class:'comment_data_added'})
.append($('<div />', {class: 'comment_date_added', text: date_added}))
.append($('<div />', {class: 'comment_content', text: content}))
.prependTo('#post_comment');
Further notes:
You have somehow a nested ready() handler:
$(function($) { // <--┐
$(document).ready(function(){ // <--┴- this is the same
//...
});
});
Either do:
jQuery.noConflict();
jQuery(function($) {
$('.Submit')...
)};
or
$(function() {
$('.Submit')...
)};
This part in the click handler:
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
var anyBlank = 0;
does not seem to do anything. Besides that, the submit button has no ID and no name.
Depending on the further structure of your PHP code, you should have a look at the alternative syntax for control structures. It makes easier to mix PHP and HTML without fiddling around with brackets.

Categories