I have a HTML that looks like:
I am trying to get current parent closest object value.
In this case I'm trying to get values of owner_address, owner_name.
<div class = "form-group row">
<div class="col-xs-6 form-group">
<input id="owner_name" type="text></input>
</div>
<div class="col-xs-6 form-group">
<input id="owner_address" type="text></input>
</div>
</div>
<div class="form-group row">
<div class="col-xs-6 form-group">
<input onclick="runFunction($(this))" id="update" type="text></input>
</div>
</div>
JS part where I try to get values.
<script>
function runFunction(thisObj){
var owner_name = thisObj.parent().closest('#owner_name').val()
#Gives me undefined.
}
</script>
I already tried selecting it using ID; it doesn't work in my case because the data are being rendered inside a modal; where each modals are unique. I want to get specific owner name inside my each unique modal; that is why I thought using $(this) would be convenient.
try this
var owner_name = thisObj.parent().parent().closest('.form-group').find('#owner_name).val()
try this demo: https://jsfiddle.net/xianshenglu/4nt42cso/4/
i change the js,if you use id selector you don't have to use other selectors.
function runFunction(thisObj){
var owner_name = $('#owner_name').val()
alert(owner_name);
}
also change your html,just correct the syntax error.for example,there should not be code like this:</input>,,,,
<div class="form-group row">
<div class="col-xs-6 form-group">
<input id="owner_name" type="text" />
</div>
<div class=" col-xs-6 form-group ">
<input id="owner_address " type="text" />
</div>
</div>
<div class="form-group row">
<div class="col-xs-6 form-group">
<input onclick="runFunction($(this))" id="update" type="text" />
</div>
</div>
Put this in your fucntion and check it return desired value or not.
thisObj.parent().parent().parent().find( "#owner_name" ).val();
Related
I have a form which adds a row of text inputs dynamically if a user wants to add a new row, it automatically populates a new row with an input field with the same id and class as the previous ones. My question is how can i get the value of each text input field?
<div class="col-xs-12 col-md-12" id="items">
<div class="row add-items">
<div class="col-md-6 col-sm-12 mx-auto">
<div class="form-group">
<label for="item">Item:</label>
<input type="text" class="form-control" id="item" placeholder="New item" name="item[]">
</div>
</div>
<div class="col-md-3 col-sm-12 mx-auto">
<div class="form-group">
<label for="charge">Item cost:</label>
<input type="text" class="form-control" name="charge[]" id="charge" placeholder="cost">
</div>
</div>
<div class="col-md-3 col-sm-12 text-right">
<button id="add-item" class="addBtn" type="button">+ item</button>
</div>
</div>
</div>
Here's what I did: I started by changing your architecture a bit by putting the input fields that contain the product name and price into a global item div. now, every product (item) will have its own name and price field!
Then with Jquery, if we click on add-item I take the first item I make an outerHTML and I add it to the div containing all the items
Then to get all items I created a button named get-items where when it pressed, I create an array, I browse all the items and for each item , I take its field name and the price field that I push in the array!
$("document").ready(function () {
$("#add-item").on('click', function () {
$('.add-items').append($('.add-items .item')[0].outerHTML)
})
$("#get-items").on('click', function () {
var arr = []
$.each($(".item"), function () {
arr.push({name: $(this).find('input').first().val(), cost:$(this).find('input').last().val()})
})
console.log(arr)
})
})
<!-- I presume you've included Jquery like this -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-md-12" id="items">
<div class="row add-items">
<div class="item">
<div class="col-md-6 col-sm-12 mx-auto">
<div class="form-group">
<label for="item">Item:</label>
<input type="text" class="form-control" id="item" placeholder="New item" name="item[]">
</div>
</div>
<div class="col-md-3 col-sm-12 mx-auto">
<div class="form-group">
<label for="charge">Item cost:</label>
<input type="text" class="form-control" name="charge[]" id="charge" placeholder="cost">
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-12 text-right">
<button id="add-item" class="addBtn" type="button">+ item</button>
</div>
<div class="col-md-3 col-sm-12 text-right">
<button id="get-items" class="addBtn" type="button">Get Items Array</button>
</div>
</div>
That's how you get the value of your text input values
document.getElementById("item").value
document.getElementById("charge").value
First of it would be good if you can post your JS code as well so I can assist you a little bit better.
Second I would not give the same elements the same ID everytime, the class is fine however.
Now you can get your inputs text using:
$(".your-input-class").map(function(){
return this.val();
});
To get the text of the last (e.g. newest) input element use:
$(".your-input-class").last().val();
Since I'm not sure what exactly you are trying to achieve at the moment I'll also leave this code:
// Access new item input text (if single input):
$("#item").val();
// Access new item input text (if multiple):
$("[name='item[]']").map(function(){ return this.val(); })
// Access charge input (if single input):
$("#charge").val();
// Access charge input (if multiple):
$("[name='charge[]']").map(function(){ return this.val(); })
$("#items").delegate("#charge", "blur", function(){
var value = $(this).val();
});
I have finally gotten a way to do it.
I am trying to get the next closest input of same class or different class that is available in the next row div child it says undefined am unable to get it.
[Fiddle]
$(".std_amt").change(function() {
alert($(this).parent('.row').next(".row").children("input.std_amt").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_0" id="relative_name_0" value="">
<label class="help-inline"></label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_1" id="relative_name_1" value="">
<label class="help-inline"></label>
</div>
</div>
</div>
Try to use closest instead of parent like below
$(".std_amt").change(function() {
alert($(this).closest('.row').next(".row").find("input.std_amt").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_0" id="relative_name_0" value="">
<label class="help-inline"></label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_1" id="relative_name_1" value="">
<label class="help-inline"></label>
</div>
</div>
</div>
.parent('.row') looks at the direct parent, it does NOT climb the tree. You need to use closest('.row') to reference the row. And you should use find() and not children() since the input is not a direct child.
$(this).closest('.row').next(".row").find("input.std_amt")
I have the following HTML:
<div class="field text-left">
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Name</label>
<input type="text" id="name" name="name" placeholder="Name"/>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Surname</label>
<input type="text" id="surname" name="surname" placeholder="Surname"/>
</div>
</div>
<div class="field">
<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">
<div class="col-lg-12 col-sm-12 col-xs-12">
Next Step
</div>
</div>
</div>
The above is in a multi-step form with other values and hidden panel.
I am trying to figure out how to remove the Class disabled from the a tag with id fullnameBtn only when both surname and name fields are entered using JavaScript or jQuery.
Can someone help on the right path?
Thanks
1-check if both the fields are filled
2- then remove the "selected" class
if($("name") && $("surname")){
$("#fullnameBtn").removeClass("disabled");
}
Here is something to toggle class [but still i guess you want to disable and enable the nextPage link for which you have to manually handle in disabled class]
$(document).ready(function(){
// lets monitor the input of values for inputs you can use a class also
$('input').on('input',function(){
// added for bit of simplicity or you can directly get valuess
var surname = $('#surname').val();
var name = $('#name').val();
if(surname != "" && name != "" )
{
// values seems filled remove class
$('#fullnameBtn').removeClass('disabled');
}
else
{
// user has emptied some input so add class again.
$('#fullnameBtn').addClass('disabled');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field text-left">
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Name</label>
<input type="text" id="name" name="name" placeholder="Name"/>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Surname</label>
<input type="text" id="surname" name="surname" placeholder="Surname"/>
</div>
</div>
<div class="field">
<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">
<div class="col-lg-12 col-sm-12 col-xs-12">
Next Step
</div>
</div>
</div>
I am cloning a form, and it gives me a lot of data I don't want. I am already doing the following which helps
var formDataUnformatted = $("#content").html();
var cleanFormData = formDataUnformatted.replace(/\t/, "").replace(/ ui-draggable| element/gi, "").replace(/<div class="close">.<\/div>/g, "").replace(/ data-(.+)="(.+)"/g, "");
This still leaves me with a lot of stuff however. Now I can see myself doing many replace calls to clean everything up, which does not seem that good. The above leaves me with something like the following (but I have removed a lot of code which is not really necessary).
<input style="" class="ui-sortable-handle" name="_token" value="sdfsd" type="hidden">
<div class="tab-pane active ui-sortable-handle" id="editor-tab">
<fieldset id="content_form_name">
<legend>Document Name</legend>
</fieldset>
</div>
<div class="form-group-handle">
<label for="text_input" class="control-label col-sm-4">Text Input</label>
<div class="controls col-sm-7">
<input id="text_input" class="form-control" name="text_input" type="text">
</div>
</div>
<div class="form-group-handle">
<label for="textareaInput" class="col-sm-4 control-label">Text Area:</label>
<div class="controls col-sm-7">
<textarea rows="5" class="form-control" id="textareaInput" name="textareaInput" cols="50"></textarea>
</div>
</div>
My aim is to get the divs and contents of any div which has the class form-group-handle. So essentially, the above should be turned into
<div class="form-group-handle">
<label for="text_input" class="control-label col-sm-4">Text Input</label>
<div class="controls col-sm-7">
<input id="text_input" class="form-control" name="text_input" type="text">
</div>
</div>
<div class="form-group-handle">
<label for="textareaInput" class="col-sm-4 control-label">Text Area:</label>
<div class="controls col-sm-7">
<textarea rows="5" class="form-control" id="textareaInput" name="textareaInput" cols="50"></textarea>
</div>
</div>
Instead of finding all the bad divs, and using something like replace, is there any way to just find all divs with the class I want, and keep that content?
Thanks
Use clone to that specific class:
var clone = $('.form-group-handle').clone();
$(".form-group-handle").each(function()
{
console.log($('.form-group-handle').clone());
// or
console.log($('<div>').append($('.form-group-handle').clone()).html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="" class="ui-sortable-handle" name="_token" value="sdfsd" type="hidden">
<div class="tab-pane active ui-sortable-handle" id="editor-tab">
<fieldset id="content_form_name">
<legend>Document Name</legend>
</fieldset>
</div>
<div class="form-group-handle">
<label for="text_input" class="control-label col-sm-4">Text Input</label>
<div class="controls col-sm-7">
<input id="text_input" class="form-control" name="text_input" type="text">
</div>
</div>
<div class="form-group-handle">
<label for="textareaInput" class="col-sm-4 control-label">Text Area:</label>
<div class="controls col-sm-7">
<textarea rows="5" class="form-control" id="textareaInput" name="textareaInput" cols="50"></textarea>
</div>
</div>
If you use jQuery with class selector, the jQuery object contains only the divs you need
$('div.form-group-handle')
But the jQuery object contains a collection of DOM elements (you chan check the number of elements matching your selector with $.('div.form-group-handle').length), so you need to iterate through them to build your final string.
If you want the html of each div
var formDataUnformatted = '';
$('div.form-group-handle').each(function() {
formDataUnformatted += this.outerHTML;
// where 'this' represents each matching div
});
EDIT (regarding your comment to Jordan Lowe answer indicating that html is not in the DOM)
If formDataUnformatted is a string representing html, you can filter that content to get the collection of divs
$(formDataUnformatted).filter('div.form-group-handle');
With a mixture of a few of these answers, I seem to have found a problem. Some of the above were through errors because it is not a JQuery Object. So I came up with the following solution
var formDataUnformatted = $("#content").html();
var cleanFormData = formDataUnformatted.replace(/\t/, "").replace(/ ui-draggable| element/gi, "").replace(/<div class="close">.<\/div>/g, "").replace(/ data-(.+)="(.+)"/g, "");
var dataArray = new Array();
$(cleanFormData).filter('div.form-group-handle').each(function() {
dataArray.push(this.outerHTML);
});
I have an html structure similar to the one below
<div id="factsParent" class="col-md-12">
<div id="factBody1" style="margin-bottom:20px;" class="fact col-md-12 fact-body">
<div class="form-group col-md-10">
<div class="col-md-12">
<div class="box-wrap">
<input type="text" name="fact" placeholder="Enter a Fact" value="" class="fact form-control fact-title">
</div>
</div>
</div>
</div>
<div id="factBody2" style="margin-bottom:20px;" class="fact col-md-12 fact-body">
<div class="form-group col-md-10">
<div class="col-md-12">
<div class="box-wrap">
<input type="text" name="fact" placeholder="Enter a Fact" id="fact2" value="" class="fact form-control fact-title">
</div>
</div>
</div>
</div>
I would like to loop through each of the .fact classes and then get the value of each input type=text
$('.fact').each(function(i){
console.log(this.$('input[name=fact]').val());
});
Running the code above gave me an undefined error, how would I run a loop through all .facts and then get value of the input[type=text]; I need to be able to get it exactly in this manner as I would be adding more input fields inside each div.
input elements has class .fact. you can simple iterate over input elements with class .fact by modifying the selector:
$('input.fact').each(function(i){
console.log($(this).val());//or this.value
});
for iterating over div elements:
$('div.fact').each(function(i){
console.log($(this).find('input').val());
});
The class .fact is quite overused in your markup; it is not clear whether you're referring to div.fact or input.fact. And there's another class that might cause confusion: input.Fact. So I have provided one of the possible ways you can approach this:
$('div.fact').each(function() {
console.log( $(':text', this).val() );
});
Of course, this code snippet is useless without an event. For example you may have a button which after the user has provided input the user would then click the button to fire up this code snippet as follows:
$('button').on('click', function() {
//above code
});
$('div.fact').each(function() {
console.log( $(':text', this).val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="factsParent" class="col-md-12">
<div id="factBody1" style="margin-bottom:20px;" class="fact col-md-12 fact-body">
<div class="form-group col-md-10">
<div class="col-md-12">
<div class="box-wrap">
<input type="text" name="fact" placeholder="Enter a Fact" value="Test 1" class="fact form-control fact-title">
</div>
</div>
</div>
</div>
<div id="factBody2" style="margin-bottom:20px;" class="fact col-md-12 fact-body">
<div class="form-group col-md-10">
<div class="col-md-12">
<div class="box-wrap">
<input type="text" name="fact" placeholder="Enter a Fact" id="fact2" value="Test 2" class="fact form-control fact-title">
</div>
</div>
</div>
</div>