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();
});
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 17 hours ago.
This post was edited and submitted for review 17 hours ago.
Improve this question
I have them both as HTML files in my repo. The button is just meant to switch from pages for now. I will add the function for the inputs and conditions later. I just want to get in working before I add anything. There are also no errors that or popping up. I cannot use a tag as I need to change the URL to pass data through it, so I need to have it in JS so I can change it with the data from the input.
The plan is to have the user put in their name in a text input, and have it inside the Url, then have the 2nd page process the name and output a text and photo.
This is the code that I have tried.
const nameButton = document.getElementById("nameBtn");
$(nameButton).click(function(){
preventDefault()
function change_page(){
window.location.replace("page-two.html");
};
change_page()
});
This is the Html:
<input class="font" type="text" id="inputName" value="Type in
your name..."></input>
<button class="fonts" id="nameBtn">Ready?</button>
</form>
</div>
</body>
<script src="scripts/script.js"></script>
</html>
Short answer, only replace the pathname
window.location.pathname = 'page-two.html'
In your case:
const nameButton = document.getElementById("nameBtn");
nameButton.addEventListener('click', function (event) {
event.preventDefault()
window.location.pathname = "page-two.html";
});
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.
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 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/
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);
}));