assign a form element to more than one form - 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();
});
});

Related

HTML submit form from select but comma separate values in GET

I have a simple HTML form that has a dropdown.
<form method="get">
<select name="category[]" multiple class="form-control">
<option value="1">First Value</option>
<option value="2">Second Value</option>
<option value="2">Third Value</option>
</select>
<input type="submit" value="Submit">
</form>
Upon submission of this form, it redirects to https://WEBSITE/?category[]=1&category[]=2. How do I have it redirect to https://WEBSITE/?category=1,2
I was looking for a simple solution instead of using jQuery to intercept the form submission, load in every submitted value, comma separate it, and use window.location.href to redirect.
<select multiple class="form-control" onclick="document.getElementById('cat').value=Object.values(this.options).filter(option=>option.selected).map(option=>option.value).join(',')">
<option value="1">First Value</option>
<option value="2">Second Value</option>
<option value="3">Third Value</option>
</select>
<form method="get">
<input id="cat" type="hidden" name="category" value="">
<input type="submit" value="Submit">
</form>

Dropdown form submit

i have a dropdown form but its not working when i want to submit it.
Here it is:
<form name="subselect">
<select name="menu">
<option selected="selected" value="javascript:void(0)">Select Payment Period</option>
<option value="http://1.com">Every 3 Months</option>
<option value="http://2.com">Every 6 Months</option>
<option value="http://3.com">Every 12 Months</option>
<option value="http://4.com">Every 24 Months</option>
</select>
<li class="pricing_footer"><a onclick="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" class="pricing_button">Purchase</a></li>
</form>
it works like so:
<select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
but i want a separate button to be the submit one.
Use a button:
<button>Submit</button>
Or an input (type=submit):
<input type="submit" value="Submit" />
You can use :
input type="submit" value="Submit
And you should use: form action="action_page.php method="GET" for your further action.
If you click "Submit", the form-data will be sent to a page called "action_page.php".
details: http://www.w3schools.com/html/html_forms.asp
Thanks guys!
I did the following thing, created a new script and assigned the submit button to it. I want the script to be able to open new url from the selected dropdown and it works now.
<script>function purchasefunc() {
var url=document.redirect.selection.value
document.location.href=url
}</script>
and the button
<a type=button value="Purchase" onClick="purchasefunc();" style="cursor: pointer;" class="pricing_button">Purchase</a>
try window.open(url)
or submit button change url onsubmit

Drop down menu - multiple tabs opening with one option

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);
});
});

Dropdown with Links and Send-Button opening in the same window?

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)">

Using a HTML select element to add get parameters to URL

I'm on a page like /gallery.php?place=300&name=place1, and I want it so that when I submit this form it goes to /gallery.php?place=300&name=place1&tag=X, where X is the number of the tag selected.
What's wrong here?
<form action="/gallery.php?place=300&name=place1" method="get">
<select name="tag">
<option value=1>Aerial</option>
<option value=2>Autumn</option>
<option value=4>Boats</option>
<option value=6>Buildings</option>
<option value=7>Canals</option>
</select>
<input type="submit" value="Filter"/>
</form>
Use hidden inputs instead of trying to use the query string twice:
<form action="/gallery.php" method="get">
<select name="tag">
<option value=1>Aerial</option>
<option value=2>Autumn</option>
<option value=4>Boats</option>
<option value=6>Buildings</option>
<option value=7>Canals</option>
</select>
<input type="hidden" name="place" value="300" />
<input type="hidden" name="name" value="place1" />
<input type="submit" value="Filter" />
</form>
Using a form with method get was overwriting the query string in your form action.
This extra parameters seem to work for me locally when using "post" instead of "get." Is that it?