How to get the value of a dropdown using jquery? [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have a dropdown menu and a link in a table. What I want is to get the value of the dropdown menu that is being retrieve in a row.
<td><?php echo form_dropdown('status',array('Fine' => 'Fine', 'Disposable' => 'Disposable'),'','class="status" id="status"'); ?></td>
<td align="center">
<i class="icon-edit icon-large"></i>
<div id="return" style="float: left;">
<!--when this one is clicked I can get the value of the dropdown-->
<i class="icon-backward icon-large"></i>
</div>
How can I get the value of the dropdown When the link with the class of return is clicked? I've tried .closest() function but it returned undefined. Thanks!

Did you tried?
$(document).on('click', 'a.return', function() {
alert($(this).closest('tr').find('#status').val());
});
Note: Using elements with the same id is a bad practice and can give you problems along the road. Please consider to remove #status id from the elements and use a class when selecting the element.
Try this instead:
$(document).on('click', 'a.return', function() {
alert($(this).closest('tr').find('select.status').val());
});

Use :
$(".return").click(function({
selectedValue = $('select[name="status"]').val(); //using name tag
selectedValue = $('.status').val(); // using Class
selectedValue = $('#status').val(); // using Id
console.log(selectedValue);
}));

Related

Passing variable from Javascript to href in Codeigniter modal [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
How can I pass variable value from Javascript and use it as a variable in <a href> bootstrap modal ? for access controller and process with the spesific / targeted ID
Answer (Trick) support by #MikO
This is <a>tag in bootstrap modal looks like :
<a class="btn btn-primary" name="gotopick" id="gotopick" href="<?php echo site_url('onpartners/picking'). '/{passId}'; ?>">Pick</a>
Then, in your JS, you can replace that {passID} with the actual value of Variable with something like this :
$("#gotopick").attr("href", $("#gotopick").attr("href").replace('{passId}',yourvarvalue));
Thanks for sharing #MikO, hope your answer can help another people with same problem too here
Sharing is caring :)
You can add more attribute in your tag <a> like
<a data-id="{{ $pass_id }}" class="btn btn-primary" name="gotopick" id="gotopick" href="<?php echo site_url('onpartners/picking'). '/' . $pass_id; ?>">Pick</a>
So, you can get your data in your jquery like
var id = $('a#gotopick').data('id');

Get querySelector All multiple conditions [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'd like to get all a Elements which got contain the classes menu-item-link and mk-image-link. Is the following expression right?
a[class*="menu-item-link"], a[class*="mk-image-link"]
Didn't get anything selected so I guess not :)
Thanks for the help.
Best regards,
Anton
You have to do this 'a.menu-item-link, a.mk-image-link' it will check if a has this class.
const selected = document.querySelectorAll('a.menu-item-link, a.mk-image-link')
const selected2 = document.querySelectorAll('a.menu-item-link.js-smooth-scroll, a.mk-image-link.js-smooth-scroll')
console.log(selected)
console.log(selected2)
<div class="menu-item-link"><div>
<div><div>
<a class="menu-item-link"></a>
<a class="mk-image-link"></a>
<a class="mk-image-link menu-item-link"></a>
<a class="menu-item-link js-smooth-scroll" href="/superfood-rezepte/">SUPERFOOD REZEPTE</a> <a href="...." target="_self" class="mk-image-link">
document.querySelectorAll allows grouping of selectors.
Note that, it would select all elements which has the specified class names, so a wild-card is not needed. i.e. if you are aiming at menu-item-link and mk-image-link the below should work for you.
So, you could try the below:
var elements = document.querySelectorAll("a[class~='menu-item-link'], a[class~='mk-image-link']"); // OR
elements = document.querySelectorAll("a.menu-item-link, a.mk-image-link"); // Would both selects the same
elements.forEach(function(element, index, array) {
element.style.backgroundColor = "#999";
});
<a class="js menu-item-link js-smooth-scroll" href="/superfood-rezepte/">SUPERFOOD REZEPTE</a> <br>
<a class="js menu-item-link js-smooth-scroll-a" href="/superfood-rezepte/">SUPERFOOD </a> <br>
<br>
Something
<br>
Another Something
<br>
Another Something

Cannot Insert HTML on var using getElementById [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am trying to insert an HTML using my controller to a div, but I do not know what is wrong with my JS code, it always return Uncaught TypeError: Cannot set property 'innerHTML' of null. Is there anything I missed?
My Controller:
$this->load->model('model_admin','modeladmin');
$branchid = $this->input->post('subject_branchid');
$classdata = $this->modeladmin->getclassesviabranch('169APC00002');
$selectoption = "";
foreach ($classdata as $classitems)
{
$selectoption .= "<option value='".$classitems['class_id']."'>".$classitems['class_name']."</option>";
}
echo $selectoption;
My View
<select class="form-control" id="subject_branchid" name="subject_branchid" style="width:50%;" onchange="getvalues()">
<?php
foreach ($branches as $branch)
{
echo "<option value='".$branch['branch_id']."'>".$branch['branch_prefix']."</option>";
}
?>
</select>
<br>
<input type="text" id="price" name="price" />
<br>
<select class="form-control" id="subject_classid" name="subject_classid" style="width:50%;">
<div id="htmlcontainer" name="htmlcontainer"></div>
</select>
My JS
<script>
function getvalues()
{
//get the value of the select when it changes
var value = $("#subject_branchid").val()
//make an ajax request posting it to your controller
$.post('<?=site_url("admin/test")?>', {data:value},function(result)
{
//change the input price with the returned value
//$('#price').val(result);
document.getElementById('#htmlcontainer').innerHTML = '<h1>Something</h1>';
});
};
remove the hash #.use # when you use jquery to select element by id.
document.getElementById('htmlcontainer')
if you are using jquery then you should use # ( for id)
$('#htmlcontainer').html('text');
edit
another problem
you have added div tags inside select tag directly.select tag cannot have div tags directly only <option> or <optgroup> elements are allowed.so you have to change it.
read more
Go ahead and remove the hash symbol #, so it looks like this:
document.getElementById('htmlcontainer').innerHTML = '<h1>Something</h1>';
If you think about it, what you're trying to do is to fetch an element with an ID of #htmlcontainer, which doesn't exist.
In jQuery however, you use the # symbol.

Hide div if database contains value - Angular [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I want to check if a MySQL database contains a specific value. If it is true I want to hide a HTML <div>. Is this possible?
Can I hide elements with CSS & JS, or what should I use to hide the div?
Also, How would we add it in the Div like a NgIF statement
Thanks!
If you are seriously thinking about hiding the element with JavaScript (due to some kind of restriction or requirement). You can use following method.
CSS + Javascript + PHP way:
If you are thinking more like the Run code snippet section in Stack Overflow. Show expanded ONLY if it is set in database.
Then in that case you can implement something like this
$(function() {
$("#btnToggle").on("click", function() {
$("#comments").toggleClass("hide");
});
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Hide using CSS way. Hide class can be echoed from your PHP based on the database value -->
<button type="button" id="btnToggle">Toggle hide/show</button>
<div id="comments" class="hide">Comment section to hide</div>
Try something like this in your PHP file. I have included an example of an item that is always rendered, and something that is conditionally rendered.
<div id="userinfo">
<?php // This is always rendered by the server ?>
Username: <?php htmlentities($row['username']) ?>
<?php // This is rendered by the server if the column is true ?>
<?php if ($row['admin']): ?>
<div class="admin">(admin)</div>
<?php endif ?>
</div>
Something along the line of
if (your statement condition) {
echo '<script type="text/javascript">document.getElementById(DIV_ID").style.display= "none";</script>';
exit;
}

Selected Value of select tag does not change outside switch in angularjs [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
If I put a select tag inside ng-switch then two way binding does not work for select tag ng-model outside ng-switch.
Please refer following code
<div ng-switch on="OutputStep">
<div ng-switch-when="0">
Switch Step One
</div>
<div ng-switch-when="1">
Switch Step Two<br/>
<select ng-model="SelectedReviewOption" ng-options="review as review.DisplayValue for review in ReviewOptions">
</select>
Selected Value : {{SelectedReviewOption.DisplayValue}}
</div>
</div>
<button ng-click="OutputStep = '0'" ng-disabled="OutputStep == '0'">
Back
</button>
<button ng-click="OutputStep = '1'" ng-disabled="OutputStep == '1'">
Next
</button>
Selected Value Outside Switch : {{SelectedReviewOption.DisplayValue}}
In this fiddle, click Next button to view 2nd switch page. Change value in select tag. Observe that changed value cannot be displayed outside switch –
Having a '.' in your models will ensure that prototypal inheritance is in play. So, use
<input type="text" ng-model="someObj.prop1"> rather than
<input type="text" ng-model="prop1">
working fiddle
understanding scope
Use $parent.var_name in ng model , as ng switch creates it seperate scope , and the variable will be restricted to it if its not explicitly defined outside the scope by ng-init or something(in the controller)
Here is now..
You need to use $parent to get to parent scope, outside the switch block
$parent.SelectedReviewOption
http://jsfiddle.net/cobc0u3p/6/

Categories