I'm trying select a input and then copy the text into input, but has trouble identifying the children.
$(".input-group .copyLink").click(function() {
$(this).parent().find('.htmlLink').select();
document.execCommand("copy");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<input type="text" class="htmlLink" value="http://google.cl">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://microsoft.com">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://apple.com">
<button class="copyLink">Copy</button>
</div>
Any suggestion?
Thanks!
You can shorten the code little bit since you have a div wrapper and only one sibling:
$(".input-group .copyLink").click(function() {
$(this).siblings().select();
document.execCommand("copy");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<input type="text" class="htmlLink" value="http://google.cl">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://microsoft.com">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://apple.com">
<button class="copyLink">Copy</button>
</div>
You need to bind event with your button, based on button event response, you need to find your input box using jquery DOM selector function like "prev". After this, execute your other task with input object.
Reference for jquery DOM Selector: jQuery: find input field closest to button
Your answer jsfiddle: https://jsfiddle.net/JackRyu/udk6za34/1/
You answer code
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<html>
<body>
<div class="input-group">
<input type="text" class="htmlLink" value="http://google.cl">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://microsoft.com">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://apple.com">
<button class="copyLink">Copy</button>
</div>
<body>
<script>
$('.input-group button').on('click',function(){
console.log('active');
var input=$(this).prev('input');
$(input).select();
document.execCommand('copy');
});
</script>
</html>
Related
On clicking the button I want to get the closest <input name="something/> value.
I tried $(this).closest(".input").val() but didn't work.
$(document).on("click", ".button", function() {
div = `<div class="second-div"><input name="something/></div>
<div class="third-div"></div>`
// get nearest <input name="something/> value
// get nearest <input class="a-input" /> value
$(".main-div").append(div);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-div">
<div class="second-div">
<input name="something" class="input" />
</div>
<div class="third-div">
<input name="another input" class="a-input" />
</div>
<div class="fourth-div">
<button type="button" class="button">Click Me</button>
</div>
</div>
I would traverse up to the containing div first, then back down to the desired control.
$(this).closest(".main-div").find(".input");
EDIT
I just read your comment saying you want to get the last instance of a class.
$(this).closest(".main-div").find(".input").last();
EXAMPLE
$(document).on("click", ".button", function() {
div = `<div class="second-div"><input name="something" class="input"/></div>
<div class="third-div"></div>`
$(".input").removeClass("highlight");
$(this).closest(".main-div").find(".input").last().addClass("highlight");
// get nearest <input name="something/> value
// get nearest <input class="a-input" /> value
$(".main-div").append(div);
});
.highlight{
background:#b00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-div">
<div class="second-div">
<input name="something" class="input" />
</div>
<div class="third-div">
<input name="another input" class="a-input" />
</div>
<div class="fourth-div">
<button type="button" class="button">Click Me</button>
</div>
</div>
I have an HTML page generated with some default values for input fields. Here is the HTML and JavaScript:
$('#trigger').click(function () {
var content = $(this).parent().find('.content');
content.find('#name').val("Young man");
content.find('#age').val("25");
alert(content.find('#name').val());
alert(content.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="trigger" href="#">Know!</a>
<div class="content">
<div>
<label>Name:</label>
<input type="text" id="name" value="dummy">
</div>
<div>
<label>Age:</label>
<input type="text" id="age" value="dummy">
</div>
</div>
</div>
I am trying to get the div assigned to a variable, then change the values of name and age through this handle. The first alert method confirms that they are changed. But why is content.html() still outputs the original html? How can I make html() output the updated data?
jQuery .val() method never updates the value attribute. You can change it with .attr() method.
$('#trigger').click(function() {
var content = $(this).parent().find('.content');
content.find('#name').attr("value", "Young man");
content.find('#age').attr("value", "25");
alert(content.find('#name').val());
alert(content.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="trigger" href="#">Know!</a>
<div class="content">
<div>
<label>Name:</label>
<input type="text" id="name" value="dummy">
</div>
<div>
<label>Age:</label>
<input type="text" id="age" value="dummy">
</div>
</div>
</div>
Assign the new value using attr().
$('#trigger').click(function () {
var content = $(this).parent().find('.content');
content.find('#name').attr("value", "Young man");
content.find('#age').attr("value", "25");
console.log(content.find('#name').val());
console.log(content.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="trigger" href="#">Know!</a>
<div class="content">
<div>
<label>Name:</label>
<input type="text" id="name" value="dummy">
</div>
<div>
<label>Age:</label>
<input type="text" id="age" value="dummy">
</div>
</div>
</div>
Below is my html code for the form
<form id="taxi_distance_input" >
<div class="col-md-8" style="display: inline-block; left:-30px">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" id="usr"> </input>
<span class="input-group-addon" style="width: 50px">km</span>
</div>
</div>
<div class="col-md-4" style="padding-left:0px; margin-left:-10px">
<input type="button" class="btn btn-success" value="Submit" id="myButton"> </input>
</div>
</div>
<p> </p>
</form>
And in the bottom of the page I give the
<script src="/js/form_input_parameter.js"></script>
Inside the form_input_parameter.js i have written the script
$(document).ready(function(){
$('#myButton').click(function(){
var text = $("#usr").val();
alert(text+"success");
});
But it is not working .Any help is apprecited
You've forgotten the }); at the end of your JS code
The input tag should end with />
$(document).ready(function() {
$('#myButton').click(function() {
var text = $("#usr").val();
alert(text + " success");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" id="usr" />
<input type="button" class="btn btn-success" value="Submit" id="myButton" />
How can I only affect the element that when I focus on the input type the error message below it should be gone, problem is when I focus on the input type the error message hides all. Hope you can help me. Thanks in advance
This is my HTML structure
<div class="form-group">
<input class="form-control" type="text" />
<div class="form-message">Please all fields </div>
</div>
<div class="form-group">
<input class="form-control" type="text" />
<div class="form-message">Please all fields </div>
</div>
<div class="form-group">
<input class="form-control" type="text" />
<div class="form-message">Please all fields </div>
</div>
<div class="form-group">
<input class="form-control" type="text" />
<div class="form-message">Please all fields</div>
</div>
<div class="form-group">
<input class="form-control" type="text" />
<div class="form-message">Please all fields </div>
</div>
my Jquery
$(document).ready(function() {
$('.form-control').focus(function(e) {
if($(e.target).next('.form-message').css('display') == 'block'){
$('.form-message').hide();
}
});
});
Try it like this:
$(document).ready(function() {
$('.form-control').focus(function(e) {
var formMessage = $(e.target).next('.form-message');
if(formMessage.css('display') == 'block'){
formMessage.hide();
}
});
});
Fiddle: https://jsfiddle.net/gveukc0b/
Try this,
$(document).ready(function() {
$('.form-control').focus(function() {
$(this).next().hide();
});
});
is precisely the problem when I click on the button the page is reloaded , the solution is to use preventDefault() but as' doing the input control is not performed correctly , or if the pattern is not satisfied does not appear any error
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#go').click(function(event) {
//event.preventDefault();
var use = $('#Username').val();
var passwor = $('#Password').val();
alert("Hi);
// Ajax request here
});
</script>
<div class="container">
<div class="card"></div>
<div class="card">
<h1 class="title">Login</h1>
<form>
<div class="input-container">
<input type="text" id="Username" required="required" pattern=".{4,}" title="Devi inserire almeno 4 caratteri"/>
<label for="Username">Username</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password" required="required" pattern=".{4,}" title="Devi inserire almeno 4 caratteri"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button id="go" ><span>Login</span></button>
</div>
</form>
</div>
</div>
remove the src="jquery-1.11.3.min.js" and it should work.
if you have to add jquery library give it a saperate scrip element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="card"></div>
<div class="card">
<h1 class="title">Login</h1>
<form>
<div class="input-container">
<input type="text" id="Username" />
<label for="Username">Username</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password" />
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button id="go" ><span>Login</span></button>
</div>
</form>
</div>
</div>
<script>
$('#go').on('click',function(e){
var username=$("#Username").val();
var password=$('#Password').val();
e.preventDefault();
alert('Hi');
//write ajax code here
});
</script>
<!-- language: lang-html -->
</body>
</html>
hear is plunker link :- http://plnkr.co/edit/FmdXu6YixLjlaYerLHFa?p=preview
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
$(function(){
$('#go').click(function(event) {
// event.preventDefault();
var use = $('#Username').val();
var passwor = $('#Password').val();
console.log(use, passwor);
});
});
</script>
<div class="container">
<div class="card"></div>
<div class="card">
<h1 class="title">Login</h1>
<form>
<div class="input-container">
<input type="text" id="Username" required="required" pattern=".{4,}" title="Devi inserire almeno 4 caratteri"/>
<label for="Username">Username</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password" required="required" pattern=".{4,}" title="Devi inserire almeno 4 caratteri"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button id="go" ><span>Login</span></button>
</div>
</form>
</div>
</div>
Wrong use of <script> tag, you need to either load the script content use src, and not both.
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function() { // wait for DOM to load
$('#go').click(function(event) {
//event.preventDefault();
var use = $('#Username').val();
var passwor = $('#Password').val();
alert("Hi");
});
});
<script>
You can either use event.preventDefault() (recommended) or add type="button" attribute to the #go button
<button id="go" type="button"><span>Login</span></button>
A script element can load a script from its text content or a URL specified by the src attribute, not both.
You are loading jQuery, but the content of the <script> never runs.
You need a separate <script> for each of your scripts.
Aside 1: You're generally better off using submit events on form elements than you are with click events on submit buttons.
Aside 2: Make sure your code runs after the HTML for the button is added to the DOM. Otherwise $('#go') won't match any elements.
Try returning false at the end of the click event function.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#go').click(function(event) {
//event.preventDefault();
var use = $('#Username').val();
var passwor = $('#Password').val();
alert("Hi);
// Ajax request here
//Return false to prevent refresh
return false;
});
</script>
<div class="container">
<div class="card"></div>
<div class="card">
<h1 class="title">Login</h1>
<form>
<div class="input-container">
<input type="text" id="Username" required="required" pattern=".{4,}" title="Devi inserire almeno 4 caratteri"/>
<label for="Username">Username</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password" required="required" pattern=".{4,}" title="Devi inserire almeno 4 caratteri"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button id="go" ><span>Login</span></button>
</div>
</form>
</div>
</div>