i want to have a simple dropdown to choose betwenn 5 links (pages) but i want the link-page to be opened in the same window (target _self) after klicking "send". it should be as simple as possible. this is what i have so far:
<form>
<select id="setit" style="color: #0000FF" size="1" name="test">
<option value="#">please choose</option>
<option value="http://www.altavista.com">AltaVista</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.google.com">Google</option></select>
<input type="button" value="send"
onclick="window.open(setit.options[setit.selectedIndex].value)">
</form>
is it also possible to have the first one "not clickable" (nothing should happen after clicking on "send" on this one)?
thanks, you're awesome!
Below is my modified code:
<script type="text/javascript">
function openWindow(location){
if(location == "#")return;
window.open(location,'_self');
}
</script>
<select id="setit" style="color: #0000FF" size="1" name="test">
<option value="#">please choose</option>
<option value="http://www.altavista.com">AltaVista</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.google.com">Google</option></select>
<input type="button" value="send" target="_self"
onclick="openWindow(setit.options[setit.selectedIndex].value)">
Related
I am a backend developer so I need help with this front end part.
<input id="entered_value" type="number" name="entered_value">
<input id="entered_valuetwo" type="text" name="entered_valuetwo">
<select id="selected_value" name="selected_value"> <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="button" id="send-data">Click me</button>
when the button is clicked its already triggering something I have in JS. But what is the best way to pass "entered_value" & "entered_valuetwo" & "selected_value" all 3 at the same time to the button and they get passed to the js function thereafter.
just add this to your js
document.getElementById('send-data').addEventListener('click',buttonFunction)
function buttonFunction(){
let enteredValue = document.getElementById('entered_value').value
let enteredValue2 = document.getElementById('entered_valuetwo').value
let selectValue = document.getElementById('selected_value').value
console.log(enteredValue,enteredValue2,selectValue)
}
<input id="entered_value" type="number" name="entered_value">
<input id="entered_valuetwo" type="text" name="entered_valuetwo">
<select id="selected_value" name="selected_value"> <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="button" id="send-data">Click me</button>
If you want to put it into a databas i would use post request like this:
<form action="your url" method="Post">
<input id="entered_value" type="number" name="entered_value">
<input id="entered_valuetwo" type="text" name="entered_valuetwo">
<select id="selected_value" name="selected_value">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="button" id="send-data">Click me</button>
</form>
But if you want to use it temporarylie use document.getElementby(𝗜𝗗) or better document.querySelector(#𝗜𝗗)
I have a form with two datalist and I would like to generate a link based on the user's selection.
<form>
<input list="Cars">
<datalist id="Cars">
<option value="Honda" selected>Honda</option>
<option value="Mazda">Mazda</option>
<option value="Ford">Ford</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
</datalist>
<input list="Years">
<datalist id="Years">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</datalist>
<input type="reset">
</form>
For an example, if user chooses Honda and 2017, then the link appears and the address is Honda/2017.net. If the user chooses Subaru and 2015 then the address is Subaru/2015.net and etc.
I can input the different href manually in the code but I am not sure how you make one link change based on selection?
You need Javascript for the so called dynamic html or DHTML. Could be done like this:
<!DOCTYPE html>
<script type="text/javascript">
function generateLink()
{
var brand = document.getElementById('carBrand').value;
var year = document.getElementById('carYear').value;
document.leform.action =brand + '/' + year + '.html';
return true;
}
</script>
<form name="leform" onsubmit="return generateLink();">
<input list="Cars" id='carBrand'>
<datalist id="Cars">
<option value="Honda" selected>Honda</option>
<option value="Mazda">Mazda</option>
<option value="Ford">Ford</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
</datalist>
<input list="Years" id='carYear'>
<datalist id="Years">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</datalist>
<input type="reset">
<input type="submit">
</form>
What happens?
If the submit Button is clicked, the generateLink() function is called. onsubmit="return generateLink();"
In the generateLink() function the value of the selected option for the car/brand and the year are read from html using the getElementById function.
Then the extracted values for the brand and the year are used to generate the corresponding link via concatenation of car, a slash, the year and finally the string '.html'.
The link the form will redirect to is set in the forms action attribute. document.leform.action
To process data submitted by the form you will need some kind of CGI mechanism: https://en.wikipedia.org/wiki/Common_Gateway_Interface
You could use PHP to pass data further to a database for example.
Hope this helps ^^-d
PS: You could also want to implement the page that follows the form (action=) in PHP as dynamic content. Using a HTTP GET Request this could look like /show.php?car=Subaru&Year=2016 which would save you from creating an html file per option (car X year = 15 files!). URLs of HTTP GET Requests can be bookmarked like Honda/2017.net. More info on this here: http://php.net/manual/en/reserved.variables.request.php
use below snippet as a boilerplate.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<input list="Cars" onchange="generateUrl()">
<datalist id="Cars">
<option value="Honda" selected>Honda</option>
<option value="Mazda">Mazda</option>
<option value="Ford">Ford</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
</datalist>
<input list="Years" onchange="generateUrl()">
<datalist id="Years">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</datalist>
<input type="reset">
</form>
<p id="generated">
</p>
<script type="text/javascript">
function generateUrl(){
var x = document.querySelector("[list='Cars']").value;
var y = document.querySelector("[list='Years']").value;
document.getElementById('generated').innerHTML = (x+y);
}
</script>
</body>
</html>
You can grab the values of the <datalist> using the onchange event; store them in a variable somewhere, then write it out to your link.
var car = '';
var year = '';
$("input[name=car-list]").on('change', function(){
car = $(this).val();
});
$("input[name=yr-list]").on('change', function(){
year = $(this).val();
});
$("input[name=submit]").on('click', function(){
$("#mylink").attr('href', car + '/' + year);
$("#mylink").html(car + '/' + year);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input list="Cars" name="car-list">
<datalist id="Cars">
<option value="Honda" selected>Honda</option>
<option value="Mazda">Mazda</option>
<option value="Ford">Ford</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
</datalist>
<input list="Years" name="yr-list">
<datalist id="Years">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</datalist>
<input type="button" name="submit" value="Submit">
<input type="reset">
</form>
<a id="mylink" href="">My Link</a>
I've checked a few pages online on how to disable a submit button of a dropdown box unless an option has been selected. But can't find one that works for me.
Any help on how to do that would be great!
Edit: I don't want <option value="not_valid">-- select an option --</option> to be considered as an option
<form action="action_page.php">
<select name="attacks" id="attacks">
<option value="not_valid">-- select an option --</option>
<option value="attack1">1</option>
<option value="attack2">2</option>
<option value="attack3">3</option>
<option value="attack4">4</option>
<option value="attack5">5</option>
</select>
<br>
<input type="button" id="battle" onclick="game()" value="Battle">
</form>
use onChange event
<html>
<head>
</head>
<body>
<form action="action_page.php">
<select name="attacks" id="attacks" onchange="selectChanged()">
<option value="not_valid">-- select an option --</option>
<option value="attack1">1</option>
<option value="attack2">2</option>
<option value="attack3">3</option>
<option value="attack4">4</option>
<option value="attack5">5</option>
</select>
<br>
<input type="button" id="battle" onclick="game()" value="Battle">
</form>
<script>
function selectChanged(){
attacks = document.getElementById("attacks");
if(attacks.value =="not_valid"){//or whatever th unwanted value is
document.getElementById("battle").disabled = true;
} else{
document.getElementById("battle").disabled = false;
}
}
</script>
</body>
</html>
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();
});
});
I have a dropdown form, and when the user clicks on an element I want them to go to the url I have in the code without hitting a submit button. Here is the code I have so far
<select name="mydropdown" class="styled" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://www.cats.com">Select Your Compliance Center</option>
<option value="http://www.funcats.com">Fresh Milk</option>
<option value="http://cutecats.com">Old Cheese</option>
<option value="http://lolcats.com">Hot Bread</option>
</select>
but it doesn't seem to be working.
Any help would be greatly appreciated.
Use this:
<select name="mydropdown" class="styled" onChange="document.location = this.value" value="GO">
<option value="http://www.cats.com">Select Your Compliance Center</option>
<option value="http://cutecats.com">Old Cheese</option>
<option value="http://lolcats.com">Hot Bread</option>
</select>
More or less the same as the other answer, but this one goes through a form.
<form name="linkForm" method="POST" action="" id="form">
<select name="mydropdown" class="styled" onchange="document.getElementById('form').setAttribute('action', this.value); document.linkForm.submit(); ">
<option value="http://www.cats.com">Select Your Compliance Center</option>
<option value="http://www.funcats.com">Fresh Milk</option>
<option value="http://cutecats.com">Old Cheese</option>
<option value="http://lolcats.com">Hot Bread</option>
</select>
</form>