I have a div and it refreshes every 3 seconds. Inside that div there is an input box and whatever I type gets cleared out in 3 seconds. Is there a way for the text to remain inside the input box and not to get cleared out?
index.js
<div id="show_here"></div>
<script type ="text/javascript">
$(document).ready(function() {
setInterval(function() {
$('#show_here').load('fetch.php')
}, 3000);
});
</script>
fetch.php
<div>
// some code here
<input type="text" id="input" />
</div>
Input box needs to be inside that page since it is inside a while loop. Can this be done or i need to change my whole code to make this work?
Preserve and then set
setInterval(function() {
my_val = $('#input').val();
$('#show_here').load('fetch.php');
$('#input').val(my_val);
}, 3000);
Related
I would like to make a text bold by using a function which gets the text as a parameter, here is my code:
<script>
function font(b)
{
b.style.fontWeight = "bold";
alert(b);
}
</script>
<input onclick="font('aaaa');" type="button" value="Font (1)">
My problem that I'm not getting the desired response, though without b.style.fontWeight = "bold"; it alerts "aaaa".
I don't see what is the problem here, I tried to put the parameter in a variable and then change its property but it doesn't work either.
Any ideas on how to resolve this?
Create an input field where you'll write your text and create a button which will change the font-weight of the text. After that attach an event listener to the button. When you click the button your font will change to bold.
working demo: https://jsfiddle.net/4kzsq2tb/
HTML
<button id="font-button">
change font to bold
</button>
<input id="input-field" type="text"/>
JS
document.getElementById('font-button').addEventListener('click', () => {
const inputField = document.getElementById('input-field');
font(inputField);
})
function font(b) {
b.style.fontWeight = "bold";
}
<div id="c"></div>
<input onclick="font('aaaa');" type="button" value="Font (1)">
<script>
function font(b)
{
document.getElementById('c').style.fontWeight = "bold";
document.getElementById('c').innerHTML=b;
}
</script>
works fine function gets text as parameter and makes it bold, well makes div style bold not text itself as guys said u cant make text or variable bold
My home page having code like below. I have called a Javascript function onpage load. In that blink function is doing blinking the Input text, in the particular time interval.
<body onload="blink()";/>
<form>
<input autocomplete="off" onkeydown="if (this.value=='xxx xxx xxx ?') this.value='';StopBlinking();" type="text" class="search_input" name="searchword" id="searchword" onKeyup="request(event);" value="xxx xxx xxx ?" onclick="if (this.value=='xxx xxx xxx ?') this.value='';StopBlinking();" onfocus="if (this.value=='xxx xxx xxx ?') this.value='';StopBlinking();" onblur="if (this.value=='') this.value='xxx xxx xxx ?';"/>
<div class="clicked-area">
....Did something.....
</div>
</form>
</body>
<script>
function blink() {
document.getElementById("searchword").focus();
if(document.getElementById("searchword").value == "XXX XXX XXX XXX")
{
document.getElementById("searchword").value = "";
} else if( document.getElementById("searchword").value == "" ){
document.getElementById("searchword").value = "XXX XXX XXX XXX";
}
timer = setTimeout("blink()", 500);
}
function StopBlinking()
{
clearTimeout(timer);
}
</script>
In this page when have clicked anywhere on the div "clicked-area" unexpectedly my page is scrolling to top.
But when I remove timeout method from the script "timer = setTimeout("blink()", 500);", then it's not happening. Can anyone help me to solve this problem.
why do you want to remove the blink function at first? if your main goal is just to move the page on top when clicked-area is click you can just move the function on clicked-area when click
<div class="clicked-area" onclick="blink()">
function blink() {
document.getElementById("searchword").focus();
}
I think it is normal. When an input gets focused using script, the whole page needs to scroll to the position of the input.
You click anywhere outside the input, you make it lose focus. Then blink() runs again and the input gets "re-focused". The whole page then scrolls up (since the input is on the top).
If you try putting a bunch of br tags between the input and the clicked-area div so that page is longer, you will see the effect more obviously.
Does the input need to be focused all the time?
I am trying to check if all divs are visible, and if they are then to not show a div which contains a submit button. All the divs are basically validators that only show if there are errors. This is because I cannot use Jquery validator. I am doing this on a timer so it can check every 5 seconds, instead of using a button. Also - It is not possible to link the validation to the button.
What I've tried:
JS:
window.setInterval(function(){
if ($(".needData:hidden").length == 0) {
$(".answer").show();
$(".pleaseval").hide();
}else{
$(".answer").hide();
$(".pleaseval").show();
}
}, 5000);
HTML:
div id="myClass" class="needData" style="display:none">hidden</div>
div id="myClass1" class="needData" style="display:none">hidden</div>
div id="myClass2" class="needData" style="display:none">hidden</div>
div id="myClass3" class="needData" style="display:none">hidden</div>
<div class="pleaseval">Please fill out form</div>
<div id="answer" class="answer"><button>button</button></div>
You target .answer in js but don't you actually need #answer?
Like this:
window.setInterval(function(){
if ($(".needData:visible").length == 0) {
$("#answer").show();
$(".pleaseval").hide();
}else{
$("#answer").hide();
$(".pleaseval").show();
}
}, 5000);
Here you can see test of it https://jsfiddle.net/8bL8ywzu/
And if you remove style="display:none" from one element you'll see that after 5s button will be hidden.
I am developing a game in that at the rules n regulation page i have a check box so i want when check box is checked continue button should appear otherwise it should be disappear from the page.
<div id = "bSubmit"><input type="submit" value="continue"></div>
function validate() {
if (document.getElementById('iAgree').checked)
{
bSubmit.display='block';
}
else
{
bSubmit.display='none';
}
}
Please help me out
Well there are points you need to change or add in your code. The one that I came up with is as follows.
You can further improve it by separating the js into another file and wrapping your code in a document.onload function.
<input type="checkbox" id="iAgree"/>
<div id = "bSubmit"><input type="submit" value="continue"></div>
<script>
var bIAgree = document.getElementById('iAgree');
function validate() {
var bSubmit = document.getElementById('bSubmit');
if (bIAgree.checked) {
bSubmit.style.display='block';
} else {
bSubmit.style.display='none';
}
}
// For the first time that the page loads,
// set the state of the div
validate();
// set the state of the div when the checkbox state has changed
bIAgree.onchange = validate;
</script>
I'm trying this:
</script>
<form action="ej3a.html" onsubmit="Pantalla(this.elements[0].value)">
Select word size <input type="text" name="Tletra" id="letra"><br>
<script>
Then, I send the information summited to a js method
function Pantalla(x){
if(x=="Grande")
{
document.getElementById("todo").style.fontSize="120%";
}
if(x=="Normal")
{
document.getElementById("todo").style.fontSize="medium";
}
if(x=="Pequeño")
{
document.getElementById("todo").style.fontSize="80%";
}
}
but, when I summit "Grande" it just increases for a second and later returns to normal size
Note: Forget onmouseover, the change i try to make is on a fielset, which has all text of the web page
<fieldset onmouseover="estiloof()" id="todo">
Try
return = false;
at the end of the function to prevent form submission and page reload.