I have made an option page for my chrome application.
Have designed the form which is working perfectly, except when now i tried to add a message will be shown (through jquery/javascipt) when the user clicks save button or reset button.
The form html:
<body onload="loadOptions();">
<center>
<div id="wrapper">
<div id="status">
<p id="statusMessage"></p>
</div>
<form id="settings" align="left" onsubmit="saveOptions(this);">
<fieldset>
<legend>General</legend>
// settings options go here
</fieldset>
<center>
<button type=submit> Save </button>
<button id="reset" type=reset onclick="reset();"> Restore Defaults </button>
</center>
</form>
</div>
</center>
</body>
I want to display the message in the status message div.
So i wrote the following script:
function saveOptions(form){
$("#status").hide();
//code to save settings
$("#statusMessage").html("Preferences saved");
$("#status").show();
}
function loadOptions(){
//code to load options
}
function reset(){
$("#status").hide();
//code to reset
$("#statusMessage").html("Preferences reset to default");
$("#status").show();
}
The css:
div#status{
width: 500px;
text-align: center;
background: white;
border: 3px solid orange;
border-radius: 5px;
font-weight: bold;
display: block;
}
div#status h1,p{
font-size: 20px;
text-shadow: 1px 1px 1px lightgrey;
}
The problem is that the message is displayed and then the div hides again!
I understood that the reason for this is that the page kind of refreshes when the form is submitted, but couldn't fin the way to work around it. :(
Even tried adding this
$(function() { $("#status").hide(); });
But did not help.
Please help !
Add return false to your form markup:
<form id="settings" align="left" onsubmit="saveOptions(this); return false;">
It will prevent the form of being submitted.
Another way is to use JQuery submit event and preventDefault method.
$("#settings").on("submit", function(e) {
e.preventDefault();
$("#status").hide();
$("#statusMessage").html("Preferences saved");
$("#status").show();
});
Related
I have a code where I am showing a infobox when user clicks on an input field. This works fine but to make the UX better I would like the infobox to remain open when user clicks on a show button. It shouldn't close and open again
<div class="text-field">
<input type="text" class="username" name="username" placeholder="username" />
<button class="show-pwd">show</button>
</div>
<div class="info" style="display: none;">
<p>hello world</p>
</div>
$(function() {
const username = $('.username');
const showPwd = $('.show-pwd');
showPwd.click(()=>{
username.get(0).type = 'password';
$('.info').show();
});
$('.username').on("focus",(e)=>{
$('.info').show();
});
$('.username').on("blur",(e)=>{
$('.info').hide();
});
});
.text-field input {
border: none;
background-color: transparent;
}
.text-field {
background-color: lightblue;
width: 200px;
height: 25px;
}
.info {
background-color: lightgreen;
width: 200px;
height: auto;
}
heres the codepen
I tried to add the show method in click handler but that just adds a glitch
The blinking is happening because input blurring is triggered first, and then the button click.
You can avoid the blinking with a slight delay when blurring / moving out of the input, like in the following example.
const username = $('.username');
const showPwd = $('.show-pwd');
var btnClicked = false; // this is new
showPwd.click(()=>{
btnClicked = true; // this is new
username.get(0).type = 'password';
$('.info').show();
});
$('.username').on("focus",(e)=>{
$('.info').show();
});
$('.username').on("blur",(e)=>{
setTimeout(function() {
if(!btnClicked) {
$('.info').hide();
}
},100);
});
.text-field input {
border: none;
background-color: transparent;
}
.text-field {
background-color: lightblue;
width: 200px;
height: 25px;
}
.info {
background-color: lightgreen;
width: 200px;
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-field">
<input type="text" class="username" name="username" placeholder="username" />
<button class="show-pwd">show</button>
</div>
<div class="info" style="display: none;">
<p>hello world</p>
</div>
One suggestion - since the current setup (and the original one) have no way of hiding the .info div once the button has been clicked, consider making your .show-pwd button a toggle button - one click to show the info div (if it's not visible), and another to hide it (if it's visible).
If you decide to do that, you would have to change my initial suggestion a bit, in order to avoid hiding the info div when moving from your input to your button.
And if you're up for some UX suggestions, you could change the show button - for example, you could use the open / closed eye icon to reflect what would happen on button click (similar to show / hide password in various online services, like Gmail, and the like).
I want the screen to scroll down to the div. This div has an ID of 'weather-data'
I have tried the following;
document.getElementById('weather-data').scrollIntoView();
I have also tried using anchor tags this did not seem to work
The button which the user will click:
<button id="submit" onclick="myFunction()">
Submit
</button>
The function that runs when the button is clicked:
function myFunction(){
cityName();
getData();
clear();
document.getElementById('weather-data').scrollIntoView();
}
This is the div I want the screen to scroll to:
<div id="weather-data">
</div>
use the anchor tag to link the the div
body{
margin: 0;
}
div{
height: 100vh;
border: 1px solid black;
}
<html>
<body>
<div id='a'>a</div>
<div id='b'>b</div>
<div id='c'>c</div>
<div id='d'>d</div>
<div id='e'>e</div>
<button><a href='#c'>go to c</a></button>
</body>
</html>
I fixed the issue I had to write an if statement to check if there was any text in the h1 element.
if(weatherMain != null){
document.getElementById('icon').scrollIntoView();
document.getElementById('weather-main').scrollIntoView();
}
I have a web page with 2 sections, Search and Result.
Each section has a button in it.
When the user focus on Search section and presses enter button, the search button should trigger.
Similarly, focusing on Result section and pressing enter button should trigger Save Changes button.
I tried the following code but, I am not getting the expected behavior. Any suggestion / guidance will be much appreciated.
function SetDefaultButton(parentContainer, button) {
$(document).off('keydown', parentContainer).
on('keydown', parentContainer, function (event) {
var eventTarget = event.target;
if (event.keyCode == 13) {
event.preventDefault();
$(button).trigger('click');
}
});
};
SetDefaultButton('#DivSearchSection', '#BtnSearch');
SetDefaultButton('#DivResultSection', '#BtnSave');
$('#BtnSearch').on('click', function(){
alert('Search is triggered');
});
$('#BtnSave').on('click', function(){
alert('Save is triggered');
});
#DivSearchSection
{
min-height:50px;
border:1px solid green;
background-color:lightgreen;
}
#DivResultSection
{
min-height:50px;
border:1px solid red;
background-color:yellow;
}
button{
margin-top:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="DivContainer">
<div id="DivSearchSection">
This is search section.
<button type="button" id="BtnSearch">Search</button>
</div>
<div id="DivResultSection">
This is result section.
<button type="button" id="BtnSave">Save Changes</button>
</div>
</div>
Attach an onfocus event handler to your sections. You will need to add an tabindex attribute to your sections for it to work.
When the section gets focus, trigger the focus on its child button.
$(function() {
$('#DivSearchSection, #DivResultSection').focus(function() {
// trigger focus on the section's button when the section is focused
$('button', this).focus();
});
$('#BtnSearch').on('click', function() {
alert('Search is triggered');
});
$('#BtnSave').on('click', function() {
alert('Save is triggered');
});
});
#DivSearchSection {
min-height: 50px;
border: 1px solid green;
background-color: lightgreen;
}
#DivResultSection {
min-height: 50px;
border: 1px solid red;
background-color: yellow;
}
button {
margin-top: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="DivContainer">
<!-- add tabindex -->
<div id="DivSearchSection" tabindex="-1">
This is search section.
<button type="button" id="BtnSearch">Search</button>
</div>
<!-- add tabindex -->
<div id="DivResultSection" tabindex="-1">
This is result section.
<button type="button" id="BtnSave">Save Changes</button>
</div>
</div>
Related: Is it possible to write onFocus/lostFocus handler for a DIV using JS or jQuery?
My requirement is that..I have a box. inside box I have a form..What I want is that..When I click the submit button ,inside the box the form will gone and a message will display.
Just like this:
I have the jefiddle :
jsfiddle
here ,When I click to the submit button,message is appearing on the top and the box1 is going down..
I'd much prefer using jQuery to do this, but here's the updated fiddle using only javascript, and keeping changes minimal.
<div id="box">
<div class="box2">
<h1 id="welcomeDiv" style="display:none;" class="answer_list" >welcome</h1>
<h1 id="details">Details</h1>
<form id="foo-form" method="POST" onsubmit="return showDiv();">
<input type="text" name="user" placeholder="Your name"/>
<input type="submit" name="create" class="enter submit" value="Enter"/>
</form>
</div>
</div>
... and the script ...
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
document.getElementById('details').style.display = "none";
document.getElementById('foo-form').style.display = "none";
return false;
}
http://jsfiddle.net/0qyj62dv/7/
The form elements are now being hidden, the original details message is being hidden, and the welcome text is within the box now, not external to it. Oh, and I moved the function call to onsubmit of the form, so it returns false now and doesn't actually try to submit the form on jsfiddle.
Hth
Please try this
HTML: (Change type= submit to type=button)
<input type="button" name="create" class="enter submit" value="Enter" onclick="showDiv()" >
CSS: (Change type= submit to type=button)
.box2 input[type=button] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
}
.answer_list{
margin: 0px auto;
position: relative;
background:pink;
height:300px;
width:400px;
display: block;
border: dotted;
border-width: 1px;
text-align:center;
}
DEMO
Create a class with same styling as that of #box.
Let's say answer_box
.answer_box {
margin: 0px auto;
position: relative;
background: pink;
height: 300px;
width: 400px;
display: block;
border: dotted;
border-width: 1px;
}
Add answer_box class to welcome container.
<div id="welcomeDiv" style="display:none;" class="answer_box" ><h1> WELCOME<h1></div>
To align it from top, give little margin to <h1> inside welcome div.
You need to hide the box container when submit is clicked.
function showDiv() {
document.getElementById('box').style.display = "none";
document.getElementById('welcomeDiv').style.display = "block";
}
look at this example,
http://jsfiddle.net/0qyj62dv/8/
all you need to do is this
submit form using ajax.
Add the welcome tab and form tab inside same parent div
toggle tabs as you want using style.display property
<button type="button" name="create" class="enter submit" onclick="submitForm()">Enter</button>
function submitForm(){
document.getElementById('tab2').style.display = "block";
document.getElementById('tab1').style.display = "none";
$.ajax({
method: 'POST',
url : '',
data : $('#myForm').serialize(),
success : function(data){
console.log('success',data);
alert('success');
}
});
}
you may call this using jquery
I have a script with me used for manual surfing of sites.
it works like this.
A link is shortened using any URL shortener website. and both original and shortened links are saved in db.
User clicks the visit button, a url shortened link is opened, then after pressing the skip add button user has to copy/paste the shown url in the text box and he presses confirm.
IF the enteries match in the db, then i will credit the user.
The problem that I am facing is, it works fine for some sites and does not work on other sites. using the same script.All the sites have same coding structure. [I install it on Paid to click websites ]
The Problem:
I click visit button [ it works fine ]
after i copy/paste and press confirm button [ it does not work ]
I keep on pressing the confirm button, it simple does not do any thing.
the same code works totally fine with some sites.
Below is the code that i am using ...
<?
$sql2=$Db1->query("SELECT * FROM tablename");
while($temp=$Db1->fetch_array($sql2)) {
{
$linksHTML .= '<div class="smartbox" id="'.$temp['id'].'" style="height: 300px; width: 270px; background: #F3F4F4; border: 5px solid #36A6CB; border-radius: 12px; float: left; position: relative; padding: 6px; margin: 8px 8px 0 0;">
<center>
<div class="title"> <a style="color:blue;"> <b> '.$temp['title'].' </b></a> [ Click Visit, Press Skip Add,Paste URL below and press confirm ] </div>
<div><font color="green">Cash: <b>$'.$temp['credits'].'</b></font></div>
<div class="clearer"> </div>
<div><input class="button" value="Visit" style="background: #409940; border-radius: 10px;" type="button" onclick="window.open(\''.$temp['shorten'].'\');"></div>
<br>
<form>
<b>Enter URL :</b>
<input name="link_'.$temp['id'].'" id="link_'.$temp['id'].'" size="16" maxlength="150" value="http://" type="text">
<br><br>
<input id="btn_'.$temp['id'].'" value="Confirm" style="background: #409940; border-radius: 10px; color: white;" type="button" onclick="validaLink(\''.$temp['id'].'\');">
</form>
<br>
</center>
</div>';
}
}
} else { echo "No Links "; }
$includes[content]='<div id="msg_link" style="text-align:center"></div>
<div id="tbl" style="width: 850px; margin: 0 auto">
'.$linksHTML.'
</div>
<div style="clear: both"></div>
<script>
function validaLink(id)
{
$.post(\'checkLink.php?'.$url_variables.'\', {id: id, enlace: $(\'#link_\'+id).val(), sid: \''.$_SESSION['sessid'].'\', sid2: \''.$_SESSION['sessid2'].'\', siduid: \''.$_SESSION['sessiduid'].'\'}, function(data){
if( data == "ok" ) {
$(\'#\'+id).fadeOut();
$(\'#msg_link\').html(\'We added the credits to your account.\');
} else {
alert(data);
}
});
}
</script>
';
?>
This script is not developed by me .. I don't have contact with the original developer.
Kindly support
write this in head of your html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>