folks!
I'm an absolute beginner in JavaScript and I'm trying to get a specific condition within a JavaScript function (passwd=="eggplant) to open a link in the same window. I've tried the "window.location.href" (currently on the code), "window.location" and "location" objects, as well as the "window.location.replace()" function, but they didn't work. I should also point out that I'm using a separate .js file to write the scripts.
Here's the whole function:
function colorFunc()
{
var passwd = document.getElementById("pass").value;
if(passwd=="614051"){
window.open ('color1.html')
}
else if(passwd=="eggplant" || passwd=="Eggplant" || passwd=="EGGPLANT"){
window.location.href = 'color2.html';
}
else{
alert('You have got the answer wrong!');
}
}
All the other conditions work, and I could even open "color2.html" using "window.open". Could you, more experienced users, please tell me what I'm doing wrong?
Edit:
Here's the relevant portion of my .html file.
<form name="input">
<input id="pass" name="Answer" placeholder="Your answer"></input>
<input type="submit" value="Submit" onclick="colorFunc()"></input>
</form>
Thank you very much!
(DEMO HERE)
Use this on your html onclick:
onclick="colorFunc(this)"
and then inside your javascript function colorFunc(e) add e.preventDefault; to prevent from submiting the form. You don't need to use a form for this behavour you show here, but maybe you need it for other code. Anyway this should work.
HTML
<input id="pass" name="Answer" value="614051" placeholder="Your answer"></input>
<button type="button" value="Submit" onclick="colorFunc(this)">Send</button>
JS
function colorFunc(e)
{
var passwd = document.getElementById("pass").value;
if(passwd=="614051"){
window.open ('color1.html','_self'))
}
else if(passwd=="eggplant" || passwd=="Eggplant" || passwd=="EGGPLANT"){
window.open('color2.html','_self'));
}
else{
alert('You have got the answer wrong!');
}
}
Related
So why does it go back to the login screen again? what have we missed here?
user: admin
pass: 1234
so we have a simple login solution (I know pass and user will be visible in the source but this is just a school project to learn php so it doesn't really matter for us in this case.)
this is the relevant code:
<head>
<script>
var usr ='admin';
var psw = '1234';
var loggedIn=false;
function loggaIn() {
if ( ($('#idUser').val()== usr) && ( $('#idPsw').val()== psw ) )
{
loggedIn=true;
$('#logdiv').toggle();
$('#mainOK').toggle();
}
else
{
alert ("Incorrect username and/or password!")
}
}
function loggaut() {
loggedIn=false;
$('#mainOK').hide();
$('#loggin').show();
}
</script>
</head>
<body>
<input type="text" id="idUser" placeholder="Username">
<input type="text" id="idPsw" placeholder="Password">
<br>
<button onclick="loggaIn()" class="pure-button pure-button-primary">Log in</button>
</body>
Any tips or help towards finding a solution would be much appreciated
You are doing it wrong. Such credentials should never be tested in JS code. It is harmful. I totally agree with #void.
POST your username/password to PHP & then decide whether to display inner page or redirect back to login again.
You should learn how to manage login/session using PHP. Here is good resource for you: http://www.sitepoint.com/users-php-sessions-mysql/
I've been trying add an image uploader for my website, and I have already written the uploader method in asp.net mvc. Since I don't want to have two buttons in my page (one for browse and one for upload) I decided to write another function using JQuery to handle it. At this point I've face the problem of having to know the <input type="file />" dialog result to run my uploader.
My question is that, is it possible to detect the user's choice (Open/Cancel) in JQuery ?
My code looks like this :
#using (HTML.BeginForm ("Upload", "SomeController", FormMethod.Post, new { enctype = "multipart/form-data" }))
<input type="file" name="file" id="file" class="Hidden" />
<input type="submit" id="upload" class="Hidden" />
}
<button id="UploadIt">Image</button>
and the java script:
$('#UploadIt').click(function() {
$('#file').trigger("clcik");
//now if (dialog result is Open) {$('#upload').trigger("click");}
// else {Do Nothing}
});
After reading the change() event documentation (dandavis mentioned it in the comment), I managed to fix the problem. However I decided to share my solution in case anyone faces the same issue.
$('#UploadIt').click(function () {
$('#file').trigger("click");
$(":file").change(function () {
if (this.files[0].size > 0) { Upload(); }
else { }
});
});
I had an issue with copying a value from one form to another via JavaScript, which I was able to figure out with help from my previous question here: "How to copy a value from one form's file upload field to another form's text field?"
So, thank you!
But now I have a new issue. When the form field value is copied over, in some browsers (such as IE), the field contains the local path of the field on the user's computer (i.e. "C:\Users\username\Desktop\file.png"), which obviously won't work in the URL.
So: is there a way to filter out everything but the file name itself before it's copied to the new field? Or a way to do it after the fact?
Thanks for the help!
Here is my most recent simplified code for this:
<script>
$(function(){
bindGroups();
});
var bindGroups = function() {
// First copy values
$("input[name='logofile']").val($("input[name='logoname']").val());
// Then bind fields
$("input[name='logoname']").change(function() {
$("input[name='logofile']").val($(this).val());
});
};
</script>
<form action="/current-url" method="post" enctype="multipart/form-data">
<input type="file" name="logoname" value="1" />
<input type="submit" value="Upload" />
</form>
<form name="create_landing_page" action="/landing-page-url/" method="get">
<input type="hidden" name="logofile" />
<input type="submit" value="Generate Landing Page" /></form>
Try using a combination of split() and pop();
var basename = fullFileName.split('\\').pop();
Note the double backslash to escape the slash; this will only fix the problem for Windows browsers, because Linux/OS X uses a slash (/) as directory separator, so might try this (untested as I'm on my iPad at the moment)
var basename = fullFileName;
if (indexof('\\', basename) >= 0) {
basename = basename.split('\\').pop();
}
if (indexof('/', basename) >= 0) {
basename = basename.split('/').pop();
}
Try this:
var field = $(this).val();
var index = field.lastIndexOf("\");
field = field.substr( index, field.length-index );
I finally figured this out, and it was simpler than I had hoped. All I had to do was change the line:
$("input[name='logofile']").val($(this).val());
to:
$("input[name='logofile']").val($(this).val().split('\\').pop());
The problem with using a variable was that I had to refresh it when the upload field changed, which wasn't hard; I refreshed the variable when the upload button was clicked. But for some reason, when I replaced $("input[name='logoname']") with my variable name, the value wouldn't copy over. I couldn't figure it out.
This ended up being much simpler, no variables needed. Split/pop did the job, so thanks everyone who suggested it! You pushed me in the right direction.
I need to constantly search files such as smss.exe at http://www.winpatrol.com/db/pluscloud/.
Is there a way I can make a customized searchbar on my custom homepage that will do this for me?
So if I type smss into the search bar it will take me to http://www.winpatrol.com/db/pluscloud/smss.html
I tried in pure HTML with GET requests and can't find a way to do it. I was thinking maybe there is a Javascript way or something.
Something like this is pure Javascript and will work, but if the user enters a non-existent page on that site, it will just lead to their not found page.
You could use server side PHP or something similar to achieve this in a better way.
Here is the JS solution with little error checking:
<form onsubmit="return redirect()">
<input id="search_form_input" type="text" name="query" />
<input type="submit" value="Search" />
</form>
<script type="text/javascript">
function redirect()
{
var query = document.getElementById('search_form_input').value;
if (query != '') {
window.location = 'http://www.winpatrol.com/db/pluscloud/' + query + '.html';
}
return false;
}
</script>
Google custom search is what you're probably looking for.
How do I make one of those hyperlinks where when you click it, it will display a popup asking "are you sure?"
<INPUT TYPE="Button" NAME="confirm" VALUE="???" onClick="message()">
I already have a message() function working. I just need to know what the input type for a hyperlink would be.
<a href="http://somewhere_else" onclick="return confirm()">
When the user clicks the link, the confirm function will be called. If the confirm function returns false, the link traversal is cancelled, if true is returned, the link is traversed.
try to click, I dare you
with the function
function confirmAction(){
var confirmed = confirm("Are you sure? This will remove this entry forever.");
return confirmed;
}
(you can also return the confirm right away, I separated it for the sake of readability)
Tested in FF, Chrome and IE
As Nahom said, except I would put the javascript:message() call directly in the href part (no need for onclik then).
Note: leaving the JavaScript call in the onClick has a benefit: in the href attribute, you can put a URL to go to if the user doesn't have JavaScript enabled. That way, if they do have JS, your code gets run. If they don't, they go somewhere where they are instructed to enable it (perhaps).
Now, your message routine must not only ask the question, but also use the answer: if positive, it must call submit() on the form to post the form. You can pass this in the call to ease the fetching of the form.
Personally, I would go for a button (input tag as you show) instead of a simple link to do the process: it would use a more familiar paradigm for the users.
[EDIT] Since I prefer to verify answers I give, I wrote a simple test:
<script type="text/javascript" language="JavaScript">
function AskAndSubmit(t)
{
var answer = confirm("Are you sure you want to do this?");
if (answer)
{
t.form.submit();
}
}
</script>
<form action="Tests/Test.html" method="GET" name="subscriberAddForm">
<input type="hidden" name="locationId" value="2721"/>
<input type="text" name="text" value="3.1415926535897732384"/>
<input type="button" name="Confirm" value="Submit this form" onclick="AskAndSubmit(this)"/>
</form>
Yes, the submit just reload the page here... Tested only in FF3.
[EDIT] Followed suggestion in the comments... :-)
???
This answer would be OK only when the click need NOT navigate the user to another page.