jquery .focus/.blur issue - javascript

Below is a spinet of the code I've been working on; the issue is, no matter what I do, I cannot get jQuery to load on the page...or my code is just plain wrong. As far as I can tell everything is in order, does anyone else see anything wrong with my code
Thank you.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
<script type ="text/javascript">
$(document).ready(function(){
$('.text').focus(function() {
if (this.value == this.title) {
$(this).val("");
}
}).blur(function() {
if (this.value == "") {
$(this).val(this.title);
}
});​
});
</script>
<link rel="stylesheet" href="css.css" />
<title>
</title>
</head>
<body>
<form action = "backend.php" method = "post">
<br />
<label for="name">First Name</label>
<input type = "text" name = "fName" class = "text" value ="first" title="first" /><br />
<label for ="realm"> Last name</label>
<input type = "text" name = "lName" /><br />
<button type="submit" value = "submit">submit</button>
</form>
</body>
</html>

Related

Setting title and labels in alertifyjs

I have created a custom confirm dialog using alertifyjs and am trying to set the labels and title, however, I can't seem to achieve both at once. Please can someone help.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/alertify.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/themes/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/alertify.min.js"></script>
</head>
<body>
<div style="display:none;">
<div id="dlgContent">
<p> Enter Value One </p>
<input class="ajs-input" id="inpOne" type="text" value="Input One Default Value" />
<p> Enter Value Two </p>
<input class="ajs-input" id="inpTwo" type="text" value="Input two default Value" />
</div>
</div>
<!-- the script -->
<script>
var dlgContentHTML = $('#dlgContent').html();
$('#dlgContent').html("");
alertify.confirm(dlgContentHTML).set('onok', function(closeevent, value) {
var inpOneVal = $('#inpOne').val();
var inpTwoVal = $('#inpTwo').val();
//updateListItems(inpOneVal,inpTwoVal);
if (inpOneVal == "test" && inpTwoVal == "test") {
alertify.success('Successful');
} else {
alertify.error('Wrong')
}
}).set({title:"Update"},{labels:{ok:'Forward', cancel: 'Backward'}});
</script>
</body>
</html>
This is how I have attempted
...}).set({title:"Update"},{labels:{ok:'Forward', cancel: 'Backward'}});
Please can someone tell me how I can achieve this because I want to set custom title and title for the dialog box. I been on the documentation but wasn't able to achieve what I wanted.
Your syntax is wrong
Change
.set({title:"Update"},{labels:{ok:'Forward', cancel: 'Backward'}});
to
.set({title:"Update"}).set({labels:{ok:'Forward', cancel: 'Backward'}});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/alertify.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/themes/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/alertify.min.js"></script>
</head>
<body>
<div style="display:none;">
<div id="dlgContent">
<p> Enter Value One </p>
<input class="ajs-input" id="inpOne" type="text" value="Input One Default Value" />
<p> Enter Value Two </p>
<input class="ajs-input" id="inpTwo" type="text" value="Input two default Value" />
</div>
</div>
<!-- the script -->
<script>
var dlgContentHTML = $('#dlgContent').html();
$('#dlgContent').html("");
alertify.confirm(dlgContentHTML).set('onok', function(closeevent, value) {
var inpOneVal = $('#inpOne').val();
var inpTwoVal = $('#inpTwo').val();
//updateListItems(inpOneVal,inpTwoVal);
if (inpOneVal == "test" && inpTwoVal == "test") {
alertify.success('Successful');
} else {
alertify.error('Wrong')
}
}).set({title:"Update"}).set({labels:{ok:'Forward', cancel: 'Backward'}});
</script>
</body>
</html>

Multiple input boxes - alertifyjs / Jquery

I am trying to create a prompt dialog box using alertifyjs that has multiple input boxes. I have managed to create the dialog box to show the multiple boxes but I cant seem to make a reference to the inputs that user provides.
I want to write if statement that carries out action based on user input when they press OK. However, the OK button doesnt seem to be working and also the if-statements don't work as well. I am not sure what I might be doing wrong, can someone please help me.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/alertify.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/themes/bootstrap.min.css"/>
<script src="//cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/alertify.min.js"></script>
</head>
<body>
<div style="display:none;" >
<div id="dlgContent">
<p> Enter Value One </p>
<input class="ajs-input" id="inpOne" type="text" value="Input One Default Value"/>
<p> Enter Value Two </p>
<input class="ajs-input" id="inpTwo" type="text" value="Input two default Value"/>
</div>
</div>
<!-- the script -->
<script>
var dlgContentHTML = $('#dlgContent').html();
$('#dlgContent').html("");
alertify.confirm(dlgContentHTML).set('onok', function(closeevent, value) {
var inpOneVal = $('#inpOne').val();
var inpTwoVal = $('#inpTwo').val();
updateListItems(inpOneVal,inpTwoVal);
if (inpOneVal == "test" && inpTwoVal == "test") {
alertify.success('Successful');
} else {
alertify.error('Wrong')
}
}).set('title',"Update");
</script>
</body>
</html>
Link to JSfiddle: http://jsfiddle.net/1qouxdkc/4/
In your script you call a function named updateListItems(inpOneVal,inpTwoVal);
As that function is not declared anywhere, it errors, so with that temporarily commented out, it works.
Stack snippet
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/alertify.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/themes/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/alertify.min.js"></script>
</head>
<body>
<div style="display:none;">
<div id="dlgContent">
<p> Enter Value One </p>
<input class="ajs-input" id="inpOne" type="text" value="Input One Default Value" />
<p> Enter Value Two </p>
<input class="ajs-input" id="inpTwo" type="text" value="Input two default Value" />
</div>
</div>
<!-- the script -->
<script>
var dlgContentHTML = $('#dlgContent').html();
$('#dlgContent').html("");
alertify.confirm(dlgContentHTML).set('onok', function(closeevent, value) {
var inpOneVal = $('#inpOne').val();
var inpTwoVal = $('#inpTwo').val();
//updateListItems(inpOneVal,inpTwoVal);
if (inpOneVal == "test" && inpTwoVal == "test") {
alertify.success('Successful');
} else {
alertify.error('Wrong')
}
}).set('title', "Update");
</script>
</body>
</html>

I'm trying to make a login page but its not working

<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<form name="login"> <input type="text" placeholder="user name" name="userid"><br> <input type="password" placeholder="password" name="pswrd"><br><br> <input type="button" onclick "check(this.form)" value="Login" /> </form>
<script>
function check(form) {
if (form.userid.value == "name" && form.pswrd.value == "password") {
window.open('https://www.youtube.com')
} else {
alert("wrong")
}
}
</script>
</body>
</html>
its not working... every time I try it it does not read the code.
You have missed = operator after onclick
<input type = "button" onclick "check(this.form)" value ="Login"/>
^

Why is the a form fade function not allowing validation?

Is this code correct? I want the 'submit' to validate the field (to make sure a value has been entered) and if this is correct (there is a value) then fade and display.
Currently, the form fades even when no value is entered? I feel I'm missing something really simple here!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
<link rel='stylesheet' type='text/css' href='styles.css' />
<meta charset="utf-8"-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<div id="sidebarf">
<form id="sidebarform" name="myForm" onsubmit="return validateForm()" method="post">
<input type="text" id="sidebarusername" name="fname" placeholder="Name" required>
<input type="submit" id="sidebarformsubmit" value="Submit">
</form>
</div>
<script>
$("#sidebarformsubmit").click( function(){
$("#sidebarform").fadeOut("slow", function(){
$("#sidebarf").html("hello " + $("#sidebarusername").val() )
});
});
</script>
</body>
</html>
Judging by your comment on the other answer, you don't care if this actually gets submitted, so you could do the following:
HTML:
<div id="sidebarf">
<form id="sidebarform" name="myForm" method="post">
<input type="text" id="sidebarusername" name="fname" placeholder="Name" />
<input type="submit" id="sidebarformsubmit" value="Submit" />
</form>
JS:
$(document).ready(function() {
$('#sidebarform').on('submit', function() {
if ($('#sidebarusername').val() == '') {
alert('First name must be filled out');
return false;
}
$("#sidebarform").fadeOut("slow", function(){
$("#sidebarf").html("hello " + $("#sidebarusername").val() );
});
return false;
});
});
Working example:
http://jsfiddle.net/3z5x8/
Your validation is bound to the submit event. The click event will always be fullfilled.
Bind your handler to the submit event also
$("#sidebarformsubmit").submit( function(){.....
Unless you are submitting with ajax the form will cause a page refresh also which means your fade and show new html won't work

Append URL with form input

This is my first attempt to write anything in javascript, although this does exactly as intended, I am sure it can be done simpler. Not that this script is all that useful, just an exercise in learning something new. I was also trying not to use the evil document write.
So what is the more elegant way of doing this?
<html>
<body>
<input name="abc" type="text" id="foo">
<button onclick="AddInputValue()">Submit</button>
<p id="displayURL"></p>
<script>
function AddInputValue(){
var domain = "http://site.com?abc="
var qstring = document.getElementById("foo").value;
document.getElementById("displayURL").innerHTML=domain + qstring;
}
</script>
</body>
</html>
If you use jQuery:
<html>
<!-- Include jQuery! -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<form id="form1">
<input name="abc" type="text" id="foo">
<button type="submit">Submit</button>
</form>
<p id="displayURL"></p>
<script>
$(document).ready(function () {
var form = document.getElementById("form1");
$(form).submit(function () {
var domain = "http://site.com/?";
var data = $(this).serialize();
document.getElementById("displayURL").innerHTML = domain + data;
return false;
});
});
</script>
</body>
</html>
You can even add more form elements and the name of the element will match the query string. http://jsfiddle.net/3muu6/
Just posting the example in http://jsfiddle.net/3muu6/.
Increased the number of inputs. This is basically what Google Analytics URL Builder does, and was the inspiration for this exercise.
<html>
<head>
<!-- Include jQuery! -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>
<body>
<form id="form1">
<input name="abc" type="text" id="foo" /><br />
<input name="def" type="text" id="bar" /><br />
<input name="ghi" type="text" id="tar" /><br />
<input name="jkl" type="text" id="boo" /><br />
<button type="submit">Submit</button>
</form>
<p id="displayURL"></p>
<script>
$(document).ready(function () {
var form = document.getElementById("form1");
$(form).submit(function () {
var domain = "http://example.com/?";
var data = $(this).serialize();
document.getElementById("displayURL").innerHTML = domain + data;
return false;
});
});
</script>
</body></html>
Now how to omit a query-string pair when the user leaves an input value blank? Hmm.

Categories

Resources