Develop Reference

How to locate element by both id and attribute at the same time in js or jQuery

Now I have a html tag:
<textarea class="form-control" comment_id={{comment_id}} id="reply_content" style="height:100%;" placeholder="comment here">This is the content</textarea>
How can I get the value of the html value here? I mean the string:" This is the content "
I tried:
var pid= $(this).attr("comment_id");
var content =$(`textarea#reply_content[comment_id="${comment_id}"]` ).val();
console.log(content);
But not work.Any friends can help?

At the line of textarea, are you sure your variable {{comment_id}} does not need quote before and after it? Just questioning?
<textarea class="form-control" comment_id={{comment_id}} id="reply_content" style="height:100%;" placeholder="comment here">This is the content</textarea>
And to select it, you were on good path, you had to do just this:
var pid= $(this).attr("comment_id");
var content =$('textarea#reply_content[comment_id="'+pid+'"]').val();
And it should work, as you got id in variable pid before.
And also if you have multiple #reply_content, you should change it to class instead of id, as there should be only one id per page!

I have solved this issue my fault I used a wrong name.

vue.js binding value from dynamically generated input

I have the below code for generating comments (cutted down for simplicity sake):
<div v-for="(g, gi) in submission.goals" :key="gi">
<div>
<p >Goal #{{gi+1}}</p>
<div>{{g.text}}</div>
</div>
<div>
<p>Comments:</p>
<div><span class="uk-text-small uk-text-muted"><i>no comments</i></span></div>
<hr>
<div>
<textarea class="comment-input" placeholder="type your comment here"></textarea>
</div>
</div>
</div>
and my method look like this:
submitComment(gid,uid,phase,e)
{
e.preventDefault();
//var comment -> get the value of the closes textaraea here
console.log(gid, uid, phase, comment);
//here I will make the ajax call to the API
}
As you can see the whole thing is generated in a v-for loop generating divs according to the size of the submission.goals array returned by the API.
My question is how can I get the value from the textarea input closest to the anchor that is calling the submit function.
Obviously I can't have a separate data object for each comment area since I do not have a control over the size of submission.goals array. And if I use v-model="comment" on each input, whatever user types in will be automatically propagated to each and every textarea.
I know how to handle this with jQuery, but with Vue.js I am still in the early learning stages.

If you mark the text area as a ref, you could have a list of textarea elements. With the index number of the v-for items (gi in your case), you can get the [gi] element of the refs list and submit its value.
<textarea ref="comment" class="comment-input" placeholder="type your comment here"></textarea>
submitComment(gid,uid,phase,e, gi)
{
e.preventDefault();
var comment = this.$refs.comment[gi].value;
console.log(gid, uid, phase, comment);
//here I will make the ajax call to the API
}

Try change submission.goals to computed submissionGoals and create this computed with the code above:
submissionGoals(){
return this.submission.goals.map(goal => ({...goal, comment: ''}));
}
Use v-model="g.comment" on textarea.
Now change submitComment(g.id, g.user_id, g.phase, $event) to submitComment(g, $event) like Alexander Yakushev sayed.

How to get "make" value from one HTML form to another?

I'm having an issue sharing a value between my HTML forms. I'm a beginner so this is probably a very easy fix.
Newvehicle.html:
<div class="input-group">
<input class="form-control" id="inputMake" type="text" placeholder="Make..." style="width: 150px;"/>
</div>
Item1.html:
<label>Make: </label><li onclick="getMake()"></li></br>
Newvehicle.js:
function getMake(){
var make = document.getElementById("inputMake").value;
}
I would like the value inputted into the text field on Newvehicle.html to display as a list item on Item1.html. Can someone please advise?

What you could do is, to save the value in localStorage and retrive it in the secound file.
A possible HTML solution would be:
Newvehicle.html:
<div class="input-group">
<input class="form-control" id="inputMake" type="text" placeholder="Make..." style="width: 150px;" onkeyup="localStorage.value1 = this.value" />
</div>
Item1.html:
<label>Make: </label><li id='entry_1'></li></br>
<script type="text/javascript">
document.getElementById('entry_1').innerHTML = localStorage.value1;
</script>
Newvehicle.js:
not required for that, but nice to have the whole logic in a seperate JS file
Explanation:
the onkeyup event fires up each time the usert releases a key on the keyboard, so with each firing we create/replace the value1 in localStorage.
right after the list element will a javasript code be executed that reads the value from localStorage in your case value1 and replaces the innerHTML.
keep in mid that this only works if you work on the same domain.Localstorage keeps the data until you clear the localstorage whit localStorage.clear()
alternatively you can use sessionStorage instead of localStorage tho keep the data only for one browsing session.
See:
Webstorage on W3C Schools
Keep on going and soon you will master the Javasript language.

How to bind a $scope variable with text editor in angularjs

This is my Editor input tag:
<textarea cols="18" rows="40" class="wysihtml5 wysihtml5-min form-control" ng-model="TemplateDescription"></textarea>
When binding my $scope variable with ng-model then it returns undefined. and when I bind my $scope variable with ng-bind-html then still the same result. So then I gave an Id to this textarea and accessed the value inside of it by using this statement.
$scope.TemplateDescription = $sce.trustAsHtml($("#templateDescription").val());
I get the values as shown in the image below, so how can I get my required html text in my modal so that I can pass this value to save into database. Any kind of help will be appreciated.

If your TemplateDescription variable is containing raw HTML then you can try something like this.
First you need to set your raw HTML as trusted.
$scope.TemplateDescription = $sce.trustAsHtml($scope.TemplateDescription);
And then you need to bind TemplateDescription using ng-model
<textarea cols="18" rows="40" class="wysihtml5 wysihtml5-min form-control" ng-model="TemplateDescription"></textarea>
I have tested it. It will work.

Set placeholder to textbox type password using Jquery

I have the HTML with PHP code:
<input name="password" class="text passplace" type="password" value="<?=$password;?>" maxlength="255" />
I want to set the placeholder to this field but it not work, it still show data on textbox that data from database (see code above).I have tried to user the Jquery code as below:
Jquery code
<script language="javascript">
$(document).ready(function(e) {
// $(".passplace").val();
$(".passplace").attr("placeholder","Mot de passe");
});
</script>

it still show data on textbox that data from database
Assuming you're referring to the value attribute, that is how placeholders work. When there is a value the placeholder will not be visible. If you remove the value the placeholder should appear.
The line of code you've commented out is halfway to solving the issue. You would need to pass it the empty string to clear the input. Currently it will return the current value, rather than setting it:
$(".passplace").val("");

You have to empty the value first :
$(".passplace").val('');

Try:
$('.passplace').val('').prop("placeholder","Mot de passe");
You can also use:
$('input[name="password"]').val('').prop("placeholder","Mot de passe");