Here is the javascript code.
<script type="text/javascript">
function myfunc()
{
var filmName = document.getElementById("mysearch-text").value;
alert(filmName);
if(filmName == "parker")
window.location.assign("http://www.google.com");
else
alert("hello");
}
</script>
If I enter any other string I get an "hello" alert and If I enter "parker" the page "http://www.google.com" wont get loaded. Why is this happening?
EDIT:
Ok as someone mentioned I did remove "http://www.google.com" and added "http://stackoverflow.com" but it did not resolve my problem. And I cant even load local html pages that are in the same directory
if(filmName == "parker")
window.location.assign("index.html"); // also "./index.html" or ./index/html
Even this is not working. What's wrong
I also have jquery libraries: that is Jquery UI and Jquery
This question needs more of info I think. Here are the final edits
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Other style and js libraries, including Jquery Ui and regular jquery -->
<script>
$(document).ready(function() {
$(".youtube").fancybox();
}); // end ready
</script>
<script>
$(document).ready(function(e) {
$('.tooltip').hide();
$('.trigger').mouseover(function() {
/* Rest of it, which is not necessary here */
</script>
<script type="text/javascript">
function myfunc()
{
var filmName = document.getElementById("mysearch-text").value;
alert(filmName); // for debugging
if(filmName == "parker")
window.location.assign("index.html");
else
alert("hello");
}
</script>
</head>
<body>
<div id='mysearch-box'>
<form id='mysearch-form'>
<input id='mysearch-text' placeholder='' type='text'/><!-- Input here guys -->
<button class = "none" id='mysearch-button' onclick = "myfunc()">Search</button>
<!-- press this button after entering "parker" -->
</form>
</div>
<!-- Rest of the HTML page -->
</body>
</html>
I assume you are using a form onsubmit event to call myfunc, if so you have to prevent the default behavior by return false; (for example)
HTML:
<form id="form">
<input type="text" id="mysearch-text">
<input type="submit" value="Submit">
</form>
JS:
<script>
window.onload = function () {
document.getElementById("form").onsubmit = function () {
var filmName = document.getElementById("mysearch-text").value;
alert(filmName);
if (filmName == "parker") window.location.href = "http://www.w3fools.com";
else alert("hello");
return false; //prevent the default behavior of the submit event
}
}
</script>
I have tested the following solution and it works perfectly:
setTimeout(function(){document.location.href = "page.html;"},500);
Related
I have the following code on page load that I use to show an error alert:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
if (Request.QueryString["message"] == "noemployees")
AlertDanger.Visible = true;
This is where the error is called. The page reloads and the error is shown.
if (payFitments == null)
{
Response.Redirect("Default?message=noemployees");
}
I have the following markup
<script type="text/javascript">
$(document).ready(function () {
window.setTimeout(function () {
$(".alert").fadeTo(1500, 0).slideUp(500, function () {
$(this).remove();
});
}, 3000);
});
-------------------------
<div runat="server" visible="false" id="AlertDanger" class="alert alert-danger">
×
<strong>You must have at least one employee to process</strong>
</div>
How do I show this message without having to load the default page again? Not seeing examples on the web that show this clearly.
You're using JQuery remove, which effectively deletes the alert from your DOM. So showing it again without reloading your page is not possible.
But you could use JQuery detach instead. Then you can insert it again with appendTo.
var alert = null;
function showHideAlert() {
if (alert) {
alert.appendTo("body");
alert = null;
} else {
alert = $(".alert").detach();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<button onclick="showHideAlert();">Show/Hide alert</button>
<div class="alert">ALERT!!!</div>
</body>
Try serving a static html file and then using the alert function in Javascript. You can learn that here. Example for a button press:
<html>
<head>
<script>
function onError() {
try {
...
} catch (...) {
var error
error = "button was pressed"
alert(error)
}
}
</script>
</head>
<body>
<button id="myButton" onClick="onError()">do not click</button>
</body>
</html>
<html>
<head runat="server">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge;" /><%-- Also Check Compatible View --%>
<%-- Put all your jQuery... Here I'm showing an example--%>
<script src="//ajax.microsoft.com/ajax/jQuery/jquery-2.1.1.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
window.setTimeout(function() {
$(".alert").fadeTo(1500, 0).slideUp(500, function() {
$(this).remove();
});
}, 3000);
});
</script>
<form id="form1" runat="server">
<asp:TextBox ID="txt" runat="server"></asp:TextBox>
<div runat="server" visible="false" id="AlertDanger" class="alert alert-danger">
× <strong>You must have at
least one employee to process</strong>
</div>
</form>
</body>
</html>
Note:- I think you have missed this... put your jQuery code inside your body tag...
I tried some methods in old questions but it is not working in chrome.
Can please any one suggest me the solution.i'm using php for validation.
if i click submit button twice it through an error so restrict the issue i disable the submit button but it not working in chrome.
<script>
jQuery(document).ready(function () {
jQuery('#submit_button').click(function () {
jQuery('#submit_button').attr('disabled','disabled');
});
});
</script>
You could use prop jquery method, or just set the disabled attribute to true.
$(document).ready(function(){
$('#submit').on('click', function(e){
//$(this).prop('disabled', true);
this.disabled = true;
})
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="submit">submit</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
It could be that there are multiple submit buttons on the page. You can try using this code.
jQuery(document).ready(function () {
jQuery('#submit_button').click(function () {
// It is best practice to use `true` instead of
// any true-y kind of value like non-empty string.
jQuery(this).attr('disabled', true);
});
});
There are different ideas were given but the code seems working properly. Please make sure you imported the jQuery library.
The following code is the tested code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
jQuery('#button').click(function () {
jQuery('#button').attr('disabled','disabled');
});
});
</script>
</head>
<body>
<input type="submit" id="button" value="If you click on me, I will be disabled."/>
</body>
</html>
Try, using the prop of element and making the attribute true, using
jQuery('selector').prop('disabled',true);
<script>
jQuery(document).ready(function () {
jQuery('#submit_button').click(function () {
jQuery('#submit_button').prop('disabled',true);
});
});
</script>
how i would add disabled:
<script>
$(document).ready(function(){
$('button').click(function () {
$('<input type="button id="submit_button" disabled>').insertBefore(this);
$(this).remove();
});
});
</script>
how i would change the button back to normal:
<script>
$(document).ready(function(){
$('button').click(function () {
$('<input type="button id="submit_button" >').insertBefore(this);
$(this).remove();
});
});
</script>
you can use $('selector').prop('disabled',true);
Yes, i know this is a duplicate, but all the answers i've read didn't help me, i have a side by side working example, from w3school, it works, and mine doesn't, what i am trying to do is show a tooltip warning the user to use numbers only, but instead, it just refreshes the page.
This is my full html page code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" media="screen" href="Css/style.css"> /*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var previous;
$(document).ready(function(){
$('.btn').tooltip();
});
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
}
});
});
</script>
</head>
<body>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
</body>
</html>
I didn't put the data-toggle:"tooltip" neither a title:"sometitlehere" in the element's options, because i don't really need it.
There are few mistakes in your code,
//it should be title: and not title=
$('#search-form').tooltip({title:"You did good :)"});
The above line initializes the tooltip once your code excutes.
After that if the tooltip title is updated, the tooltip is needed to be destroyed and re-initialized with new title.
var previous;
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var newTooltip="";
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
newTooltip = "You did good :)";
}
else
{
newTooltip = 'Please enter numbers ONLY !';
}
$('#search-form').attr('title', newTooltip).tooltip('fixTitle').tooltip('setContent').tooltip('show');
setTimeout(function(){
$('#search-form').tooltip('hide').tooltip('destroy');
}, 1500);
});
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
/*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
You are using form so you need to return true or false on validate action so your code should be like
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
return true;
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
return false;
}
are you initialising the tooltip in the js? - tooltips won't show unless you have this in the code:
$(function(){
$("[data-toggle=tooltip]").tooltip();
})
ok - I just looked at your code - you have :
$('.btn').tooltip();
listed in theree, but your button has the class "btntxt" and you are also trying to get a tooltip on the search form - but that has the id of "search-form" - neither of which will be affected by your tooltip declaration. Best to use the one I gave in the is post so that all elements with tooltips can display them. Setting them to individual classes or ids is too restrictive if you forget that your class or id is not the same as the one listed in the js.
you have this order to your scripts:
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Does the tooltip.js require jquery? - if so you may need to invert that order
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
I have a main jsp page in which alert functionality is modified using
window.alert=function(txt)
In other jsp pages are loaded in the same document using iframe. parent.alert is used in most of these pages to keep consistency.
This is a piece of code I am working with:
<div onkeypress="handlekey()">
<button id='done' onclick="example()" >submit</button>
</div>
Script portion is as following:
<script>
function handlekey(){
if ((window.event) && (window.event.keyCode == 13))
{
// click the search button
done.click();
}
}
function example(){
parent.alert('Done');
}
</script>
Alert is not fired if I press an enter key but get fired when I click on the button.
Alert also gets fired when I replace parent.alert with alert.
This works fine for me:
index.html
<html>
<head>
<script>
window.alert = function(){
console.log('My alert');
}
</script>
</head>
<body>
<iframe src="iframe.html" id="myIframe"/>
</body>
</html>
iframe.html
<html>
<head>
<script>
function handleEvent() {
if ((window.event) && ((window.event.keyCode == 13) || window.event.type == 'click')) {
example();
}
}
function example(){
parent.alert();
}
</script>
</head>
<body>
<div onkeypress="handleEvent()">
<button id='done' onclick="handleEvent()" >submit</button>
</div>
</body>
</html>
To make a long story short, I need to be able to prevent the default action from a input type="file". In other words I do not want to display the system's open dialog box when the user clicks on the "Browse" or "Choose File". I already have the replacement dialog working, but the system's open dialog box still appears.
Below is a sample of what I am currently trying to accomplish this. (PS: I am using Chrome 21)
<html>
<head>
<script type="text/javascript">
<!--
file_onclick = function()
{
// Show custom dialog instead...
event.stopPropagation(); // Doesn't work
return false; // Neither does this
};
//-->
</script>
</head>
<body>
<input type="file" onclick="javascript: file_onclick();" />
</body>
</html>
Any ideas?
How about
<input type="file" onclick="return false" />
or if you need the file_onclick function
<html>
<head>
<script type="text/javascript">
<!--
file_onclick = function()
{
// Show custom dialog instead...
return false;
};
//-->
</script>
</head>
<body>
<input type="file" onclick="return file_onclick();" />
</body>
</html>
Got it. I needed to disable the tag and then use the setTimeout method to re-enable it.
<html>
<head>
<script type="text/javascript">
<!--
file_onclick = function(o)
{
// Show custom dialog instead...
o.disabled = true;
setTimeout(function() { o.disabled = false; }, 1);
};
//-->
</script>
</head>
<body>
<input type="file" onclick="javascript: file_onclick(this);" />
</body>
</html>