Onclick checkbox create dynamic html element with value - javascript

Here is my code:
<script type="text/javascript">
function selectedone(str)
{
var classes = "";
$(':checked[class]').each(function(){
classes = $(this).attr("class");
});
var e = document.createElement('strong');
e.setAttribute('id',str);
$("#resultthis").append(e);
row = $("#resultthis").find('#'+str);
$(row).html(classes);
}
</script>
Here for check box:(This one running inside loop)
<input type="checkbox" onclick="resultthis(this.id);" value="<?php echo $a; ?>" id="<?php echo $a; ?>" class="<?php echo $b; ?>"/>
on click on this check box i need to get that class name and create tag inside (#resultthis) div dynamically and set value for that label same as class name.
My problem was every time i click check box its setting multiple time vaue in side label.
How to resolve this?

are you trying to achive this ?
if yes then you should use .html() instead of .append()
Fiddle demo

Related

Get the value through looping in jquery

for($i=0;$i<5;i++)
{
<h2><?php echo $value['asked_title'];?> </h2>
<input type="hidden" name="question_id" value="<?php echo $i; ?>" id="question_id" class="question_id" >
}
Jquery :
$('.question_title').click(function () {
var value = $('#question_id').val();
alert(value);
});
Friends in this code question_id will be carrying different values for the looping . Here I have writtern code to get the value according to the LOOPING on click of ahref class I would like to fetch the value of hidden value for example in the first iteration title is cow on click ahref it should alert 0 (question_id value). on click on 2nd title cat it should get alert 1 like on clicking 5 different title it should display 0-4 respectively but now onclick on different title it alerts only 0 not the other values . could any one suggest me how to achieve it .
Get the parent h2 and then next .question_id like following.
$('.question_title').click(function() {
var value = $(this).parent().next('.question_id').val();
alert(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Title 0</h2>
<input type="hidden" name="question_id" value="0" id="question_id" class="question_id">
<h2>Title 1</h2>
<input type="hidden" name="question_id" value="1" id="question_id" class="question_id">
BTW you are using same id question_id for multiple elements.
As 'id' is unique value, it will get only the first element.
Try this:
for($i=0;$i<5;i++)
{
<h2><?php echo $value['asked_title'];?> </h2>
}
Jquery :
$('.question_title').click(function()
{
alert(event.target.id);
});
For
<?php
for($i=0;$i<5;i++)
{
?>
<h2><?php echo $value['asked_title'];?> </h2>
<input type="hidden" name="question_id" value="<?php echo $i; ?>" id="question_id" class="question_id" >
<?php } ?>
And in script use
$('.question_title').click(function() {
alert($(this).attr("data-tell"));
});
You are having the same id question_id in all five hidden fields.
you can have it like this..
for($i=0;$i<5;i++)
{
echo '<h2>'.$value['asked_title'].'</h2>';
}
jquery
$('.question_title').click(function()
{
var value = $(this).data('value');
alert(value);
});

Change paragraph attribute to input tag

I tried following code in which I am trying to change paragraph tag to input fields through jquery on button click. I want my values to retain in the textbox when I click the button. Unfortunately, it isn't working! Here I have tried it with just name field. Any suggestions please.
code
<div id="menu2" class="tab-pane fade">
<h3>Address Book</h3>
<p>Default delivery address</p>
<?php
$em=$_SESSION['login_email'];
$query = mysqli_query($con,"SELECT * FROM customers where email='$em'" );
while($row=mysqli_fetch_assoc($query)){
?>
<h5>Name:</h5><p class="name" id="name"><?= $row['name'] ?></p>
<h5>Email:</h5><p class="mail"><?= $row['email'] ?></p>
<h5>Telephone:</h5><p class="tele"><?= $row['phone'] ?></p>
<h5>Address:</h5><p class="addres"><?= $row['address'] ?></p>
<h5>City:</h5><p class="city"><?= $row['city'] ?></p>
<?php
}
?>
<input type="button" id="update" value="Update Address" >
</div>
Jquery
<script src="js/jquery-1.6.2.js"></script>
<script>
$(document).ready(function() {
$('#update').click(function()
var input = $("<input>", { val: $(this).text(),type: "text" });
$('#name').replaceWith(input);
input.select();
});
});
</script>
Your code works, bar two errors. Firstly, you're missing a { after the click handler function definition. Secondly, this within the #update click handler refers to the button element, yet you're trying to read the val() of the #name input, so you need to change the selector. With that in mind, try this:
$('#update').click(function() {
var $name = $('#name');
var $input = $("<input>", {
val: $name.text(),
type: "text"
});
$name.replaceWith($input);
$input.select();
});
Working example
I would also be wary of having duplicated id attributes in your page as you are defining the elements in a loop. Should there be multiple rows returned from your query, then you will have multiple elements with the same id in the document which will lead to possible errors as the HTML will be invalid.

javascript function inside loop not working

I am displaying online users. When I click one of the user, corresponding user should be displayed in the text box below. I am using javascript for this, but it is taking only the first user. When I click the second user, first user is displayed in the below text box. Why is it taking only the first array?
<?php
foreach($query as $row)
{
?>
<input type="text" name="user" id="user" value="<?php echo $row->users;?> onclick="select_online()">
<?php
}
?>
<script>
function select_online()
{
var user=document.getElementById("user").value;
document.getElementById("usersonline").value=user;
}
</script>
Name:<input type="text" name="usersonline" id="usersonline">
First of all, using the same id for many elements is a mistake. You should make diverse id attribute for generated inputs.
Second, you should use this to get the value of the current element:
function select_online()
{
var user=this.value;
document.getElementById("usersonline").value=user;
}
document.getElementById("user") statement will always select the element which id attribute is equal to "user" and it will always be the same. Most probably, that is not what you want. If I understood you correctly, you want to get value of the clicked element, so as I mentioned before, you can achieve it using this expression, which points to the currently clicked element.
You should give a unique name to your inputs. You cannot reuse id="user" multiple times or javascript will not be able to find each input element.
The following would be better:
<?php
$id = 0;
foreach($query as $row) {
$id += 1;
?>
<input type="text" name="user" id="user-<?php echo "$i"; ?>" value="<?php echo $row->users;?> onclick="select_online(<?php echo "$i"; ?>)">
<?php
}
?>
<script>
// Move script outside loop
function select_online(i) {
var user = document.getElementById("user-" + i).value;
document.getElementById("usersonline").value = user;
}
</script>
Name:<input type="text" name="usersonline"id="usersonline">
As per the HTML standard, there should be unique id in a document. But in your case you are generating multiple input tags with id = user. Javascript's document.getElementById is able to get only element with id = user.
For this you can change your code like this:
<?php foreach($query as $row) { ?>
<input type="text" name="user" id="user" value="<?php echo $row->users;?>" onclick="select_online(this)">
<?php } ?>
<script>
function select_online(elm) {
var user=elm.value;
document.getElementById("usersonline").value=user;
}
</script>
Name:<input type="text" name="usersonline"id="usersonline">
Here onclick, we are passing the refferance of the input tag. So we can get the refferance of the clicked input.
<input type="text" name="user" id="user" value="<?php echo $row->users;?> onclick="select_online()">
You are setting id as user for all the users so when you use selector document.getElementById("user"), it always fetches the first row.
Never use same id for more than one element. It will always cause bugs.

Select an ID from a parent element in JQuery

I want to access the id of the parent element. This code I am using and it's not working
var tag_id= $('.tag').closest('.tag').attr('id');
alert(tag_id)
This is my html
<div class='tag' id='<?php echo "$id";?>'>
<span class='tagName' id='<?php echo "$tag_name";?>'>Something</span>
</div>
I am not using .click() or .hover()
Probably the html div is in a while loop so 10 records will come from the database and it shows the same id for all records
EDIT:
I have another var but I didn't include this is it:
var tag_name = $('.tag').children('.tagName').attr('id');
its the name of the tag even though it's coming same for all tags
I tried the code from the answer for the second one and it didn't work
Html:
<div class='tag' id="<?php echo $id;?>">
<span class='tagName' id="<?php echo $tag_name;?>">Something</span>
</div>
Jquery
$('.tag').find('.tagName').attr('id'); // get child id
$('.tag').attr('id'); // parent id
Try this :
var tag_id= $('.tag').attr('id');
alert(tag_id)

using jquery to find value of hidden form value

I hope someone has he answer to my problem...
I'm trying to use jquery to find the value of different hidden fields on a form. My problem is I have multiple forms appearing on the same page (items of a result set for updating) and the jquery only finds the value of the first field. When I click on the div to update the field I only get the ID of the first record.
Here is my code
repeated html
<ul class="task-container-item">
<form id="task-submit" method="post" name="form">
<input class="taskID" type="hidden" value="<?php echo $taskID;?>">
<li><?php echo $name;?></li>
<li><?php echo $date;?></li>
<li><?php echo $creator;?></li>
<li class="description"><?php echo $description;?></li>
</form>
</ul>
jquery
$(document).ready(function(){
$('.task-container-item').click(function(){
$(this).css("background","green")
$(this).css("color","#fff");
var taskID = $(".taskID").val();
alert (taskID);
});
});
Hope you can help
Thanks
Dave
You can iterate on the list of elements with given class:
var taskIDs = [];
$('.taskID').each(function() {
taskIDs.push($(this).val());
});
You'll have all the ids in the taskIDs array
update
$(document).ready(function(){
$('.task-container-item').click(function(){
$(this).css("background","green")
$(this).css("color","#fff");
var taskID = $(this) // Use the element that has been clicked on
.find(".taskID") // find the .taskID element in that
.val();
alert(taskID);
});
});
Perhaps you could have php increment the forms' inputs' id.
For instance:
<input class="taskID" type="hidden" id="taskid-1" value="<?php echo $taskID;?>">
and then for the next input
<input class="taskID" type="hidden" id="taskid-2" value="<?php echo $taskID;?>">
for(var x=0;x<?php echo $total_forms; ?>;x++){
//your processing code here
}
Try:
$('input[type=hidden]')
Then you could use .each() for each hidden field.

Categories