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.
Related
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 5 years ago.
Improve this question
I think I'm missing something stupidly simple but can't figure out why this isn't working. I'm trying to use 4 values from 4 text inputs and activate an alert when the values = the string value stated.
<div id="AnswersFriends">
<input type="text" align="center" id="TextFriend1" oninput="checkchange">
<input type="text" align="center" id="TextFriend2" oninput="checkchange">
<input type="text" align="center" id="TextFriend3" oninput="checkchange">
<input type="text" align="center" id="TextFriend4" oninput="checkchange">
</div>
<script type="text/javascript">
function checkchange(){
var Ans1 = document.getElementsByID('TextFriend1').value;
var Ans2 = document.getElementsByID('TextFriend2').value;
var Ans3 = document.getElementsByID('TextFriend3').value;
var Ans4 = document.getElementsByID('TextFriend4').value;
if(Ans1=="Joe" && Ans2=="Joe" && Ans3=="Hugo" && Ans4=="Nathan") {
alert("WellDone");
}
}
</script>
change this:
oninput="checkchange"
to this for all the input tags:
oninput="checkchange()"
Also, change this:
document.getElementsByID('TextFriend1').value;
to this:
document.getElementById('TextFriend1').value;
then, do the same for the other getElementById() methods.
To call a function you have to put () after its name
There is no function called getElementsByID, it is getElementById (with a singular element and a lower-case d on the end).
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 clone a div without its value. Everything I've tried so far copies the value as well.
Here is my jQuery function
$('#add_more').click(function(){
$('#div_to_clone).clone().insertBefore('#add_more').find('input').val('');
});
This seems to be working fine for me:
$('#add_more').click(function() {
$('#div_to_clone').clone().insertBefore('#add_more').find('input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div_to_clone">
<input type="text" />
</div>
Add more
Well, I recommend you changing your id to a class since the value of id attribute should be unique throughout the page. You might be getting the issue in some browser due to duplicate id.
$('#add_more').click(function() {
$('.div_to_clone:first').clone().insertBefore('#add_more').find('input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div_to_clone">
<input type="text" />
</div>
Add more
Assuming that your html code is similar to this.
<div class="ContainerDiv">
<div id=ClonethisDiv><input class="InputTxtBox" type="text" /></div>
</div>
clone
Now,
$("body").on("click", "a", function() {
$("#ClonethisDiv").clone().appendTo(".ContainerDiv").find(".InputTxtBox").val("");
});
Hence on click, anchor tag u will able to get a copy of Div with Id='ClonethisDiv' and appended to the container Div.
Here while cloning(copy) input element with a class '.InputTxtBox', will be emptied and get copied. No worry! TextBox Values which already appended to container Div doesnot change.
Hope this will help you.
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;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a page in which i want a form to be dynamically inserted according to datalist value, without reloading the page
<form action='#' method='get'>
<input list="category" name="category">
<datalist id="category">
<option value="Home">
<option value="Car">
<option value="Mobile">
</datalist>
<input type="submit">
</form>
For example if a person select Home, so the Home form should be shown at the bottom of the data list.
Any one have an idea how to do it?
You have many options. You can insert them as a string using innerHTML
document.getElementById("id_here").append(string); //or innerHTML = string; where string = your code above!
Or you could take another route and dynamically assemble a form using createElement.
var x = document.createElement("form");
x.id = "derp";
document.body.idtoappendto.appendChild(x);
Try this,
I think this will be simple solution
$('#submit').click(function () {
var cat = $('#cat').val();
$('#'+cat).show();
});
Updated Fiddle
Create a html file which contains your form or multiple html files containing one form each and in the page where you want to display the form write some ajax request based on which page the user is and call the corresponding form file and get its html and display it where ever you want.
for example in home page you want homeform.html to be displayed then create homeform.html in the directory and in home.html write an ajax function which fetches the homeform.html and display it on your home.html page.
You can simply doing this using below code..
First of all set form id attribute with the same name of category value & initially hide all forms using style="display:none". Then
$("input[type='submit']").click(function () {
var category = $("input[name='category']").val();
$('#'+category).show();
});
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);
}));