Ok Guys I need help in this case and please help if you can :(
I have following div created with text-type input
<div class="footer">
<div id="footerInner">
<form>
<input type="text" name="enter" value="" id="input"/>
</form>
</div>
</div>
I have also created above .footer .mainBody
<div class="mainBody">
<script src="Scripts/main.js">
var h = document.getElementById('input').value;
document.write(h);
</script>
</div>
And I have included Javascript in it
I want to work it this way: when I input text in input tag to appear in .mainBody div.
And also do I need button to submit input or it can be done with key press for Ex. "Enter"?
Guys onkeyup="writeThis()" isn't working it just reloads page :(
To execute some events on keyevents, you need to write the onkeyup or onkeydown or any other key function in the element. And in that attribute you can add the function's name which would respond to the event. I will write my function's name as writethis() which will write the value to the div.
You then need to use this:
<input type="text" id="input" onkeyup="writethis()" />
And the function would be:
function writethis() { // the function
var h = document.getElementById('input').value; // the value
document.getElementsByClassName('mainBody').innerHTML = h; // the input
}
This way, you will get the input written on a keypress!
You can also try and use some keyevents such as:
if(event.keyCode == 13) { // enter key event
/* key code for enter is 13
* do what so ever you want */
}
Ok, try this as your JS script content in html head section:
function writeOnBody() {
var inputText = document.getElementById('input').value;
var mainBodyEl = document.getElementById('mainBody');
mainBodyEl.innerHTML = inputText;
}
your HTML code:
<div class="footer">
<div id="footerInner">
<form>
<input type="text" name="enter" value="" id="input" onkeyup="writeOnBody()" />
</form>
</div>
</div>
<div id='mainBody' class="mainBody"></div>
I hope it helps. JSFiddle sample: http://jsfiddle.net/amontellano/JAF89/
var h = document.getElementById('input').value; // the value
document.getElementsByClassName('mainBody').innerHTML = h;
avoid using getElementsByClassName instead give you div a id and use getElementById..
rest is in my opinion the best solution..
and yes you can also you a button also all you have to do is call you function on onclick event like this
<button onclick="functionZ()">click me</button>
and define that functionZ in your java script
What we are doing here is..
Adding a button and a click event upon it..such that when that button will be clicked it will call a function for us..
Make sure to add your scripts in lasts part of your page as page loads from top to bottom so its good practice to add scripts just near to end of body
Related
I would like to change display property of this input (actually of div which contains it) after onclick ("Click here"). This part goes well ... but after clicking again I want it to be hidden again (has display="none" instead of "block" again and so on) and here I have difficulties.
I've tried classList.toggle but ... I' don't want to change classes, I want to change just one property. I know there is also possibility of creating my input field by using Javascript but I presume I'll come to a deadlock again in the same point.
<form role="form">
<p id="mag">Click here!</p>
<div id="switch" class="xxx"style="display:none;" >
<input id="sr"class="offf" autocomplete="off" placeholder="Search" type="text" >
</div>
</form>
document.getElementById("mag").addEventListener("click", function toffi(){
document.getElementById("switch").style.display="block";
console.log(document.getElementById("switch").style.display);
});
http://codepen.io/zeeebra/pen/RgRYxK
Try this:
document.getElementById("mag").addEventListener("click", function toffi(){
var sw = document.getElementById("switch");
if (sw.style.display === "block") {
sw.style.display = "none";
} else {
sw.style.display = "block";
}
console.log(sw.style.display);
});
Universal Converter - question #2
Question 1 - How to input the content of a form as a variable?
Hello again. I'm having some more trouble with my converter (see link.) I was wondering how I could change the content of a span depending on what was inside of a form (in this case, looking at the link, the form with the ID of "unit").
How it would work was, the span with the ID of invalidUnit would be called in a function, and the function would be used to change the content of the span to tell the user if the unit they input into the form is valid or not.
The HTML and JavaScript are below.
HTML:
<form>
<input type="text" id="unit">
</form>
<br>
<button class="btn btn-sm btn-danger" id="confirm">Confirm</button>
<br>
<br>
<h4>Pick two units of <span id="unitType">[?]</span> you want to convert.</h4>
<h5><span id="invalidUnit">[?]</span></h5>
JavaScript:
function invalidUnit() {
var unitInput = document.getElementById("unit").value;
var invalid = document.getElementById("invalidUnit");
if (unitInput.value == "temperature") {
invalid.innerHTML = ("temperature is a valid unit");
}
}
So, how would I make this work? It seems like I have it right, but...
change this:
var unitInput = document.getElementById("unit").value;
to this:
var unitInput = document.getElementById("unit");
Also, I think you'll want to add onClick="invalidUnit();" to your button.
Working JSBin
Hi I'm trying to flip the input fields between two div elements. However, if a user enters text into the fields, the text disappears after the flip happens. Is there a way to make sure this value attribute is flipped too? Thanks.
Javascript:
function Flip ()
{
var oldslave = $('div.slave').html();
var oldmaster = $('div.master').html();
$('div.slave').html(oldmaster);
$('div.master').html(oldslave);
}
HTML:
<div class="master">
<input type="text" name="master" id="master" size="42">
</div>
<input type="button" id="button1" onclick="Flip()" value="Flip">
<div class="slave">
<input type="text" name="slave" id="slave" size="42" class="slavefield">
</div>
You can use clone method like this:
function Flip() {
var oldslave = $('div.slave input').clone();
var oldmaster = $('div.master input').clone();
$('div.slave').html(oldmaster);
$('div.master').html(oldslave);
}
http://jsfiddle.net/MaESg/
There is also another variant to achieve the same without using clone:
function Flip() {
$('.master').find('input').appendTo('.slave').prev().appendTo('.master');
}
This one is preferable because appending (moving) nodes much more effective than recreating.
http://jsfiddle.net/MaESg/1/
I have some html that looks as so:
<h3 class="basic left-top-border-radius">Basic<br /> 500<span>$25</span></h3>
<a class="signup colorbox" href="#text-signup-form">More Info</a>
When More Info is clicked a lightbox pops up with a simple info request form. Here is my problem. I would like when the link is clicked to have the text of the h3 header passed to a form input field that is hidden so I know which plan they clicked on for more info.
The input looks like so:
<input type="text" class="cat_textbox" id="CAT_Custom_440761" name="CAT_Custom_440761" maxlength="1024" />
How would I do this using jQuery? (I thought of using jQuery .text() method but I read that does not work with forms and I do not know how to pass the h3 text anyway.
NOTE There are multiple h3 elements on the page.
You can do the following with this code.
$('.signup').click(function(){
var planTitle = $('h3').text();
$('#CAT_Custom_440761').val(planTitle);
});
As you click on the button it will search for the h3 tag (would be better to attach an ID to the h3 tags) grab the text of that element and insert it into the value of the input field.
If you aren't able to attach an ID to the h3 tag you can search for the prev instance of h3 and take the text from that.
$('.signup').click(function(){
var planTitle = $(this).prev('h3').text();
$('#CAT_Custom_440761').val(planTitle);
});
You can try this:
$('a').click( function() {
var text = $(this).parent().find('h3').text();
$(this).parent().find('.cat_textbox').val(text);
})
perhaps you can use this code
<form action="test1.asp" id="testform">
<input type="hidden" id="test3" value="">
<input type="BUTTON" id="submit" onclick="modify_value()"/>
</form>
<script type="text/javascript">
function modify_value()
{
var hidden_field = document.getElementById('test3');
hidden_field.value = 'testvalue';
document.getElementById("testform").submit();
}
</script>
How would I go about correctly writing this so that the var input is the value of the content input field within the .overlay div when the submit button is pressed? Keep in mind that there's several .overlay divs, so it needs to be that separate div.
I know how to make it work assuming only 1 div exists, but this isn't the case. My jQuery is as follows:
$('.button').click(function() {
var input = $(this).parents('.overlay')$(input[name=content]).val();
});
My HTML structure (assume this div is duplicated several times on the page):
<div class="overlay">
<input name="content" value="value">
<input type="submit" class="button" value="submit">
</div>
$('.button').click(function() {
var input = $(this).parent().find("input[name='content']").val();
});
should work.
Or, if you can rely on that exact structure:
$('.button').click(function() {
var input = $(this).prev().val();
});
like this
$('.button').click(function() {
var input_val = $(this).parent().find('input:first').val();
alert(input_val)
});
here is ia working demo