Im working with just HTML at the moment and I would like to have a drop down menu option that opens more than one tab in the brower, I have been able to open one tab in the brower with one option but I was wondering if it is posible to open more than one with one option. I look forward to hearing from you, Thank you.
<form name="form" id="form">
<select name="Dropdown" id="Dropdown">
<option value="inidivual/Mindmap.pdf" selected="selected">Mind map</option>
<option value="inidivual/moneymatters.xlsx">Spreadsheet</option>
<option value="#">Identity design and documents</option>
<option value="#">Project review</option>
</select>
<input type="button" name="go_button" id= "go_button" value="Open" onClick="window.open(Dropdown.value,'newtab'+Dropdown.value)">
</form>
To select multiple options it should be set to multiple as this,
<form name="form" id="form" >
<select name="Dropdown" multiple id="Dropdown">
<option value="http://www.google.com" selected="selected">Mind map</option>
<option value="http://www.yahoo.com">Spreadsheet</option>
<option value="http://www.sdesigns.co.in">Identity design and documents</option>
<option value="http://www.bing.com">Project review</option>
</select>
<input type="button" name="go_button" id= "go_button" value="Open"">
</form>
and use the following jquery
$("#go_button").click(function(){
$("#Dropdown :selected").each(function(){
var newLink = $(this).val();
window.open(newLink);
});
});
Related
So, I'm building a web app using flask/jinja and I have a webpage that displays a list of data that includes date, and I currently have two drop down menus, one that controls the date range of data viewed and the other that sorts the data based on various parameters.
<form method='get' action=''>
<button class='btn btn-default'>View data from:</button>
<select name = "time_length">
<option value="0">All</option>
<option value="7">Week</option>
<option value="30">Month</option>
</select>
</form>
</div>
<div>
<form method='get' action=''>
<button class='btn btn-default'>sort:</button>
<select name = "sortby">
<option value="user">Name</option>
<option value="group">Project</option>
<option value="date">Date</option>
</select>
</form>
Individually, this works fine because the it just passes along ?time_length=7 or whatever to the url, but I can't figure out how to pass along both parameters. One ends up replacing the other in the link.
You need to have them sent from the same <form>.
<form method='get' action=''>
<button class='btn btn-default'>submit</button>
<select name = "time_length">
<option value="0">All</option>
<option value="7">Week</option>
<option value="30">Month</option>
</select>
<select name = "sortby">
<option value="user">Name</option>
<option value="group">Project</option>
<option value="date">Date</option>
</select>
</form>
i have a select box which is really simple but it keeps outputting empty options which i don't have these options. why is this?
<form id ="orderby" action="" method="post">
<select name="orderby"style="float:right;">
<option selected="true" style="display:none;">choose view order</option>
<option value="ASC" >Ascending<option>
<option value="DESC">Descending<option>
</select>
<input type="submit" value="Arrange" />
</form>
There's no empty options. Your problem is because of not closing properly second and third option tags. Try this:
<form id ="orderby" action="" method="post">
<select name="orderby"style="float:right;">
<option selected="true" style="display:none;">choose view order</option>
<option value="ASC" >Ascending</option>
<option value="DESC">Descending</option>
</select>
<input type="submit" value="Arrange" />
</form>
Because your selected option is set to display:none, either remove that or set one of the other options to selected.
Small detail you should use selected="selected" instead of true.
I working on a contact form. The point is it should be accessible without JavaScript. If JavaScript is avaible I want ask visitors about some details based on their purpose of contact.
HTML could look like this (labels are skipped on purpose, to shorten the code):
<form action="">
<select name="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
<button>Submit</button>
</form>
Well, if I could I would just add some areas that would be shown based on "model". But I can't do it because I don't want to show additional fields to people without JS.
It would be like this:
<form action="" ng-app>
<select name="purpose" ng-model="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
<div ng-show="purpose == 'support'">
<input type="text" name="customernumber" />
</div>
<div ng-show="purpose == 'interview'">
Sorry, I'm not giving interviews
</div>
...
<button>Submit</button>
</form>
The point is that I will be asking a lot of additional questions. With JS disabled the visitor will be seeing a bloated contact form with all fields and messages.
I'm looking for a solution that would read the value of and inject HTML from JS file into a specific place.
<form action="" ng-app>
<select name="purpose" ng-model="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
{{injectedHTML}}
...
<button>Submit</button>
</form>
It sounds strange, but everything must be according to the requirements of local municipal office. They want to show these specific fields only to people with JS.
Maybe they think it is good for accessibility. I'm not sure.
Thank you all.
To simply hide set of elements when JavaScript is disabled you could add ng-hide class to elements that should not be displayed. In example:
<form action="" ng-app>
<select name="purpose" ng-model="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
<div ng-show="purpose == 'support'" class="ng-hide">
<input type="text" name="customernumber" />
</div>
<div ng-show="purpose == 'interview'" class="ng-hide">
Sorry, I'm not giving interviews
</div>
...
<button>Submit</button>
</form>
The ng-hide class sets display: hidden. When JavaScript is enabled ng-show will evaluate the condition and add or remove ng-hide class from element.
Another fairly simple solution would be to use ng-include to load additional content when appropriate - which obviously would only work when JavaScript is enabled - thus making additional fields hidden when JavaScript is not working.
<form action="" ng-app>
<select name="purpose" ng-model="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
<div ng-if="purpose == 'support'" ng-include="'views/supportField.html'">
</div>
<div ng-if="purpose == 'interview'" ng-include="'views/interviewField.html'">
</div>
...
<button>Submit</button>
</form>
Thanks to miensol I started to think about method using "ng-include". Then I realised one thing: Angular can override the HTML.
So I came with this HTML:
<form ng-controller="ContactController">
<select ng-model="purpose" ng-options="p.title for p in possibilities track by p.value">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
<div ng-include="purpose.template"></div>
</form>
And this app.js:
(function(){
var app = angular.module('myApp', []);
app.controller('ContactController', ['$scope', function($scope) {
// array with possible reasons, that we use as <option> in <select>
// the "AJ" is added so you can see the difference
$scope.possibilities =
[
{ title: 'AJ Just saying hi', value='hello', template: 'part-support.html'},
{ title: 'AJ Customer Support', value='support', template: 'part-support.html'},
{ title: 'AJ Interview', value='interview', template: 'part-interview.html'}
];
// select default <option>
$scope.purpose = $scope.possibilities[0];
}]);
})();
Still I got feeling it could be written much better (and it's out of my league).
I have this small form with two submit buttons, on clicking each button I want form data to be sent to different PHP file. But, both submit buttons are sending the form data to the default PHP file specified in the action attribute of the form tag. Is there a way to send the form data to different files with different buttons. I made an unsuccessful attempt to do so by redefining the action attribute in the second submit button
<div class="dropdown dropdown-dark">
<select name="promoteyearselect1" id="promoteyearselect1" class="dropdown-select" onfocus="showhidephdmenu()" form="promotionform" required>
<option value="">Select an option</option>
<div id="yearselect1">
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">4th</option>
<option value="5">5th</option>
</div>
</option>
</select>
</div>
<select name="promotesemselect1" id="promotesemselect1" class="dropdown-select" form="promotionform" required>
<option value="">Select an option</option>
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">4th</option>
<option value="5">5th</option>
<option value="6">6th</option>
<option value="7">7th</option>
<option value="8">8th</option>
<option value="9">9th</option>
<option value="10">10th</option>
</select>
<form id="promotionform" action="promotestudents.php" method="POST">
<div style=" position:relative; margin-top:10px; padding-left:44%;">
<input type="submit" value="Promoted" class="button black" />
<input type="submit" value="Passed Out" class="button black" form="promotionform" action="alumni.php"/>
</div>
</form>
Two separate forms wont work, the page will submit in between. You need Ajax to send the data behind the scene without refreshing the page
finally did it with the help of this code.
source: http://blog.theonlytutorials.com/multiple-submit-button-in-a-single-form-with-php/
<?php
if(isset($_POST['submit1']))
{
echo "You hit the button 1";
}
if(isset($_POST['submit2']))
{
echo "You hit the button 2";
}
?>
<html>
<head><title>Multiple Submit button Solved with PHP!</title></head>
<body>
<form action="" method="post">
<h2> Hit the Submit Button</h2>
<input type="submit" name="submit1" value="btn1" />
<input type="submit" name="submit2" value="btn2" />
</form>
</body>
just use jQuery:
$(document).ready(function(){
$('#button1').click(function(){
$('#yourForm').attr("action","phpFile1.php");
$('#yourForm').submit();
});
$('#button2').click(function(){
$('#yourForm').attr("action","phpFile2.php");
$('#yourForm').submit();
});
});
So I am trying to have a page on my site that contains 2 drop down boxes and a submit button. The submit button will point to a URL when clicked and then that will take them to a new page.
The URL will be based on whatever is selected in the drop down menus.
For example:
Drop down 1 has options A and B
Drop down 2 has options 1 and 2
Then there would be a different url for each combination
A1 points to URL-1
A2 points to URL-2
B1 points to URL-3
B2 points to URL-4
I really don't know much about coding and have been searching for a way to do this for the last 3 hours and I just don't even know how to google it. I really appreciate any help I can get at this point. Thank you in advance! :)
Here is the code from my drop boxes. I edited the options to match the example with the A, B, 1, and 2.
<html>
<body>
<form>
<select id="list1t">
<option>Select one</option>
<option>A</option>
<option>B</option>
</select>
</form>
<form>
<select id="list2">
<option>Select one</option>
<option>1</option>
<option>2</option>
</select>
</form>
</body>
</html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var url;
$(function(){
$('#link').click(function(){
var val1=$('#first').val();
var val2=$('#second').val();
if(val1=='A'){
if(val2=='1'){
url="URL1";
}
else{
url="URL2";
}
}else{
if(val2=='1'){
url="URL3";
}
else{
url="URL4";
}
}
window.location.href=url;
});
});
</script>
the html would be
<select id="first">
<option value="A" selected>A</option>
<option value="B">B</option>
</select>
<select id="second">
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
you can use a link for clicking . no need of form or submit button
BUTTON