in hard-work I created a selected form with images, correctly shown in Firefox, Chrome and Internet Explorer in compatibility mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>InputEdit Demo</title>
<link rel="stylesheet" type="text/css" href="css/standard.css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="inputedit.js"></script>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700' rel='stylesheet' type='text/css'/>
</head>
<body style="margin:30px;">
<form action="form.php" method="post">
<select id="sel_no1" name="sel_no1" class="inputEdit_select">
<option value="1">Diese Woche</option>
<option value="2">Diesen Monat</option>
<option value="3">Hall of Fame</option>
</select>
</form>
</body>
</html>
I used the Javascript plugins from there:
Download They used MooTools, a JavaScript framework.
Now to my Problem:
when i want to use onclick="this.form.submit();" nothing happens.
Did anyone of you can get me a better use of an well designed select form with onchange submit? Or show me how can i solve my problem?
Here I've uploaded all my files with a preview. This problem I try to fix for a lot of hours. I hope some friendly guy would help me.
Regards
Robin
If you want to just submit the form when the select box is changed, do this:
<form action="form.php" method="post" id="theForm">
<select id="sel_no1" name="sel_no1" class="inputEdit_select" onchange="document.getElementById('theForm').submit();">
<option value="1">Diese Woche</option>
<option value="2">Diesen Monat</option>
<option value="3">Hall of Fame</option>
</select>
</form>
Related
Here I'm looking for button side the select option any one can please help on it. i want repeat button and option like this. I have no idea on it i am trying to this but not working please help anyone.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form control: select</h2>
<p>The form below contains two dropdown menus (select lists):</p>
<form action="/action_page.php">
<div class="form-group">
<label for="sel1">Select list (select one):</label>
<select class="form-control" id="sel1" name="sellist1">
<button>button1</button>
<option>1</option>
<button>button1</button>
<option>2</option>
<button>button1</button>
<option>3</option>
<button>button1</button>
<option>4</option>
<button>button1</button>
</select>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Sorry to say this but No, you can't put any HTML inside of an option element, just text. You'll need to use either an list element to emulate a select, or use a change-handler on the select element.
You can use grid for this type of functionality..
Or you can use Bootstrap dropdown to achieve such functionality. As far as I know it wont be possible to achieve this in native select component.
Please check this link https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
You can use something like this for this bootstrap dropdown
I am working on CS50 Week8 problem set. In the following code, I have a dropdown list and a button, and the link embedded in the latter depends on the former. For some reason the button gets automatically clicked without being intended. Any idea why this is going wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Justin's Homepage</title>
</head>
<body id="homepage">
<h1 id="welcome">Welcome to Justin's Homepage!</h1>
<p class="p1">Where would you like to travel next?</p>
<select class="p1" id="location">
<option value="interlaken">1. Interlaken</option>
<option value="hokkaido" selected>2. Hokkaido</option>
<option value="croatia.html">3. Croatia</option>
</select>
<div id="confirm">
<form>
<button class="p1" type="button" onclick="gotosite(); return false">Confirm!</button>
<script>
var location = document.getElementById("location").value;
function gotosite(){
location.href(location + ".html");
}
</script>
</form>
</div>
</body>
</html>
You need the get the value of the select field when someone clicks on the Submit button not on loading the page so you should keep the value getting logic inside the function.
I have also updated the window.location.href thing, have a look.
This is working snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Justin's Homepage</title>
</head>
<body id="homepage">
<h1 id="welcome">Welcome to Justin's Homepage!</h1>
<p class="p1">Where would you like to travel next?</p>
<select class="p1" id="location">
<option value="interlaken.html">1. Interlaken</option>
<option value="hokkaido.html" selected>2. Hokkaido</option>
<option value="croatia.html">3. Croatia</option>
</select>
<div id="confirm">
<form>
<button class="p1" type="button" onclick="gotosite()">Confirm!</button>
<script>
function gotosite(){
window.location.href = document.getElementById("location").value;
}
</script>
</form>
</div>
</body>
</html>
The button is not being clicked.
<script>
var location = document.getElementById("location").value;
location is a predefined variable in the global scope. You can't redeclare it there. Your assignment is going straight to the existing global location.
Since that line of code is outside of any function, it executes immediately.
It indeed is what Quentin said.
You can fix it by using the code from the example above, or look at my example.
It is a little bit different.
The main difference is that I've placed the script just before the body closes.
And I did not use an onclick attribute on the button.
Instead I used an eventListener attached to your button. I prefer the eventListener as it does not nead to live inside the html.
You can simply create a js file scripts.js (<script src="scripts.js"></script>) and insert this code inside.
The advantage is that you only need to have this code once while you can have the same functionality on multiple pages.
Please note that I've also removed the <form> around the button. The reason for this is that you don't need it. You did add the type="button" which marks this button as simply a button instead of a form submit, so the form won't submit a GET request to itself, but as I've learned years ago; less is more.
Of course there is plenty more to tell and help you with, but I hope this gives you some insight in other ways to fix the same issue.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Justin's Homepage</title>
</head>
<body id="homepage">
<h1 id="welcome">Welcome to Justin's Homepage!</h1>
<p class="p1">Where would you like to travel next?</p>
<select class="p1" id="location">
<option value="interlaken.html">1. Interlaken</option>
<option value="hokkaido.html" selected>2. Hokkaido</option>
<option value="croatia.html">3. Croatia</option>
</select>
<div id="confirm">
<button class="p1" type="button" >Confirm!</button>
</div>
<script>
document.querySelector('button').addEventListener('click', () => {
window.location.href = document.getElementById("location").value
});
</script>
</body>
</html>
I'm trying to make a text input field where visitors can enter a value and then hit go or submit.
Based on the digit number they would be send to a new page.
For example if they enter 123 and hit submit it would send them to http://www.example.com/page/123
Could anybody please help me get this up and running?
Thank you
Here we go have fun. just copy the code and save it as html. you don't need php or such. it is way too simple to need a server side code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.location.replace(" http://www.example.com/page/"+inputvalue);
});
});
</script>
</head>
<body>
<input type="text" value="11" id="input">
<button type="button" id="button">Click Me!</button>
</body>
</html>
I am trying to get AutoComplete to work on a website application I am making. I have stripped my code down to the bare essentials and I still cannot get it to work. I got the source file from http://www.phpguru.org/static/AutoComplete.html and I have done my best to implement it exactly how they did on their website demo. My test code is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>test</title>
</head>
<body>
<script language="javascript" type="text/javascript" src="/Management/AutoComplete.js"></script>
<div id="content">
<script type="text/javascript">
if (location.href.indexOf('/JavaScripts/AutoComplete') != -1) {
window.onload = function(){
data = ['Joes Plumbing1','Joes Plumbing2','Joes Plumbing3','Joes Plumbing4'].sort();
AutoComplete_Create('customers', data);
}
}
</script>
<form id="form" action="" method="post">
<table border="0">
<tr>
<td>Customer Search</td>
</tr>
<tr>
<td><input type="text" id="customers"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Here is a bit more back ground info that may help you help me:
My server works fine with other .js files.
I copied and pasted the AutoComplete.js (NOT AutoComplete.old.js) file I downloaded from the site mentioned above, and didn't touch it at all.
Why isn't this working?
#Goran answered my question correctly in his comment to my question so props to him. The problem was my if statement:
if (location.href.indexOf('/JavaScripts/AutoComplete') != -1)
Once I made the string /JavaScripts/AutoComplete match what was in my address bar everything worked fine!
I am writing this code in html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
<title>Welcome to the memory game</title>
</head>
<body>
<h1>Welcome to the memory game!</h1>
<input type="button" name="type" value='Show Layer' onclick="setVisibility('sub3', 'inline');"/>
<input type="button" name="type" value='Hide Layer' onclick="setVisibility('sub3', 'none');"/>
<div id="sub3">Message Box</div>
</body> </html>
It suppose to make the "div" disappear and reapper, but it works in chrome and not in explorer.
Anyone has any idea how can I make it work in explorer (I tried allowing blocked content when that message about activeX appears in explorer)?
Thanks,
Greg
Can I suggest that you try using jQuery? It is very cross-browser friendly and has a .toggle() function to show/hide a DOM object.
Your function in jQuery would look like
function setVisibility(id) {
$('#' + id).toggle();
}