I need to create a fill in the blanks question where the question text will be loaded dynamically through xml. I don't know the length of the question. I have to place a text area for question and text input for answer. The positioning of these controls should be aligned based on the input.
Any tips on how to achieve this using flex air application?
Check this jQuery plugin. It exactly does what you are looking for.
JEditable
If you are not inclined towards using the plugin, then try the code below:
<div>
<div>
<label class="editable">Name</label>
<input class="editable" type="text" name="name" style="display:none"/>
</div>
<div>
<label class="editable">Type</label>
<input class="editable" type="text" name="type" style="display:none"/>
</div>
<div>
<a class="edit" href="#">Edit</a>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".edit").click(function(){
var $this = $(this);
var text = $this.text();
if(text=="Edit"){
$this.text("Cancel");
}
else{
$this.text("Edit");
}
$(".editable").toggle();
});
$("input.editable").change(function(){
$(this).prev().text($(this).text());
});
});
</script>
To bind the click event handler to the anchor element use the live function of jQuery. e.g:
$("a.ff-save").live("click", function (){
alert("ok");
});
Related
I have a text box for user input, how can I take the input a user enters and display it on the same page (without reloading or redirecting to a different page). (example, comments on YouTube videos)
Here is my code for the user input text box so far:
<div class="container">
<form>
<label for="post" id="post">What's on your mind?</label><br>
<input type="text" id="post-box" name="post">
<button>Comment</button>
</form>
</div>
Do you mean like this? It require DOM manipulation and event listener. Make sure refer this two to help you more. :D
First, add event listener to listen any changes on keyboard press for the form (even though i just put it globally). Here all the your listener references https://www.w3schools.com/jsref/dom_obj_event.asp
Second change the innerHTML to display ur name. Here for your references
https://www.w3schools.com/jsref/prop_html_innerhtml.asp
<html>
<p id="p-display"></p>
<div class="container">
<form>
<label for="post" id="post">What's on your mind?</label><br>
<input type="text" id="post-box" name="post">
<button id="btn-submit">Comment</button>
</form>
</div>
</html>
<script>
var post_item = document.getElementById("post-box");
var btn = document.getElementById("btn-submit");
addEventListener("keyup", function changeValue()
{
console.log(post_item.value);
document.getElementById("p-display").innerHTML = post_item.value;
});
</script>
I can't make a and an tag combine on HTML.
I'm trying to have text that when you click on it both click a checkbox and also lead you somewhere on the page i've tried to make it like that:
<a href"#somewhere"><label for"somecheckbox">Some Text</label></a>
But only the label worked, then I tried it like that:
<label for"somecheckbox"><a href"#somewhere">Some Text</a></label>
But then only the link works, is there any way in which we can use both?
The problem is you are trying to nest interactive content. This is something you can't do via the W3C spec. See the a tag, for instance with it's permitted content.
You will need to use javascript to achieve what you want to do.
Here is a quick example:
var links = document.querySelectorAll("[data-for]");
//Set Event Handler
for(var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function(event){
//Get the target cb from the data attribute
var cbTarget = this.dataset.for;
//Check the cb
document.getElementById(cbTarget).checked = true;
});
}
.head {margin-bottom: 100vh;}
<div class="head">
Click Me <input type="checkbox" id="aCheckBox" />
</div>
<div id="aTarget">A Target</div>
It's not possible to do both navigation and toggle checkbox using tags, please use javascript to focus on target when checkbox is checked.
document.getElementById("somecheckbox").addEventListener("change", function(e){
// see if it is checked
if(e.target.checked){
// and focus to specific id
document.getElementById("somewhere").focus();
}
})
When you click on the label, both the check box is checked and it goes to a location.
const label = document.querySelector('[for=checkbox]');
const checkBox = document.querySelector('[name=checkbox]');
label.addEventListener('click', function (){
checkBox.setAttribute("checked", "true");
location.href = "#location";
});
#location {
position: absolute;
bottom: -100px;
}
<label for="checkbox">
<input type="checkbox" name="checkbox"/>
Check
</label>
<p id="location"> Some location </p>
<!DOCTYPE html>
<html>
<body>
<script>
function Redirect(){
if (document.getElementById('vehicle3').checked)
{
window.location = "https://www.tutorialspoint.com";
}
}
</script>
<h1>Show checkboxes:</h1>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car<br>
<input type="checkbox" name="vehicle3" id='vehicle3' value="Boat" onClick='Redirect();'> I have a boat<br><br>
<input type="submit" value="Submit">
</body>
</html>
This solution is what everyone suggesting using JavaScript your problem can be solved easily. As soon as you click on the 3rd checkbox it redirects you to a new webpage
I have a tax calculator with many inputs which pass data to each other. The user only sees one input and the other inputs are in a hidden div (used just for calculation propose).
the Google-Chrome element inspector not showing the value of inputs when they are in hidden div (however it shows the value of inputs with attribute type="hidden"). So how can I inspect and debug the form with hidden divs?
$(document).ready(function(){
$("#price").on("input paste keyup",function(){
var power=$("#power").val();
$("#taxSet").val(parseInt($("#price").val()) * 0.1);
$("#taxAmount").val(parseInt($("#taxSet").val())*power +
parseInt($("#price").val()));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="price">
<div style="display:none">
<input id="power" value="5">
<input id="taxSet">
<input id="taxAmount">
</div>
Did you mean "I can't see attribute on DOM" like #power?.
My first suggest use attr, so change attribute value.
var fakeValye = 10;
$("..blah").val(fakeValue).attr('value', fakeValue);
If you don't say this, you just talking about debugging. You should use debugger keyword.
I refactored your code for you.
$(document).ready(function() {
$("#price").on("input paste keyup", function() {
debugger;
var power = $("#power").val();
var taxtSet = parseInt($("#price").val()) * 0.1;
$("#taxSet").val(taxtSet);
var taxAmount = parseInt($("#taxSet").val()) * power + parseInt($("#price").val())
$("#taxAmount").val(taxAmount);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="price">
<div style="display:none">
<input id="power" value="5">
<input id="taxSet">
<input id="taxAmount">
</div>
I need to add multiple actions to list group items, all the Purple area needs to follow a link, and the Yellow area to open a Modal.
Currently the list group items are anchors, since is not valid HTML to nest anchors or buttons, I searching for another solution.
Any ideas?
Icon have id, so give id to input and use jQuery code.
$(document).ready(function(){
$('#simple').click(function(){
window.onload = window.location.href = "http://stackoverflow.com";
});
});
$(document).ready(function(){
$('#basic-addo1').click(function(){
window.onload = window.location.href = "http://stackoverflow.com";
});
});
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" id="simple">
</div>
I have a form and a working reset button. When i click the button all inputs and text area boxes are clear. I was wondering if there's a way to create a clear/reset button that will clear only some inputs and not what i have inside my text area box.
Here's the jsfiddle solution.
<form>
<input type="text" class="clearit" /><br />
<input type="text" class="clearit" /><br />
<input type="text" class="clearit" /><br />
<textarea id="t5"></textarea><br />
<input type="reset" id="reset" />
</form>
$(document).ready(function(){
$('#reset').on('click',function(e){
e.preventDefault();
$('.clearit').val("");
});
});
Assign all input elements a class let suppose inputs and different ids let suppose the id of text area is text_area.
<input type = "textarea " id = "textarea ">
Now with jquery
$(function(){
$('.inputs').each(function()
{
var id = $(this).attr('id');
if(id == 'textarea '){
}else{
$(this).attr('value',"");
}
});
})
Done!
use jquery it will help u , give the class to fields which u want to clear on click of button and give id to your button
$('#id_of_button').click(function(){
$('.input_field_class').val("");
});
See the link
http://www.javascript-coder.com/javascript-form/javascript-reset-form.phtml
Basically rather than calling a form.reset() from the reset button, call an external function which clears out the fields you require and leave the remaining as it is.
Hope it solves your problem!