How to get the parent div id in javaScript? - javascript

I want to get the parent div id (the div class is called "col-sm-2") when selecting each option in HTML "select" tag in each div. But it always gives only the div id of latest added product at "id" alert. For example if the id of my last added product is "7", it always gives "7" as the alert.
Here is my PHP code for getting the product id.
$jsql_ae7 = mysql_query("select request_list.product_id from request_list where request_list.product_id='{$jrowa2['id']}' and request_list.email='$visit_email'") or die(mysql_error());
$jfeta7 = mysql_fetch_assoc($jsql_ae7);
Here is my HTML code.
<div class="col-sm-2" id="<?php echo $jfeta7['product_id']; ?>">
<select id="formats_id" name="aformats" onchange="showFormat(this);">
<option value="<?php echo $jrowa2['formats']; ?>"><?php echo $jrowa2['formats']; ?></option>
<?php foreach($formats3 as $v3){ ?>
<?php if($v3 !== $jrowa2['formats']) { ?>
<option value="<?php echo $v3; ?>"><?php echo $v3; ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
Here is my javaScript code.
var showFormat = function(dd) {
var format_value = dd.options[dd.selectedIndex].value;
var scriptTags = document.getElementsByTagName('select');
var id = scriptTags[scriptTags.length - 1].parentNode.id;
alert(id);
};

Try to use each:
$('select').each(function() {
alert($(this).parent().attr('id'));
});

You coild get the id property of the immediate container div using closest() :
$('select').on('change',function() {
alert($(this).closest('div').prop('id'));
});

use this code
var showFormat = function(dd) {
var format_value = dd.options[dd.selectedIndex].value;
var scriptTags = document.getElementsByTagName('select');
var parent = scriptTags[scriptTags.length - 1].parentNode;
alert(parent.getAttribute('id'));
};

Try this:
Fiddle
$('#formats_id').change(function(){
alert($(this).parent().attr('id'));
});

First we will start with making the selection:
$('select').each(function() {
var selectField = $(this); // this will point to select element
});
There are two ways:
This will take direct parent of select
selectField.parent().attr('id');
This will select first ancestor that is a div with class 'my-class':
selectField.closest('div.my-class').attr('id');
Both work, but differ in deep of search:)

Related

Get selected value of a 2 dropdown items using jQuery

I am using the sql to retrieve the values for dropdown. I am only able to get only the 1st dropdownbox item. how do i get the second dropdown value. I am fetching the data from sql.
<label for="category">Category</label>
<select name="parent_cat" id="parent_cat">
<?php while($row = mysql_fetch_array($query_parent)): ?>
<option value="<?php echo $row['name']; ?>"><?php echo $row['name']; ?></option>
<?php endwhile; ?>
</select>
<br/><br/>
<label for="city">city</label>
<select name="city" id="city">
<?php while($row = mysql_fetch_array($query_parent1)): ?>
<option value="<?php echo $row['city']; ?>"><?php echo $row['city']; ?></option>
<?php endwhile; ?>
</select>
<br/><br/>
and my jquery looks like below
$(document).ready(function(){
$("#parent_cat").change(function(){
var selectedCountry = $("option:selected").val();
alert("You have selected the Country - " + selectedCountry);
});
});
I am able to get the 1st dropdown value how can i also get the second dropdown value
$(document).ready(function(){
$("#city").change(function(){
var selectedCountry1 = $("option:selected").val();
alert("You have selected the city- " + selectedCountry1);
});
});
Can i know where i went wrong
Looks like you are trying to get the value of the selected city in the change event handler.
In the event handler this refers to the changed element, so you can just read the its value
$(document).ready(function () {
$("#city").change(function () {
var selectedCountry1 = this.value; //or $(this).val()
//if you want to get the text of the selected option
var text = $(this).find('option:selected').text(); //find the selected option inside the current select
alert("You have selected the city- " + selectedCountry1);
});
});
$(document).ready(function () {
$("#parent_cat").change(function () {
var selectedCountry = this.value; //or $(this).val()
alert("You have selected the Country - " + selectedCountry);
});
});
The problem with your code is $("option:selected") returns all the option elements which are selected, but when you use the getter .val() it will return only the value of the first selected option element's value, so you will be getting the same value everywhere.
you need to use
$(this).val();
instead of
$("option:selected").val();

How to get a value of an attribute inside a loop using jQuery

I have this code from my HTML form.
<?php foreach ($charges as $c): ?>
<br><input type="checkbox" id="charge<?php echo $c->id; ?>" cash="<?php echo $c->amount; ?>"> <?php echo $c->description; ?>
<?php } ?>
when I tick a textbox I want the value for that element pops up.
So far, only the value for the first occurrence pops up.
This is the jQuery code. I know I'm missing something, but i dont know
function triggerChange1(){
$("#ch1").trigger("change");
}
$("#charge1").change(function() {
var v = $(this).attr('cash');
alert(v);
});
if($("#charge1").prop('checked')){
triggerChange1();
}
Firstly you should use a class attribute to group elements together. You should also use data-* attributes to assign any custom meta data to an element as creating your own non-standard attributes will render the page invalid and lead to potential UI and JS issues:
<?php foreach ($charges as $c): ?>
<br><input type="checkbox" class="charge" id="charge<?php echo $c->id; ?>" data-cash="<?php echo $c->amount; ?>"> <?php echo $c->description; ?>
<?php } ?>
Then you can have a single click handler to get the value from the element which raised the event:
$('.charge').change(function() {
var v = $(this).data('cash');
alert(v);
});
// raise the event on checked elements on load:
$('.charge:checked').change();
EDIT: As rightfully stated in Rory's answer you should prefix your custom attributes with data-
What you need is a class.
<?php foreach ($charges as $c): ?>
<br><input type="checkbox" class="charge" id="charge<?php echo $c->id; ?>" data-cash="<?php echo $c->amount; ?>"> <?php echo $c->description; ?>
<?php } ?>
$(".charge").change(function() {
var v = $(this).data('cash');
alert(v);
});
You can see it working here: http://jsfiddle.net/0cude9jr/
function triggerChange1(){
$("#ch1").trigger("change");
}
$(document).ready(function() {
$("#charge1").change(function() {
var v = $(this).attr('cash');
alert(v);
});
if($("#charge1").prop('checked')){
triggerChange1();
}
}
And you should use value attribute and not cash attribute.
And then you can call var v = $(this).val();

use php variable inside javascript retuns null

I have the following code:
<?php
include('Connection.php');
$query = $conn->prepare("SELECT DISTINCT c.movieName, c.castName, c.movieImdbId, f.year, f.posterLink FROM cast_movie as c JOIN film_info as f ON c.ImdbId = f.ImdbId WHERE c.castName = :q");
$query->execute(array(':q' => $searchText ));
while($row = $query->fetch(PDO::FETCH_ASSOC)):
?>
<tr>
<td><?php echo $row['movieName']; ?></td>
<td>Add to list
</tr>
<?php
endwhile;
?>
<script type="text/javascript">
$('#add').on('click', function (e) {
var selectedOpts = "<?php echo $row['movieName']; ?>";
var obj = {
"movie_name":selectedOpts,
"movie_info": ""
};
parent.window.opener.addToBasket(selectedOpts); //addToBasket is a function that add selected movies to the basket.
});
</script>
My question:
When I click on "add to list" link, it add Nothing to the basket (I mean, the function addToBasket works fine, but the value of "selected" is null..
Could someone kindly let me know how should I use <?php echo $row['movieName']; inside my javascript code? I know I have to put it between "", but I think there should be another problem.. (maybe because this row is not known in javascript code, but I have no idea how to fix it..)
I add also this image to clarify the problem:
Thanks in advance,
Not tested code, but this should work for you :)
<?php
include('Connection.php');
$query = $conn->prepare("SELECT DISTINCT c.movieName, c.castName, c.movieImdbId, f.year, f.posterLink FROM cast_movie as c JOIN film_info as f ON c.ImdbId = f.ImdbId WHERE c.castName = :q");
$query->execute(array(':q' => $searchText ));
while($row = $query->fetch(PDO::FETCH_ASSOC)):
?>
<tr>
<td><?php echo $row['movieName']; ?></td>
<td>Add to list
</tr>
<?php
endwhile;
?>
<script type="text/javascript">
function addmovie(movieName) {
var obj = {
"movie_name":movieName,
"movie_info": ""
};
parent.window.opener.addToBasket(obj); //addToBasket is a function that add selected movies to the basket.
}
</script>
You could use the .prev() jquery option, that will return the dom object previous to your '#add td.
in this case the that olds the movie name, and get the value inside the previous as selectedOps
There are couple of issues I can see:
You have used id="add" for all the rows(movies) and then attaching click event to the id. Change id="add" to class="add".
put the movie name in a data attribute like:
<td>Add to list
Then change the javascript to :
<script type="text/javascript">
$('.add').on('click', function (e) {
var selectedOpts = $(e).data("movieName");
var obj = {
"movie_name":selectedOpts,
"movie_info": ""
};
parent.window.opener.addToBasket(selectedOpts); //addToBasket is a function that add selected movies to the basket.
});
</script>
This should work.
Your first mistake is you are using "id" to fetch the value
Add to list
and you have used while loop because of which your id is getting duplicated and as we all know "id" of element in js should be unique throughout the page.
There are many solutions available for your problem out of which following is one
while($row = $query->fetch(PDO::FETCH_ASSOC)):
?>
<tr>
<td><?php echo $row['movieName']; ?></td>
<td>Add to list
</tr>
<?php
endwhile;
?>
Javascript :
<script type="text/javascript">
$('.add').on('click', function (e) {
var selectedOpts = $(this).attr('lang');
var obj = {
"movie_name":selectedOpts,
"movie_info": ""
};
parent.window.opener.addToBasket(selectedOpts); //addToBasket is a function that add selected movies to the basket.
});
</script>
Suggession : Avoid direct use of php in javascript code instead try to use hidden () variables.

Jquery get id from class dynamic

How can i get the value of a div class id?
I have this so far:
HTML
<div class="bolas-grad" id="<?php echo $list_titles[$zz]; ?>">
<?php
$list_titles = array();
foreach( $list_posts as $post ) {
$list_titles[] = $post->post_title;
}
echo $list_titles[$zz];
?>
</div>
JS
$(".bolas-grad").click(function() {
$(this).prop('id');
alert('id');
});
But instead of defining the 'id', how can i retreive the ID witch was clicked by the user?
Alert the ID, not the string 'id'
$(".bolas-grad").click(function() {
var id = $(this).prop('id');
alert(id);
});

Dynamically changing dropdown to textfield opencart

I am trying to change a drop down so that a user can add a custom input instead.
I am using VQMod and have currently set up a PHP array as follows:
<td><select name="electricColours">
<?php foreach (array("", "White", "Black", "Add Custom Colour..." ) as $eColours) { ?>
<?php if ($electricColours == $eColours) { ?>
<option value="<?php echo $eColours;?>" selected="selected"><?php echo $electricColours; ?></option>
<?php } else { ?>
<option value="<?php echo $eColours;?>"><?php echo $eColours; ?></option>
<?php }?>
<?php } ?>
<td class="left"><a onclick="AddCustomColour();" class="button"><?php echo "Add Custom Colours"; ?></a></td>
</select>
How would I be able to add new values to the eColours using the "Add Custom Colour..." so that the user inputs something and that colour is added on to the array.
I thought using Javascript so that it shows up as an alert and the user gets to choose their option would work however it keeps saying the variable is not defined.
<SCRIPT TYPE="text/javascript">
function AddCustomColour()
{
var colour=prompt("Please add custom colour","Silver");
var arrays = <?php echo json_encode($electricColours); ?>;
if (colour!=null)
{
electricColours.push(colour);
}
}
</SCRIPT>
Thanks
Use the DOM API:
var option = document.createElement("option");
option.setAttribute("value", value);
option.appendChild(document.createTextNode(value));
document.getElementById("the_select_element").appendChild(option);
Instead of:
document.getElementById("the_select_element")
You could do something like:
document.forms.the_form.electricColours
replace this code
<SCRIPT TYPE="text/javascript">
function AddCustomColour()
{
var colour=prompt("Please add custom colour","Silver");
var arrays = <?php echo json_encode($electricColours); ?>;
if (colour!=null)
{
electricColours.push(colour);
}
}
</SCRIPT>
With this Code
<script type="text/javascript">
function AddCustomColour()
{
var colour=prompt("Please add custom colour","Silver");
var ob = $("#electricColours");
if (colour!=null)
{
ob.prepend("<option value="+ val +">" + text + "</option>");
}
}
</script>

Categories