How to remove disabled attribute of a textarea using jQuery? - javascript

I have multiple textareas in my HTML form followed by an edit link for each. When I click an
edit link, the corresponding textarea should be enabled. My code is as follows:
<script type="text/javascript">
$(document).ready(function() {
$(".edit").click(function(){
$(this).attr("id").removeAttr("disabled");
});
});
</script>
<textarea id="txt1" disabled="true"></textarea>
<a class="edit" id="txt1" >edit</a>
<textarea id="txt2" disabled="true"></textarea>
<a class="edit" id="txt2" >edit</a>
Why is the textarea not being enabled when the corresponding link is clicked?

ids can only be used once in a page. you can't have 2 elements (or more) having the same id.
instead, do this:
<form id="myform">
<!-- group each in divs -->
<div>
<textarea disabled="true"></textarea>
<a class="edit">edit</a>
</div>
<div>
<textarea disabled="true"></textarea>
<a class="edit">edit</a>
</div>
</form>
<script>
$(function(){
$('#myform').on('click','.edit',function(){
$(this) //when edit is clicked
.siblings('textarea') //find it's pair textarea
.prop("disabled", false) //and enable
return false;
});
});
</script>
if you can't use divs, then you can use prev('textarea') instead of siblings('textarea') to get the preceding textarea.

You're re-using ID values - this is a big no-no. If you're going to give these an ID, you need to do something to differentiate the txt1 link from the txt1 textarea. In the code below, I've added a _link suffix to the links.
<textarea id="txt1" disabled="true"></textarea>
<a class="edit" id="txt1_link">edit</a>
<textarea id="txt2" disabled="true"></textarea>
<a class="edit" id="txt2_link">edit</a>
With that small change, we can now modify the disabled property of the textarea:
$(".edit").on("click", function(e){
$( "#" + this.id.replace("_link", "") ).prop("disabled", false);
e.preventDefault();
});
The selector, unfortunately, includes a use of the replace() method. If you remove the ambiguity in ID's between the links and the textareas, you can do away with this.
Demo: http://jsbin.com/unebur/edit#javascript,html

You are trying to remove disabled attribute of anchor tag by $(this). Try this.
<script type="text/javascript">
$(document).ready(function() {
$(".edit").click(function(){
$("#"+$(this).attr("rel")).removeAttr("disabled");
});
});
</script>
<textarea id="txt1" class="txtedit" disabled="true"></textarea><a class="edit" rel="txt1" >edit</a>
<textarea id="txt2" class="txtedit" disabled="true"></textarea><a class="edit" rel="txt2" >edit</a>

Hello please make some changes as mentioned below
<script type="text/javascript">
$(document).ready(function () {
$('.txtAreas').attr('disabled', true);
$("#txt3").click(function () {
$('#txt1').removeAttr("disabled");
});
$("#txt4").click(function () {
$('#txt2').removeAttr("disabled");
});
});
</script>
<textarea id="txt1" class="txtAreas"></textarea>edit
<textarea id="txt2" class="txtAreas"></textarea>edit

Since that's an onclick handler, $(this) is going to point at the element you clicked on, which is the <a> tag. That doesn't have a disabled. You need to move up the dom tree to the parent node, which'd be the textarea, and remove the disabled attribute there:
$(this).parent().removeAttr("disabled");

Related

Javascript password + button open URL in targeted element

I learned how to open a link using a password and button.
I used the following code:
<input type="text" id="text" />
<input type="button" id="btn" value="Submit" onClick="window.location=url;" />
<script>
$("#btn").click(function() {
window.location="example.com/"+$("#text").val();})
</script>
What I would like to figure out is whether I can target a div element for the link to open within.
I've been using the following script to load html pages into a specified div element with a link:
<div class="item1" id="pageone"></div>
link
<script>
function loadSAMEDiv1() {
$.ajax({
url: 'item1.html',
success: function(data) {
$('#pageone').html(data);
}
});
}
</script>
I guess I'm wondering if there's a way to make the password url made by the first script open in a targeted div, like it does in the second script. So when you click the button element it will make the url using the password entered into the text box and load it into a div like #pageone.
The simplest way to do this is with Ajax load(). Try this.
<input type="text" id="text" />
<input type="button" id="btn" value="Submit"/>
<div class="item1" id="pageone"></div>
<script>
$("#btn").on("click", function() {
$("#pageone").load("example.com/"+$("#text").val());
});
</script>

HTML input into Javascript variable

I've been attempting to grab text input from HTML and trying to output the text back into HTML but for some reason it does not seem to be working. Does putting input within a form alter the interaction with getElementById or is it possible that the second button usage of formaction is interrupting this?
$(document).ready(function(){
$("#submit").on("click",function(){
var test = document.getElementById("searchInput");
$("#text").html(test);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id = "text">
<h1>test</h1>
</div>
EDIT: I have attempted to change
var test = document.getElementById("searchInput");
to
var test = document.getElementById("searchInput").value;
previously and it is still not working. Is there an interaction that is failing that I am missing? Also I would like to be able to store the input as variable i.e thats why I am purposely putting it into a variable before outputting it.
EDIT2: There wasn't anything particularly wrong about the code other than retrieving the value. I am currently using codepen.io to code and did not load jquery into the pen.
Since you're using jQuery, it will make more sense to use jQuery to obtain the elements' value:
Use this to always replace #text element contents with #searchInput value:
$("#text").html($("#searchInput").val());
Use this to append #searchInput value to #text element:
$("#text").append($("#searchInput").val());
But the whole logic does not make any sense. You are changing an elements' value that it is outside the form you are submitting. Either you should prevent submit button click event from submitting the form, or have the #text element inside the form as an input, textarea or hidden field:
$(document).ready(function(){
$("#submit").on("click",function(e) {
e.preventDefault();
$("#text").html($("#searchInput").val());
})
});
or having the #text element inside the form for submitting:
<form>
<input type="hidden" id="text" name="text">
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
You Using form element, so once you click the button , the form will be reloaded, if you want to display textbox value to the element , once remove the form element.
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
<div id ="text">
<h1 id="welc"></h1>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#submit").on("click",function(){
var test = $('#searchInput').val();
$("h1").html(test);
});
});
</script>
Just Remove tag, and check it.
You need to find the element's value and then set it as HTML.
$("#text").html(test.value);
I have updated your question mate check this one .
$(document).ready(function(){
$("#submit").on("click",function(){
var test = document.getElementById("searchInput").value;
$("#text").html(test);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id = "text">
<h1>test</h1>
</div>
I think this will work for you.
<! doctype HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<input type="text" id="searchInput">
<br>
<button type="button" id="submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id="text">
<h1>test</h1>
</div>
</body>
<script>
$(document).ready(function () {
$("#submit").on("click", function () {
$("#text").html($("#searchInput").val());
})
});
</script>
</html>
Edit your JS code please try:
EDIT:
$(document).ready(function(){
$("#submit").on("click",function(){
var test = $("#searchInput").val();
$("#text").html(test);
})
});

Table Anchor Click Get Parent Class Value

Here is my html code:
<td>
<input type="hidden" name="user_id" class="user_id" value="18">
<a class="contactnow" href="#" onclick="contactnow();">Contact Now</a>
</td>
my javascript function is as follow's:
function contactnow()
{
var id=$(this).parent('.user_id').val();
alert(id);
}
I need to get the value of hidden field on click on this anchor, these anchor's are multiple on same page as looping data from database.
Pass reference in onclick attribute.
<a class="contactnow" href="#" onclick="contactnow(this);">Contact Now</a>
use this
function contactnow(e)
{
var id=$(e).parent().find('.user_id').val();
//or
var id=$(e).siblings('.user_id').val();
alert(id);
}
However instead of using javascript in html attributes you can separate your javascript entirely which is lot more cleaner and you don't have to repeat onclick everytime for it to work in multiple elements. Remove onclick attribute
Html
<a class="contactnow" href="#">Contact Now</a>
JS
$('.contactnow').click(function(){
var id=$(this).parent().find('.user_id').val();
//or
var id=$(this).siblings('.user_id').val();
alert(id);
});
// if you are using dynamically added element use
$(document).on('click','.contactnow', function(){
var id=$(this).parent().find('.user_id').val();
//or
var id=$(this).siblings('.user_id').val();
alert(id);
});
Remove the inline event handler and use:
$('a.contactnow').click(function() {
console.log($(this).prev('input').val())
})
jsFiddle example
As I commented above, $(this) isn't what you think it is since you pass nothing to your function. The you need the .prev() element, not the .parent().
If you want to continue to use the inline event handler you need to pass the this keyword.
Change:
onclick="contactnow();"
to:
onclick="contactnow(this, event);"
function contactnow(ele, e)
{
var id=$(ele).siblings('.user_id').val();
alert(id);
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input type="hidden" name="user_id" class="user_id" value="18">
<a class="contactnow" href="#" onclick="contactnow(this, event);">Contact Now</a></td>
</tr>
</tbody>
</table>
I see that you tag jquery, here is an simple example of it.
$('button').on('click', function () {
var answer = $(this).prev().val();
alert(answer)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="hidden" value="4">
<button>click me</button>

Getting value of a particular element within a particular div using jQuery

In the markup, i have several divs with same id and inside those divs there are paragraphs and buttons. Now when a button is clicked, i want to get the value of a corresponding paragraph tag under the same div as that particular button. How can i do this with jQuery? The markup is as followed:
<div class="col-sm-5 narrow">
<p id="title">Jhon123</p>
<p id="text">This is the status of jhon</p>
<p>posted at 12:30pm GMT6+</p>
<form class="form-inline">
<input type="text" class="form-control" id="reply" placeholder="Type and enter to reply">
<button type="button" class="btn btn-default" id="repost">Re-Tweet</button>
</form>
</div>
When the button with the id #repost is clicked, i want to access the html inside the p tag with the id #text. I tried something like this:
$('#retweet').click(function(e){
e.stopPropagation();
var text = $(this).parent("div").closest('#text');
alert("some retweet button has been pressed which has the text:"+text);
});
You can use the jQuery .closest() function to get the containing <div> and then find the <p> tag you want inside it:
$('#repost').on('click', function () {
var text = $(this).closest('div[class^=col]').find('#text').html();
console.log(text);
});
The div[class^=col] selector means "find the closest div tag with a class starting with col". This allows you to use the other bootstrap column classes as well and have it still work.
$('#repost').click(function(){
console.log($(this).closest('div').find('#text').html());
});
See demo http://jsbin.com/wojupoyosa/1/edit?html,js,console,output
and as comments suggest you IDs should be unique per page so you should use a class or something else instead.
$( "#text" ).text() will give you the value inside P tag. So your code will look something like:
$('#repost').click(function(){
$( "#text" ).text() // save it to wherever you want
});
As a side note it is generally frowned upon to have css id's that are not unique - shared identifiers should use a class.
If you change all your ids into classes as shown in the demo below, then the following code should work fine. Also, you do not need the form element.
$('.repost').click(function(){
var text = $(this).closest('div').find('.text').text();
alert("some retweet button has been pressed which has the text: " + text);
});
$(function() {
$('.repost').click(function(){
var text = $(this).closest('div').find('.text').text();
alert("some retweet button has been pressed which has the text: " + text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-5 narrow">
<p class="title">Jhon123</p>
<p class="text">This is the status of jhon</p>
<p>posted at 12:30pm GMT6+</p>
<form class="form-inline">
<input type="text" class="form-control reply" placeholder="Type and enter to reply">
<button type="button" class="btn btn-default repost">Re-Tweet</button>
</form>
</div>
<div class="col-sm-5 narrow">
<p class="title">Mary123</p>
<p class="text">This is the status of mary</p>
<p>posted at 12:35pm GMT6+</p>
<form class="form-inline">
<input type="text" class="form-control reply" placeholder="Type and enter to reply">
<button type="button" class="btn btn-default repost">Re-Tweet</button>
</form>
</div>

How can I get the Text value of input?

How can I get the value of the textbox?
<input class="num1" type="text" val=""><br>
<button class="show">Click</button>
this is my Js code:
var value = $('.num1').text();
$('.Click').click(function(){
$('<'p>').text(value);
});
when I clicked the "click" button I want to show in a paragraph the text that I'd input to the textbox.
Use .val() for form elements to retrieve or set its value. Also, care with typo when you set the paragraph text.
var value = $('.num1').val();
$('.show').on('click', function(){
$('p').text(value);
});
In your code there is an error: if you want to catch the click event you should use the class of the button. Another error in your code is about the single quotes you use to insert value into the <p>. And remember, is $('p'), not $('<p>').
The code should look like that:
$('.show').click(function(){
$('p').text(value);
});
You can use this code:
jQuery
$(function(){
$("form").on("submit", function(event){
event.preventDefault();
var text = $(".num1").val();
$("#outputText").text(text);
})
});
Your HTML should be something like that:
HTML
<form>
<input class="num1" type="text" val="">
<button class="show">Click</button>
</form>
<p id="outputText"></p>
Note that in this case is really important to stop the default event behavior using preventDefault().
If you are not using a form the previous code became something like that:
jQuery
$(function(){
$(".show").on("click", function(event){
var text = $(".num1").val();
$("#outputText").text(text);
})
});
HTML
<input class="num1" type="text" val="">
<button class="show">Click</button>
<p id="outputText">
</p>
The outputText div is a div I've created to show the text.
I've prepared jsfiddle1, jsfiddle2 you can use to see the code in action, I hope it helps ;-)
That would be
var value = $('.num1').val();
Use the val() operator on the input to get the value, and then you could use the following code:
Html:
<input class="num1" type="text">
<button class="show">Click</button>
<p class="output"></p>
Javascript:
$('button').click(function(){
$('.output').html($('.num1').val());
});
use .val() not .text()
$(".show").click(function(){
var value= $(".num1").val();
$(".para").text(value)
});
demo
$('.show').click(function () {
var value = $('.num1').val();
$('p').text(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="num1" type="text" val=""></input>
<button class="show">Click</button>
<p></p>
There are type mistakes
var value = $('.num1').val(); should be in click method.
Use val() instead of .text() to get the input value.

Categories

Resources