I have multiple divs and each div has a textbox and a label. and I need to populate some text in a label when textbox is on .focus
script so far:
$(function () {
$('input:text').focus(function () {
//how do I get the current label and populate with some text? and when clicking on a
//different textbox, I want to clear the previous label and just show the current
//div's label with some data
});
});
e.g.
<div>
#Html.TextBoxFor(model => model.Title)
<label>
</label>
</div>
<div>
#Html.TextBoxFor(model => model.Name)
<label>
</label>
</div>
<div>
#Html.TextBoxFor(model => model.Address)
<label>
</label>
</div>
thx!
Working example made for you:
http://jsfiddle.net/KhQtx/
HTML:
<div>
<input type="text" title="Tittle" value=""/>
<label>
</label>
</div>
<div>
<input type="text" title="Name" value=""/>
<label>
</label>
</div>
<div>
<input type="text" title="Address" value=""/>
<label>
</label>
</div>
JS:
$('input:text').focus(function () {
// clean label
$('input:text').next('label').html("");
// get input title
var title = $(this).attr('title');
// add html to label from input title
$(this).next('label').html(title);
});
You could use parent and find:
var label = $(this).parent().find('label')
Try:
$('input:text').focus( function(){
$(this).next().text('text here');
});
$('input:text').focus(function () {
$('input:text').next('label').html(""); // reset all first
$(this).next('label').html("Your text here");
});
See here
$(function () {
$('input:text').focus(function () {
// To put textboxvalue in label
$($(this).parent().find('label')).val($(this).val());
// To put customvalue in label
$($(this).parent().find('label')).val("Hi i am a label");
});
});
$(function () {
$('input:text').focus(function(e){
$('div label').text("");
$(this).next('label').text('SomeText');
});
});
Example.
Note: It would be better you assign a class name to your divs as follows
<div class="parentDiv">
<input type="text" id="Title" />
<label></label>
</div>
So you can narrow your selection like
$('div.parentDiv label').text("");
$(this).next('label').text('SomeText');
That will avoid other div's labels to being from empty.
$(function () {
$('input:text').focus(function () {
$(this).siblings('label').empty().html('what you want..');
});
});
Related
For example when somebody inputs text and presses submit I want the text to be displayed in an h1 tag.
<div>
<label for="message"> Message:</label>
<input type="text" id="message" name="message" class="m3">
<button id="btn1" class="butt">Ready to Send?</button>
<h1 id="test">Header</h1>
</div>
$(document).ready(function() {
$('btn1').click(function() {
$('#test').text($("#message").val());
});
});
$(document).ready(function() {
$('#btn1').click(function() {
$('#test').text($("#message").val());
//--> if you want to remove the value of the input after parsing the code, simply check if
//--> not `null` or not `undefined` by placing the selector.val() in your if conditional...
if($("#message").val()){
$("#message").val('');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label for="message"> Message:</label>
<input type="text" id="message" name="message" class="m3">
<button id="btn1" class="butt">Ready to Send?</button>
<h1 id="test">Header</h1>
</div>
You did not add the # selector in JQuery for ID
$(document).ready(function() {
$('#btn1').click(function() {//<-- Make sure to add the ID selector # in Jquery
$('#test').text($("#message").val());
});
});
$(document).ready(function () {
$('#btn1').click(function (e) {
e.preventDefault();
$('#test').html($("#message").val());
});
});
This would work fine, but like #Teemu says this removes the form functionality. If you want to add a check mechanism you can use something like this:
$(document).ready(function () {
$("#message").keyup(function() {
$("#test").html($("#message").val());
});
});
I have a jQuery code that gets the value of the text input and add its value to a div class. while following code works fine, i am trying to find out how to make this function work more dynamic for more than one text input and more than one divs, without copying the same script for each input and div again and again.
jQuery(document).ready(function($) {
function checkForInput(element) {
var value = $('.my-input-1').val();
$("#myDiv_1").removeClass().addClass(value);
}
$('input.my-input-1').on('change keyup', function() {
checkForInput(this);
});
});
jQuery(document).ready(function($) {
function checkForInput(element) {
var value = $('.my-input-2').val();
$("#myDiv_2").removeClass().addClass(value);
}
$('input.my-input-2').on('change keyup', function() {
checkForInput(this);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="my-input-1" value="">
<input type="text" class="my-input-2" value="">
<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>
You can use an attribute for each input that its value represents the id of the div
jQuery(document).ready(function($) {
$('input.class-input').on('change keyup', function() {
const $this = $(this);
const value = $this.val();
const divId = $this.data('for');
$(`#${divId}`).removeClass().addClass(value);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="class-input" value="" data-for="myDiv_1">
<input type="text" class="class-input" value="" data-for="myDiv_2">
<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>
In case if you don't want to have identical classes for input elements.(As per your code.) Hope it helps.
jQuery(document).ready(function($){
function checkForInput(elementClass,elementValue) {
var inputNumber= elementClass.substr(elementClass.length-1);
var divclass='#myDiv_'+inputNumber;
$(divclass).removeClass().addClass(elementValue);
}
$('input.my-input-1').on('change keyup', function() {
checkForInput($(this).attr('class'),$(this).val());
});
$('input.my-input-2').on('change keyup', function() {
checkForInput($(this).attr('class'),$(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="my-input-1" value="">
<input type="text" class="my-input-2" value="">
<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>
I really cant understand what is the problem here. I want when checkbox in the form is clicked to get to the closest "h2" and to get its text.
HTML
<form action="" method="get" id="productFilterForm">
<h2 class="attribute-name">Brands</h2>
<div class="option">
<label>
<input type="checkbox" name="Royal Canin" value="163">Royal Canin
</label>
</div>
<div class="option">
<label>
<input type="checkbox" name="Brit" value="164">Brit
</label>
</div>
<div class="option">
<label>
<input type="checkbox" name="Purina Pro Plan" value="165">Purina Pro Plan
</label>
</div>
</form>
JavaScript
$(document).ready(function(){
$('#productFilterForm').on('change', 'input:checkbox', function () {
let text = $(this).closest("h2").html(); <---- UNDEFINED
//let text = $(this).find("h2").html(); <---- UNDEFINED
console.log(text);
}
});
I tried many things and methods, just cant find any element from the "input" up to the DOM tree.
try this code
$('#productFilterForm').on('change', function () {
let text = $(this).find("h2").html();
console.log(text);
})
I found a solution:
$(document).ready(function(){
$('#productFilterForm input:checkbox').on('change', function () {
let text = $(this).closest('div.option').prevAll('h2.attribute-name').html();
console.log(text);
}
});
I'm trying to remove input's val when clicking a button that appear when focusing on input.
This is my html:
<div class="search-area">
<form action="#" id="ingredientSearchForm">
<input type="text" placeholder="Arama" id="ingredientsSearch"/>
<span class="clearable"></span>
<span></span>
<input id="ingredientSearchSubmit" type="submit" class="hidden" placeholder="Arama"/>
</form>
</div>
And this is javascript function:
var searchinput = $(".search-area").find("input");
searchinput.focus(function(){
$(this).data('placeholder',$(this).attr('placeholder'));
$(this).attr('placeholder','');
$(this).siblings(".clearable").show();
});
$(".search-area").find(".clearable").on("click", function() {
$(this).val('');
});
searchinput.blur(function(){
$(this).attr('placeholder',$(this).data('placeholder'));
$(this).siblings(".clearable").hide();
});
.clearable is a span with background. Normally it is display:none.
I think you're wanting to clear searchinput on clicking .clearable?
If so, you should instead use:
$(".search-area").find(".clearable").on("click", function() {
searchinput.val('');
});
if you want to remove value of span then:
$(".search-area").find(".clearable").on("click", function() {
$(this).text('');
});
if you are trying to remove textbox value then:
$(".search-area").on("click",".clearable", function() {
$(this).closest("#ingredientSearchForm").find('#ingredientsSearch').val('');
});
I am newbie in jquery.
I want to retrieve each textbox value and label from the form. Here I am getting dynamic form in my DOM.
i am triggering form submit even in my DOM something like this and its working..
$('.wpc_contact').submit(function(event){
// here i want textbox value and label
}
I have tried with doing each() but I didn't get..
<form method="POST" id="contact" name="17" class="form-horizontal wpc_contact">
<fieldset>
<div id="legend" class="">
<legend class="">Demo</legend> <div id="alert-message" class="alert hidden"></div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Name</label>
<div class="controls">
<input type="text" placeholder="Name" class="input-xlarge">
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Email</label>
<div class="controls">
<input type="text" placeholder="Email" class="input-xlarge">
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-success">Send</button>
</div>
</div>
</fieldset>
</form>
Can anyone help me?
Try this:
$('.wpc_contact').submit(function(event){
// here i want textbox value and label
$(this).find('input').each(function(){
alert('text box value:'+$(this).val());
});
$(this).find('label').each(function(){
alert('label text:'+$(this).text());
});
});
Use of $(this).find('input'): It will find all input text boxes within the form having class wpc_contact. Similarly, $(this).find('label').
DEMO Link
Requirement to get both label and value together like { label : value } pair, you can try:
$('.wpc_contact').submit(function(event){
var data = {};
$('.control-group').each(function(){
var key = $(this).find('label').text();
var value = $(this).find('input').val();
data[key] = value;
});
console.log(data); // data contains label : value pair
});
DEMO Link2
$('form input[type="text"]').each(function(){
// Do your magic here
});
If you got the form id:
$('#formId input[type="text"]').each(function(){ // Do your magic here });
Using jquery to retrieve the value easily
You have to give in html textbox id='email'
For textbox
eg.
$('#email').val('result');
For Label
eg.
$('#email').text('result');
check out this fiddle
you can use
$('.wpc_contact input').each(function () {
alert($(this).val());
});
http://jsfiddle.net/8DMy4/2/
if yo write $('.wpc_contact').each(function(){ alert($(this).attr("class")); })
it find all elements that have 'wpc_contact' class but you have one element!!!
you should use with find
$('input').each(function () { alert($(this).attr("class")); })
$.find('span').each(function () { alert($(this).attr("class")); })
if you want value:
//text box
$('input').each(function () { alert($(this).val()); })
//label
$.find('span').each(function () { alert($(this).text()); })