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()); })
Related
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 am trying to set the value of a text box when file upload is selected , how ever it does not happen but I see correct value in alert box.
<div class="row">
<div class="col-xs-2">
<div class="file-label"><i></i>#Resources.FolderPath</div>
</div>
<div class="col-xs-4">
<input class=".form-control" name="fileText" type="text" />
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload"/>
</div>
</div>
<div class="col-xs-4">
<label id="fileSizeError" style="color: red"></label>
</div>
</div>
$(document).ready(function () {
$(document)
.on("change","#fileUpload",
function (e) {
alert($("#fileUpload").val());
$("#fileText").val($("#fileUpload").val());
alert("hi");
});
});
Please help me here.I am using Asp.net MVC as platform.
Your input has a name, but #fileText is an ID selector. Either add an id to it, or use an attribute selector to find it.
So either:
<input class=".form-control" id="fileText" name="fileText" type="text" />
<!-- add id------------------^^^^^^^^^^^^^ -->
or
$("[name=fileText]").val($("#fileUpload").val());
// ^^^^^^^^^^^^^^^---- use attribute selector
Try native js:
document.getElementById("fileText").defaultValue = $("#fileUpload").val();
OR
$("#fileText").attr("value", "some value");
Also;
Check to see if your original code works with replacing .val() with .text
I am creating a form with multiple radio buttons and text boxes.
Each Text box is next to radio button like below:
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="correct_answer_id">
Correct
</label>
</div>
<label for="answer" class="col-sm-2 control-label">Answer 2</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer[]" placeholder="Answer" required>
</div>
</div>
There are several radio button and text box pair like above in the form.
On click of the radio button, i want to get whatever has been written in the corresponding text box
i am trying to use Jquery's next() function like below:
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).next('input[type="text"]').val());
}
});
But my log shows undefined. What i am doing wrong?
Try this : find parent div of radio and do next().next() to get input box div and then find input box to get value.
NOTE - You need not to check if ($(this).is(':checked')) as when you click on radio button it will get checked always.
$('input[type="radio"]').click(function(){
var value = $(this).closest('.radio').next().next('.col-sm-10').find('input[type=text]').val();
console.log(value );
});
use below code using parents(); see working fiddle
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).parents('div.radio').next().next('div.col-sm-10').find('input[type="text"]').val());
}
});
You should put the value that you want submitted in the value attribute of your input elements.
e.g. <input type="radio" name="correct_answer_id" value="correct">
Your click handler would change to:
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).val());
}
});
If there's some value that you don't want to place in the value attribute then it's still best to have a reference to the value in the input element instead of relying on a particular document layout.
Try this
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).parent().parent().siblings().find('input[type="text"]').val());
}
});
Working Demo
If you can change the html a little, here is a different approach http://jsfiddle.net/xa9cjLd9/1/
<div class="form-group">
<div class="radio">
<label data-for='answer[]'>
<input type="radio" name="correct_answer_id" />Correct</label>
</div>
<label for="answer" class="col-sm-2 control-label">Answer 2</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer[]" placeholder="Answer" required />
</div>
</div>
$('input[type="radio"]').click(function () {
if ($(this).is(':checked')) {
var data = $(this).closest('label').attr('data-for');
console.log($('input[name=' + '"' + data + '"' + ']').val());
}
});
Just Define a data attribute to the label , which contains the name of the related input.
I need help for this issue.
I have a list of file and in each one a checkbox input. So i need to check one of that checkboxes and when click on "Insert" button, get the attribute value and insert it to that text input.
I appreciate your help.
here is my html code link:
http://jsfiddle.net/Qd3n5/4/
<div class="download_list">
<div>
<p class="name"> samle-image.gif
</p>
</div>
<div class="size-text">
<input type="checkbox" name="delete" value="1" class="toggle">
</div>
</div>
<div class="download_list">
<div>
<p class="name"> favicon.ico
</p>
</div>
<div class="size-text">
<input type="checkbox" name="delete" value="1" class="toggle">
</div>
</div>
<div class="download_list">
<div>
<p class="name"> freedown.jpg
</p>
</div>
<div class="size-text">
<input type="checkbox" name="delete" value="1" class="toggle">
</div>
</div>
<div class="fileupload">
<button type="button" id="Inser_btn" class="btn btn-primary Inser_btn"> <i class="UpIcon icon-remove"></i>
<span>Insert</span>
</button>
</div>
<div class="test">
<input type="text" name="banners_image_local" value="some-text.png" size="51" maxlength="64">
</div>
You can try this :
$(function(){
$('#Inser_btn').click(function(){
var title='';
$('input[name="delete"]:checked').each(function(){
title+=$(this).closest('.size-text').prev().find('a').attr('title');
});
$('input[name="banners_image_local"]').val(title);
});
});
Demo
Use this piece of Code
$("#Inser_btn").click(function(){
var val = $(".toggle:checked").parent().siblings().eq(0).find("p a").text();
$(".test input").val(val);
});
JSFIDDLE
By doing so:
$(document).ready(function(){
$('#Inser_btn').click(function(){
$('.download_list').each(function(){
var checked = $(this).find('.toggle');
if(checked.is(':checked')){
$('input[name="banners_image_local"]').val($(this).find('a').html());
return false;
}
});
});
});
Here is a demo Fiddle
here is your code , have updated your JSFiddle
used jQuery for doing this click here
$(function(){
$("button").on('click', function(){
var checked = $("input[type='checkbox']:checked");
if(checked.length >0)
{
var value = checked.val();
$("input[name='banners_image_local']").val(value);
}
});
});
I am not sure whether this code works for you. Give it a try. (untested code)
$('#Inser_btn').on('click', function () {
$('input[name="banners_image_local"]').val('');
var ckText = $('input[name="delete"]:checked').val();
var textBox = $('input[name="banners_image_local"]').val();
textBox = textBox + " " + ckText;
$('input[name="banners_image_local"]').val(textBox);
});
If you want to get the checked checkboxes value in the input field this should do with jQuery:
$("#Inser_btn").click(function(){
$("#banners_image_local").val("");
$('input[name="delete"]:checked').each(function() {
$("#banners_image_local").val($("#banners_image_local").val() + ($(this).attr('value')));
});
});
Also set the input text to id="banners_image_local"
Best.
Try this:
$('#Inser_btn').click(function () {
$('input[name=banners_image_local]').val($('.toggle:checked').parent().prev().find('.File_Name').attr('title'));
});
Working Fiddle
Having a class name to input text would be better.
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..');
});
});