Hi I'm trying to get the previous span in my html that was used as label, I've tried jquery .prev([selector]), but the selector doesn't work, it return the parent span of the input field I'm getting.
here is my HTML and script:
<form>
<span class="a-text-bold">
Add product detail
</span>
<div class="a-section a-spacing-base">
<div class="a-section a-spacing-mini">
<span class="a-text-bold">
Brand name
</span>
</div>
<span class="a-declarative" data-action="form-item-action">
<span class="a-declarative">
<input type="text" maxlength="50" value="Bubble Goth Babes" id="data-draft-brand-name" autocomplete="off" name="data[draft][brand_name]" class="a-input-text a-form-normal gear-filter-control-characters-textbox lock-needs-hidden">
</span>
</span>
</div>
<div class="a-section a-spacing-base">
<div class="a-section a-spacing-mini">
<span class="a-text-bold">
Title of product
</span>
</div>
<span class="a-declarative" data-action="form-item-action">
<span class="a-declarative">
<input type="text" maxlength="50" value="Cute Zombkitty Zombie Kitten Neon Funny Brain Cat" id="data-draft-name-en-us" autocomplete="off" name="data[draft][brand_name]" class="a-input-text a-form-normal gear-filter-control-characters-textbox lock-needs-hidden">
</span>
</span>
</div>
<button onclick="getLabelAndValue()">Get</button>
</form>
<script type="text/javascript">
function getLabelAndValue(){
var focused = document.activeElement;
var form = document.getElementsByName(focused.form.name);
for (var i = 0; i < form.length; i++) {
if(form[i].tagName.toLowerCase() == "input" && form[i].getAttribute('type').toLowerCase() == "text"){
console.log($("#" + form[i].id).prev("span .a-text-bold").text()); //Doesn't work
console.log(form[i].value); //Already working, means I'm pointing to right element
}
}
}
</script>
What I'm trying to see on the console.log are:
//Brand Name
//Bubble Goth Babes
//Title of Product
//Cute Zombkitty Zombie Kitten Neon Funny Brain Cat
note : I'm already able to get the form elements value ( form[i].value
), just the span before it with className a-text-bold
is what I need to get.
I would stick with using jQuery for everything, since it's so easy to use. Here's essentially the same code, only getting the label a different way. Note that you can't use prev()
, since the span
is not a sibling of the input
. You have to travel up the DOM to a common ancestor, then back down the the span
.
function getLabelAndValue(e) { e.preventDefault(); var form = e.target.form; var inputs = $('input[type="text"]', form); inputs.each(function (input) { // get the closest common ancestor, then find the "a-text-bold" span. var label = $(this).closest(".a-section").find(".a-text-bold").text().trim(); console.log(label); console.log(this.value); //Already working, means I'm pointing to right element }); } window.onload = function() { document.getElementById("get").addEventListener("click", getLabelAndValue); };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <span class="a-text-bold"> Add product detail </span> <div class="a-section a-spacing-base"> <div class="a-section a-spacing-mini"> <span class="a-text-bold"> Brand name </span> </div> <span class="a-declarative" data-action="form-item-action"> <span class="a-declarative"> <input type="text" maxlength="50" value="Bubble Goth Babes" id="data-draft-brand-name" autocomplete="off" name="data[draft][brand_name]" class="a-input-text a-form-normal gear-filter-control-characters-textbox lock-needs-hidden"> </span> </span> </div> <div class="a-section a-spacing-base"> <div class="a-section a-spacing-mini"> <span class="a-text-bold"> Title of product </span> </div> <span class="a-declarative" data-action="form-item-action"> <span class="a-declarative"> <input type="text" maxlength="50" value="Cute Zombkitty Zombie Kitten Neon Funny Brain Cat" id="data-draft-name-en-us" autocomplete="off" name="data[draft][brand_name]" class="a-input-text a-form-normal gear-filter-control-characters-textbox lock-needs-hidden"> </span> </span> </div> <button id="get">Get</button> </form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.