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
Related
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 am using Bootstrap within a Symfony 2.7 based WebApp. Now I came across a strange problem when using the Bootstrap collapse function within a Form:
The collapse function is used to toggle the visibility of DOM objects. If use this function to toggle an element (e.g. a div container) within a Form, the form validation is triggered.
When I run the my code (see below) on my server, a "This field is required" messages pops up, as soon as a toggle the container using the button.
This does not seem to work here. The Snippet below works just fine. However you can see problem when running the Snippet on w3Schools.com instead. Click on this link to get to one of their examples. Replace the example code with my Snippet and run it.
The effect is the same es on my server: A click on the toggle button will trigger the form validation.
How can this bee? What is difference with the Snippet here (works OK) and the Snippet on my server or at w3Schools.com on the other hand (does not work)?
How can I avoid the form validation?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" name="custom">
<div class="form-group">
<label class="control-label required" for="name">Name</label>
<input id="name" class="form-control" type="text" required="required" name="custom[name]">
</div>
<button class="btn btn-success" data-target="#toggleContainer" data-toggle="collapse" aria-expanded="true">Toggle</button>
<div id="toggleContainer" aria-expanded="true" style="">
1</br>
2</br>
3</br>
</div>
</form>
</div>
</body>
</html>
Add button attribute type="button" If you are not specifying by default it will take as type="submit"
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" name="custom">
<div class="form-group">
<label class="control-label required" for="name">Name</label>
<input id="name" class="form-control" type="text" required="required" name="custom[name]">
</div>
<button type="button" class="btn btn-success" data-target="#toggleContainer" data-toggle="collapse" aria-expanded="true">Toggle</button>
<div id="toggleContainer" aria-expanded="true" style="">
1</br>
2</br>
3</br>
</div>
</form>
</div>
</body>
</html>
I am writing a PHP/MySQL system. On one form I have a number of data entry elements including a check box (called 'conflict'). If someone checks this box then I want a section to appear that show a text box ('notes').
I have never used jquery before and so am trying a simple example which just doesn't work for me as, instead of seeing the text box only when I check the checkbox, I see it all of the time.
The code I am using is shown below and both jquery.js and dependson.js are in the same folder as the page.
Can anybody help please? (Sorry this is such a basic question!)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dependson.js"></script>
</head>
<script>
$('#myText').dependsOn({
// The selector for the depenency
'#myCheck': {
// The dependency qualifiers
enabled: true,
checked: true
}
});
</script>
<form id="myForm">
<label for="myCheck">Check Me</label>
<input type="checkbox" id="myCheck">
<label for="myText">Input</label>
<input type="text" id="myText" value="">
</form>
<body>
</body>
</html>
It's my first time using polymer.And I wanted to import some external scripts, but it's not working...
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="geo-dropdown">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://geotree.geonames.org/jquery.rightClick.js"></script>
<script type="text/javascript" src="http://geotree.geonames.org/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="GeoDropdown.js"></script>
<template>
<!-- entry point (earth ID) -->
<fieldset style="display:none;">
<div id="earth" gid="6295630" class="id_6295630"></div>
</fieldset>
<div>
<select id="continent" name="continent"></select>
<select id="country" name="country"></select>
<select id="adm1" name="adm1"></select>
<select id="adm2" name="adm2"></select>
<select id="adm3" name="adm3"></select>
<select id="adm4" name="adm4"></select>
<select id="adm5" name="adm5"></select>
<input id="submitBtn" type="submit" value="Submit" onclick="getLocation();"></input>
</div>
</template>
<script>
Polymer({
is: "geo-dropdown"
});
</script>
</dom-module>
Can someone help me? I believe that I'm making a stupid error, but I can't find it.
Remove the type="text/javascript".
Best way would be to load the dependency from a different html through import and reuse it again when needed.
Checkout marked-element to handle the scope.
Very hard to guess what the problem is without being told the error, or at least the expected vs actual behaviour... but having said that, the old croney gazing into tea leaves in the corner of my office is murmuring something about putting <script type="text/javascript" src="GeoDropdown.js"></script> after the template tag as it refers to DOM elements that have not come into existence yet... no - she is whispering it wont work... and something about loading it dynamically from the ready property of the Polymer definition object instead... and now she has passed out. Hmph.
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>