get previous element tag name - javascript

with the html like this:
<div class="input-group">
<input type="text" class="form-control" name="tot-1">
<span class="input-group-addon btn btn-default addQR">+</span>
How can I get of the input element when I click on the button?
I have tried this:
$("addQR").click(function(){
var caunter = $(this).closest("input");
var nameclosest = getElementsByName(caunter);
});
but it doesn't work. Any suggestion?

You are missing a period in the selector of the button, and you should be using .prev() not .closest(). You already know the tag name input, so I wonder why you would be trying to get it; you're probably trying to get the name attribute:
$(".addQR").click(function(){
var caunter = $(this).prev("input"),
nameclosest = caunter.attr('name');
});
$(".addQR").click(function(){
var caunter = $(this).prev("input"),
nameclosest = caunter.attr('name');
alert( nameclosest );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<input type="text" class="form-control" name="tot-1">
<span class="input-group-addon btn btn-default addQR">+</span>

Related

How to add textbox value to array on click of button in angularjs and add required functionality

Hi now with this code I am able to add the text box value to array and empty the textbox after adding the value to the array. Now my question on adding the required validation for the textbox. If value is present either in textbox or in the array then required validation should be removed. Else it should be added. Kindly help me.
<div class="input-group">
<input ng-disabled="$parent.BuildModel.DisableControl" type="text" class="form-control textBoxStyle " name="Logpath" ng-model="$parent.BuildModel.Logpath" id="Logpath" required />
<span class="input-group-addon ">
<button ng-click="onclickfun();">
<i class="glyphicon glyphicon-plus"></i>
</button>
</span>
</div>
<span ng-disabled="$parent.BuildModel.DisableControl" class="help-block" name="LogPaths" id="LogPaths" ng-model="$parent.BuildModel.LogPaths" >{{LogPaths}}</span>
In controller
$scope.BuildModel.LogPaths = [];
$scope.onclickfun = function () {
if ($scope.BuildModel.LogPath.length < 0) {
Alertify.alert("Please enter log path for adding to list");
}
$scope.BuildModel.LogPaths.push($scope.BuildModel.LogPath);
console.log($scope.BuildModel.LogPaths);
$scope.BuildModel.LogPath = ClientConfig.EMPTY;
$scope.BuildModel.res = $scope.BuildModel.LogPaths.join(' ');
};
You are using $parent but you don't need to use it. I have created a simple example for do that. You can see the example in HERE
html
<div ng-app ng-controller="LogController">
<input ng-model="inputData"></input>
<input type="submit" ng-click="addPath()" value="add"></input>
<div ng-repeat="log in logs">{{ log }}</div>
</div>
controller
function LogController($scope) {
$scope.logs = [];
$scope.addPath = function () {
$scope.logs.push($scope.inputData);
$scope.inputData = null;
};
}

Concatenate the value of a textbox with a link and use it in an href (HTML)

I have some problems passing the text value of a textbox to a href. I want to do something like this:
<div class="form-group mx-sm-3 mb-2">
<label for="inputWord" class="sr-only">word</label>
<input type="text" class="form-control" id="inputWord" placeholder="Word">
</div>
And then I want to do a google search:
<a type="button" class="btn btn-primary mb-2" href="https://www.google.com.uy/search?q=" + 'inputWord' target="_blank">Search</a>
I know that it's wrong but I've no idea about how to make it work. I put everything inside a form.
Replace a tag element with button
<button onclick="doSearch()">Search</button>
<script>
function doSearch() {
let word = document.querySelector('#inputWord').value;
window.location = "https://www.google.com.uy/search?q=" + word;
}
</script>
What you need to do is collect the form value and send it as a variable to the link with js.
This script sends data when the input field has Changed
<div class="form-group mx-sm-3 mb-2">
<label for="inputWord" class="sr-only">word</label>
<input type="text" class="form-control" id="inputWord" placeholder="Word" onChange="setHref(this.value)"> </div>
<script>
function setHref(val){
document.getElementsByClassName("btn").setAttribute("href", val)
}
</script>

set created input text selected using jquery

I have the following label:
<div id="email">
<label>
myemail#gmail.com
</label>
<i class="fa fa-edit"></i>
</div>
<div id="phone">
<label>
1234567890
</label>
<i class="fa fa-edit"></i>
</div>
When I click on the edit button I want to replace the label with an input and set the label value as selected. Below is what i have tried so far:
$('.fa-edit').click(function(){
var info = $(this).closest('div');
var label = info.find('label');
var curr_value = label.text();
label.replaceWith('<input class="edit_input" type="text" value="'+curr_value+'" />')
.focus(function(){
//alert(this);
this.select();
});
// some code ..
the problem is that I can not set the input text as selected (ready to be replaced).
What should I do?
Create the input element and set the focus & select on it after you replace the label.
Please check the below code:
$("#editBtn").click(function(){
var label = $(this).parent().find('label');
var curr_value = label.text().trim();
var newInput = $('<input class="edit_input" type="text" value="'+curr_value+'" />')
label.replaceWith(newInput)
newInput.focus().select()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="email">
<label>
myemail#gmail.com
</label>
<button id="editBtn">EDIT</button>
</div>
the value returned from .replaceWith is still the old <label /> reference, you need to re-select the input, so that you can focus it.
label.replaceWith('<input class="edit_input" type="text" value="'+curr_value+'" />')
$('.edit_input').off('focus').on('focus',function() {
this.select()
}).trigger('focus')
use off() to remove previous event listener everytime the user click the edit button again.
i hope that help you.
var label = $('label');
var curr_value = label.text();
label.replaceWith('<input class="edit_input" type="text" value="'+curr_value+'" />').focus(function(){
$(this).select(); });

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>

JQuery: Handling name attribute

<div class="uk-sortable js-sortable-option">
<div class="uk-margin-small-top">
<i class="uk-icon-bars"></i>
<input type="text" name="customfield[data][option][0]" value="First Option">
</div>
<div class="uk-margin-small-top">
<i class="uk-icon-bars"></i>
<input type="text" name="customfield[data][option][1]" value="Second Option">
</div>
<div class="uk-margin-small-top">
<i class="uk-icon-bars"></i>
<input type="text" name="customfield[data][option][2]" value="Third Option">
</div>
</div>
<button class="uk-margin-small-top uk-button js-add-item" type="button">Add Item</button>
In this form, a user can create a simple list, which can be used, e.g. for a custom select input. Every item have a unique id customfield[data][option][id]. To add a item, the user can click the button.
My problem is, that I have to change the name attribute for every new added item. How can I only change the id of the name-attribte?
var sortele = $('.js-sortable-option'),
additem = $('.js-add-item');
additem.on('click',function(){
ele = sortele.first();
/** code to change name attr (e.g. to customfield[data][option][newid])*/
sortele.append(ele);
});
to change any attribute of an element , use :
$(elm).attr("attr_name","new_val");
in this case , you should have a counter variable for using as array index.
var counter = 0;
additem.on('click',function(){
ele = sortele.first();
ele.attr("name", "customfield[data][option]["+counter+"]");
counter++;
sortele.append(ele);
});
With jquery you can do this:
var sortele = $('.js-sortable-option'),
additem = $('.js-add-item');
additem.on('click',function(){
ele = sortele.first();
myVar = "something";
/** code to change name attr (what to do?)*/
ele.attr("name", myVar);
});

Categories

Resources