I have a JS <script> function and then a HTML<form> script and I am trying to implement them into my webpage side by side. However, When I implement them into the page they automatically put themselves one above the other as if there was a <br> in my script.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>test</TITLE>
<BODY>
<script type="text/javascript" src="http://se-flair.appspot.com/4146548.js"></script><form action="http://www.qrz.com/lookup" method="post" style="display:inline"><b>QRZ callsign lookup:</b> <input name="callsign" size="8" type="text" /> <input type="submit" value="Search" /> </form>
</HTML>
All of the information I have found says that I would need to download the .js from the server and modify some of its code and remove the <br>that may be inside it but I am not sure if there is any other way to do it.
<style>
.se-flair {
display: inline-block !important;
}
</style>
Add this to your HTML and it's done.
You can just wrap the script tag in a div with an id or classname and style it like so:
HTML:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>test</TITLE>
<BODY>
<div id='left'>
<script type="text/javascript" src="http://se-flair.appspot.com/4146548.js"></script>
</div>
<form action="http://www.qrz.com/lookup" method="post" style="display:inline"><b>QRZ callsign lookup:</b> <input name="callsign" size="8" type="text" /> <input type="submit" value="Search" /> </form>
</HTML>
CSS
#left {
float: left;
}
If you just want to remove the you could do as mentioned before with the float property, i make the example:
/* Styles go here */ #blockUsr{ float:left; margin: 5px; }
<!DOCTYPE html> <html> <head> <TITLE> test </TITLE> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <BODY> <div id="blockUsr"> <script type="text/javascript" src="http://se-flair.appspot.com/4146548.js"> </script> </div> <form action="http://www.qrz.com/lookup" method="post" style="display:inline"> <b> QRZ callsign lookup: </b> <input name="callsign" size="8" type="text" /> <input type="submit" value="Search" /> </form> </body> </html>
Related
So I'm trying to get an alert through jquery code. I have 3 inputs so login.password and button and when writing your login and password you should get an alert (log+pass). The error that i'm getting is:
GET http://localhost/php5/jquery-3.3.1.min.js net::ERR_ABORTED.
Here is my code.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> PHP </title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#send").click(function(){
var log=$("#login").val()
var pass=$("#password").val()
alert(log+pass)
})
})
</script>
</head>
<body>
<input id="login" placeholder="Login"><br>
<input type="password" id="password" placeholder="Password"><br>
<input type="button" id="send" value="send">
<div class="status"></div>
</body>
</html>
try to change
<script src="jquery-3.3.1.min.js"></script>
to
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
it works for me
All I'm trying to do is get the val() of an Text Input. Here is an example.
I don't know if external links are allowed so I will also paste it here :
<div class="input-group">
<input type="text" id="#test" class="form-control" aria-label="..." style='border-radius:4px;'>
</div>
<script>
// Always shows up as undefined..not "".
console.log($("#test").val());
</script>
Does anyone know why I cannot get the value of this element?
You have to remove the # sign from the id attribute :
<input type="text" id="#test" class="form-control" aria-label="..." ..
//_____________________^
Hope this helps.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Why can't I get the input value of the #test?</title>
</head>
<body style='padding:64px;'>
<div class="input-group">
<input type="text" value="test value" id="test" class="form-control" aria-label="..." style='border-radius:4px;'>
</div>
<script>
// Always shows up as undefined..not "".
console.log($("#test").val());
</script>
</body>
</html>
The code so far:
<!DOCTYPE html>
<html>
<head>
<title>Project 506</title>
<script type="text/javascript" src="sweetalert.min.js"></script>
<script src="https://ajax.googlesapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="sweetalert.css" type="text/css" />
<style type="text/css">
body {
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#first").click(function () {
sweetAlert("Oops...", "Something went wrong!", "error");
});
});
</script>
</head>
<body>
<h1>Message Boxes</h1>
<input type="button" id="first" value="Just a Notification" />
<input type="button" id="second" value="Successfully Completed!" />
<input type="button" id="third" value="Something Went Wrong!" />
</body>
</html>
I'm not clear on why the sweetAlert animation still doesn't pop up when I click on the first button. I've tried moving the lines of <script> into different parts of the script, but it still doesn't work. So how can I solve this problem?
Check you jQuery url.
It should be:
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
I have div and hidden span on it. I want to show it by button clicking. My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>register page</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<script type="text/javascript" src="/static/js/test.js"></script>
</head>
<body>
<form id="register-form">
<label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label>
<input id="register-username-input" type="text" placeholder="Type username..."/>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</form>
</div>
</body>
</html>
And my js file:
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
When i button clicked span does not show. Why? It shows very fast and than hidden again.
Chrome developer tools console doesn't show errors too.
Thank you.
Try adding return false to your button onClick() event.
Like this:
<button id="register-submit" onclick="show_element('register-username-label'); return false;" class="btn">Register</button>
You need to define your function before your first call to the function is being made. Normally it can be achieved by putting the function code inside a script tag nested inside the head of your HTML.
Like this:
<head>
<script type="text/javascript">
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
</script>
</head>
Sorry but this code works:
<html>
<head>
<script>
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
</script>
</head>
<body>
<div>
<span id="register-username-label" class="label label-important" style="visibility: hidden">Username can't be empty</span>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</div>
</body>
</html>
EDIT
I just read your edit. Btw i think your absolute path may causes problem.
Try this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>register page</title>
<link rel="stylesheet" href="./static/css/bootstrap.min.css">
<script type="text/javascript" src="./static/js/test.js"></script>
</head>
<body>
<form id="register-form">
<label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label>
<input id="register-username-input" type="text" placeholder="Type username..."/>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</form>
</div>
</body>
</html>
I have tried in Firefox, IE, and Chrome, and with the following code, none of my alerts fire. Either on pageload or when I click on an image. I am extremely new to JavaScript, but really appreciate the power it has regarding user experience. I would really like to learn it better, and hopefully, one of you folks would be able to help me understand why this won't work... I will include the full HTML as I have heard that JScript can be quite finicky when coming to selectors and DOM objects. I also have no idea how to properly throw errors in JavaScript... :(
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function preview(img, selection) {
alert("firedTwo");
}
$(document).ready(function () {
alert("firedThree");
});
$(window).load(function () {
alert("fired");
});
</script>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="../css/profile.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" >
<link rel="apple-touch-icon" href="apple-touch-icon.png" >
<title>CityGuru.ca - Saskatoon: Profile Editor</title>
</head>
<body>
<h1>Profile Picture Upload</h1>
<div id="subHeader">Upload Picture</div>
<div id="subContainer">
<h2>Create Thumbnail</h2>
<div align="center">
<img src="../images/users/saskatoon/1/photo.jpg" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
<div style="border:1px #e5e5e5 solid; float:left; position:relative; overflow:hidden; width:60px; height:60px;">
<img src="../images/users/saskatoon/1/photo.jpg" style="position: relative;" alt="Thumbnail Preview" />
</div>
<br style="clear:both;"/>
<form name="thumbnail" action="http://saskatoon.CityGuru.ca/includes/profileEditor.php?action=picUpload" method="post">
<input type="hidden" name="x1" value="" id="x1" />
<input type="hidden" name="y1" value="" id="y1" />
<input type="hidden" name="x2" value="" id="x2" />
<input type="hidden" name="y2" value="" id="y2" />
<input type="hidden" name="w" value="" id="w" />
<input type="hidden" name="h" value="" id="h" />
<input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" />
</form>
</div>
<hr />
<h2>Upload Photo</h2>
<form name="photo" enctype="multipart/form-data" action="http://saskatoon.CityGuru.ca/includes/profileEditor.php?action=picUpload" method="post">
Photo <input type="file" name="image" size="30" /> <input type="submit" name="upload" value="Upload" />
</form>
</div>
</body>
</html>
NOTE
When using FireFox's web console, the only JS error I get is:
$ is not defined
$() syntax is jQuery, not native javascript. (though some other libraries use this same syntax as well). You need to include jQuery for this to work.
add this http://code.jquery.com/jquery-latest.js in script tag in head section there is no jquery in your above code so $(document.ready(function() dont work
Try doing something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function preview(img, selection) {
alert("firedTwo");
}
...
</head>
The important things to notice:
You don't have jQuery referenced: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
You sorta put things out of order...
First, scripts like this usually go in the head.
Second, you shouldn't put JavaScript before the doctype ever.
Third, I don't see your opening head tag, just the closing tag.
Finally, you need to include a jquery script somewhere in the head.