We Keep Coding

jQuery code called from PHP won't execute

I'm developing a Wordpress site that (of course) is composed of multiple PHP templates. The particular template fragment I'm having problems with is called with this line:
<script id="templatehidden">
<?php get_template_part( 'fragments/calculator', 'row-sa' ); ?>
</script>
And the contents of calculator-row-sa.php are:
<div class="form-row pricingrow select-multiple">
<div class="form-controls">
<img class="remove-field-sa" style="float: left; margin-right: 30px;" src="http://45.32.89.214/wp-content/uploads/2016/04/minus.png">
<i style="margin-left: 50px;" class="cardinal"></i>
<select name="field-followers[]" class="select followerselect">
<?php foreach ( $options as $option ) : ?>
<option value="<?php echo $option[ 'value' ] ?>"><?php echo $option[ 'label' ] ?></option>
<?php endforeach; ?>
</select>
<b class="fa fa-caret-down" aria-hidden="true" style="color: #747474";></b>
<span class="acctprice"></span>
</div><!-- /.form-controls -->
And the jQuery code behind it is
$('.remove-field-sa').click(function () {
$(this).closest('.form-row').remove();
});
My problem is with the img element inside the php. When the page first loads, it does its job and removes the row it's on. However, after I add more rows, no javascript code seems to execute within .form-content anymore. Any ideas on what's wrong?

Assuming that you are adding the rows using javascript, you need event delegation: At the moment you bind your even handler, the elements don't exist and when you add them, the click event is not automatically binded to these new elements unless you use event delegation.
You can easily change that using for example:
$('.form-content').on('click', '.remove-field-sa', function () {
$(this).closest('.form-row').remove();
});
Note that here the .form-content element has to be present on page-load. If it is not, you could also use something like:
// Any parent element that is present at page-load and will contain the child elements will do.
$('body').on('click', '.remove-field-sa', function () {
$(this).closest('.form-row').remove();
});

Jquery:How to bind dynamic button with dynamic div?

I have product catalog. I need to have for every product, a button "show product comments".After button is pressed div with comments must appear.Div must be dynamic too, so I could open a few or more divs at the same time.I need somehow to bind button and div together, maybe they must be in the same class.
<input type="button" value="Comments" id="<?php echo $productArray[$key]
["ID"];?>" class="ProductComments"/>
<div id="<?php echo $productArray[$key]["ID"];?>" class="ProductComments" style="display:none"></div>

You can use data attribute
<input type="button" value="Comments" data-id="<?php echo $productArray[$key]["ID"];?>" class="ProductComments btn"/>
<div id="<?php echo $productArray[$key]["ID"];?>" class="ProductComments" style="display:none"></div>
Script (added .btn class to the button):
$('.ProductComments.btn').click(function(){
var id = $(this).attr('data-id');
$('#'+id).toggle();
});
JSfiddle

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.

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.

Onclick checkbox create dynamic html element with value

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