I'm trying to use jquery to get the closest element to an input field so I can use the element's text/html as the value of the input field.
my jquery looks like this:
<script>
jQuery("[name=currencies]").val(Currency.currentCurrency).change(function() {
$(".moneyPrice").val($(this).closest('.mypro').find($("span.money").text()));
});
</script>
the span.money is being created dynamically.
and my HTML looks like this:
<div align="center" class="mypro" style="position:relative; width:270px; height:570px; border:solid 1px #CCC; margin:10px; float:left; overflow:hidden; padding:5px;">
<a class="overlay" href="product.php"></a>
<!--<a class="overlayBtns" href="">Quick View</a>-->
<a class="overlayAdd" href="javascript:{}" onclick="form'.$id.'.submit();"><i class="fa fa-shopping-cart"></i>
Add To Basket</a>
<img width="100%" src="product_images/'.$id.'Image1.jpg" alt="" />
<p style="padding:2px;">'.$product_name.'</p>
<p style="padding:2px;">'.$manu.'</p>
<div style="padding:5px;" class="price">
<div class="prod-price"><span class=money>£'.$price.'.00</span></div>
<form id="form'.$id.'" name="form1" method="post" action="cart.php">
<input type="hidden" name="pid" id="pid" value="'.$id.'" />
<input type="text" name="" class="moneyPrice" value="" />
</form>
</div>
</div>
the HTML code above also, created dynamically using PHP.
so basically, when the select option changes, my jquery code fires up. But I get this in my input field [object object].
if I change my jquery code to this:
$(".moneyPrice").val($("span.money").text());
it will display the span.money text in my input fields but the issue is that it will display ALL of the dynamically created span.money texts in all the input fields.
So for that reason, I need to get the closest span.money, to .moneyPrice input field and then display the span.money into the closest .moneyPrice input field.
Sorry if this is a bit confusing and I hope I get some help from yo guys.
any help would be appreciated.
EDIT:
<select id="currencies" name="currencies">
<option value="GBP" selected="selected">GBP</option>
<option value="USD" >USD</option>
<option value="NGN">NGN</option>
<!--<option value="AUD">AUD</option>
<option value="SGD">SGD</option>-->
<option value="EUR">EUR</option>
</select>
EDIT:
i have created a working jsfiddle so you can see the issue:
Your syntax isn't quite right , likely as a result of trying to do too much in one line
$(".moneyPrice").val($(this).closest('.mypro').find($("span.money").text()));
Should be
$(".moneyPrice").val($(this).closest('.mypro').find("span.money").text());
Note that your find() would be the same as
var txt = $("span.money").text();// is not a selector
find(txt) // returns jQuery object not a text value but `txt` isn't a valid selector either
What you would have to do is to change
$(".moneyPrice").val($(this).closest('.mypro').find($("span.money").text()));
to
$(".moneyPrice").val( $(this).closest('.mypro').find("span.money").text() );
I've also noticed some major errors in the html-code. When having variables in the html-code you would have to surrond them with "php start" and "php end".
Something like...
I want <?php echo $nr_of_icecreams;?> ice-creams
NOT
I want $nr_of_icecreams which seems what you're doing in your code