Change form action based on drop down selection - javascript

Need form to change it's action depending on the selection from a specific drop down menu.
On change should trigger the script and change the action before user submits. Easier said than done when you're new to JS.. thanks for any help!
Javascript:
<script type="application/javascript">
function chgAction(form1){
if( recipient=="jordachedotcom_Advertising" )
{document.form1.action = "/adv_contact.php";}
else if( recipient=="dept_Public_Relations" )
{document.form1.action = "/pr_contact.php";}
else if( recipient=="dept_Manufacturing" )
{document.form1.action = "/manuf_contact.php";}
else if( recipient=="dept_Brands" )
{document.form1.action = "/brands_contact.php";}
else if( recipient=="dept_Holdings" )
{document.form1.action = "/holdings_contact.php";}
else if( recipient=="dept_Vendor_Inquiry" )
{document.form1.action = "/vend_contact.php";}
else if( recipient=="dept_Other_Inquiry" )
{document.form1.action = "/misc_contact.php";}
}
</script>
FORM HTML:
<form id="form1" name="form1" method="post" action="/">
Please choose a dept:<br/>
<select name="recipient" id="recipient" size="1" onChange="javascript:chgAction()">
<option value="" selected="selected">Select</option>
<option value="dept_Advertising">Advertising</option>
<option value="dept_Public_Relations">Public Relations</option>
<option value="dept_Manufacturing">Manufacturing</option>
<option value="dept_Brands">Brands</option>
<option value="dept_Holdings">Holdings</option>
<option value="dept_Vendor_Inquiry">Vendor Inquiry</option>
<option value="dept_Other_Inquiry">Other Inquiry</option>
</select>
<input type="submit">
</form>

Your code is missing the part to get the selected item from the selectbox.
document.form1.recipient.selectedIndex
The rest should be ok and i have created a Fiddle

I'm guessing as to your full intent, but I think that the best way to accomplish what you're doing here would be via php on the server side. Have the form direct to one particular page and then using your server-side language redirect to the proper url. For example, if you're using php do something like this:
client-side (html)
(note how the action property of the form is one fixed location)
<form id="form1" name="form1" method="post" action="./form-handler.php">
Please choose a dept:<br/>
<select name="recipient" id="recipient" size="1">
<option value="" selected="selected">Select</option>
<option value="dept_Advertising">Advertising</option>
<option value="dept_Public_Relations">Public Relations</option>
<option value="dept_Manufacturing">Manufacturing</option>
<option value="dept_Brands">Brands</option>
<option value="dept_Holdings">Holdings</option>
<option value="dept_Vendor_Inquiry">Vendor Inquiry</option>
<option value="dept_Other_Inquiry">Other Inquiry</option>
<select>
<input type="submit">
</form>
No javascript required!
server-side (php)
form-hander.php:
<?php
$recipient = $_POST['recipient'];
//Based on the value of the $recipient value redirect to the correct page
//using the header function
switch($recipient) {
case 'dept_Manufacturing':
header('Location: ./manuf_contact.php'); exit;
case 'dept_Brands':
header('Location: ./brands_contact.php'); exit;
case 'dept_Holdings':
header('Location: ./holdings_contact.php'); exit;
//... etc, etc
}

On your on change function, you can obtain your currently selected element using:-
var currentValue = $("#recipient option:selected").val();
And then apply these if checks as you specified on this currentValue var as shown below:-
if(currentValue == "dept_advertising"){
$("#form1").attr("action",customURL);
}

Try this
<form id="form1" name="form1" method="post" action="/">
Please choose a dept:<br/>
<select name="recipient" id="recipient" size="1" onChange="javascript:chgAction()">
<option value="" selected="selected">Select</option>
<option data-action="/adv_contact.php" value="dept_Advertising">Advertising</option>
<option data-action="/pr_contact.php" value="dept_Public_Relations">Public Relations</option>
<option data-action="/manuf_contact.php" value="dept_Manufacturing">Manufacturing</option>
<option data-action="/brands_contact.php" value="dept_Brands">Brands</option>
<option data-action="/holdings_contact.php" value="dept_Holdings">Holdings</option>
<option data-action="/vend_contact.php" value="dept_Vendor_Inquiry">Vendor Inquiry</option>
<option data-action="/misc_contact.php" value="dept_Other_Inquiry">Other Inquiry</option>
</select>
<input type="submit">
</form>
<script>
function chgAction(){
$('#form1').attr({'action':$('option:selected').attr('data-action')});
$('#form1').submit();
}
</script>

You could also just use the actual form action URLs as the option values and use a simple one line onchange attribute without any additional JS:
<form method="post" name="form1">
<select id="form_action" name="form_action" onchange="document.form1.action = this.value;">
<option value="https://url1.com">URL1</option>
<option value="https://url2.com">URL2</option>
</select>
</form>
Tested and working in Firefox. May possibly benefit from some measures to make it more cross-browser compatible.

Replace:
function chgAction(form1){...}
in
chgAction = function(form1) {....}
Code will work but it is not the ultimate dream. Better to use something like that:
(function(){
var form = document.querySelector('#form1'),
select = form.querySelector('#recipient'),
action = {
'jordachedotcom_Advertising': '/adv_contact.php',
'dept_Public_Relations': '/pr_contact.php',
'dept_Manufacturing': '/manuf_contact.php',
'dept_Brands': '/brands_contact.php',
'dept_Holdings': '/holdings_contact.php',
'dept_Vendor_Inquiry': '/vend_contact.php',
'dept_Other_Inquiry': '/misc_contact.php'
};
select.addEventListener('change', function () {
var el = this, value = el.value;
if (action[value]) {
form.action = action[value];
}
}, false);}());
Like jQuery:
(function($){
var form = $('#form1'),
select = $('#recipient'),
action = {
'jordachedotcom_Advertising': '/adv_contact.php',
'dept_Public_Relations': '/pr_contact.php',
'dept_Manufacturing': '/manuf_contact.php',
'dept_Brands': '/brands_contact.php',
'dept_Holdings': '/holdings_contact.php',
'dept_Vendor_Inquiry': '/vend_contact.php',
'dept_Other_Inquiry': '/misc_contact.php'
};
select.on('change', function () {
var el = $(this), value = el.val();
if (action[value]) {
form.attr('action', action[value]);
}
});}(jQuery));

Related

Unable to return value of dropdown value in PHP

I am trying to retrieve a dropdown value, but the value isn't being returned in PHP. It returns as empty. I have other dropdowns in the form, but the only difference between them and this one is that there is a function associated to it. Which the javascript actually returns.
Thanks for your help. Code for the dropdown is below.
function validateDays() {
var e = document.getElementById("age_category");
var age_category = e.options[e.selectedIndex].text;
if (age_category == "Sub-Junior") {
console.log("Success");
} else {
console.log("Not Sub-Junior");
}
}
<?php
if(isset($_POST['submit'])){
echo $age_category = $_POST['age_category']
}
?>
<form action="my_page.php" method="POST">
<div class="form-group">
<!-- AGE CATEGORY -->
<select class="form-control" name="age_category" id="age_category" onchange="validateDays();" required>
<option value="">Age Category</option>
<option value="Sub-Junior">Sub-Junior</option>
<option value="Junior">Junior</option>
<option value="Open">Open</option>
<option value="Master 1">Master 1</option>
<option value="Master 2">Master 2</option>
<option value="Master 3">Master 3</option>
<option value="Master 4">Master 4</option>
</select>
</div>
</form>
You trying get submit value:
$_POST['submit']
and You need age_category:
$_POST['age_category']
You are trying to check isset function on $_POST['submit'] but "submit" reference doesn't exists anywhere in your form.
First create a button or something else and name it "submit" and then submit your form.
Currently you are not submitting your form in your code
Problem solved. When I was checking to see if it was empty. I was actually assigning it to be empty.
So it looked like this
if($age_category = "")
instead of
if($age_category == "")

How to make a form input part of a website destination?

I have a select form made in html and I want to make the selected value part of the url destination when they submit it.
Example:
<form>
<select name="state" id="state">
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
</select>
<input type="submit" value="submit">
</form>
And when they choose, let's say "CA", I want the submit button go to "www.example.com/ca.html".
Here's my JS:
var stLocation = document.getElementById("state").value;
window.location.href = 'www.example.com/stLocation.html';
First of all you need to include yourjQuery library to your script. Then you try this
$('button').click(function (){
selectedValue = $('select').val().toLowerCase(); //I converted it to lowercase due to the case difference in your value and your url
window.location.href = "http://www.example.com/"+selectedValue+".html";
});
But if its in a form tag the use this instead
$('form').submit(function (e){
e.preventDefault();
selectedValue = $('select').val().toLowerCase(); //I converted it to lowercase due to the case difference in your value and your url
window.location.href = "http://www.example.com/"+selectedValue+".html";
});

send get variables for pretty url

I'm creating a pretty url base web and I have a problem with get variables in form.
I have a url like localhost/events/1 (1 is a get variable $_GET['eventID']).
I want to send the eventID with a form like below
<select name='eventID'>
<option value='1'>firstEvent</option>
<option value='2'>secondEvent</option>
<option value='3'>thirdEvent</option>
</select>
but when i click on submit button to send information into page and my url change to this
localhost/events/?eventID=1
but i want my url to be look like this
localhost/events/1
how could I achive to this?
If you want to do this at the client side, you can use the javascript onsubmit event and redirect to the page that you want. For example:
<script type="text/javascript">
function yourFunction()
{
var sel = document.getElementById('eventID');
if (sel.selectedIndex !== -1)
{
window.location.href = '/events/' + sel.options[sel.selectedIndex].value;
}
return false;
}
</script>
<form method="get" onsubmit="return yourFunction()">
<select name="eventID" id="eventID">
<option value="1">firstEvent</option>
<option value="2">secondEvent</option>
<option value="3">thirdEvent</option>
</select>
<input type="submit">
</form>
According to W3C The question mark is part of the definition of form submission with the GET method, so you can't actually do this. but you can redirect the page with javascript.
<form id="form" method="get">
<select name='eventID'>
<option value='1'>firstEvent</option>
<option value='2'>secondEvent</option>
<option value='3'>thirdEvent</option>
</select>
<input type="button" onclick="document.location.href= '/events/' + form.eventID.value" value="Submit">
</form>
thanks to all.
I want a solution without javascript or jquery
but it seems, there is no way to do this without them both.
I finally wrote some code in Jquery to solve this problem.
<form id="events" method="get">
<select name='eventID'>
<option value='1'>firstEvent</option>
<option value='2'>secondEvent</option>
<option value='3'>thirdEvent</option>
</select>
<input type="button" onclick="document.location.href= '/events/' + form.eventID.value" value="Submit">
</form>
$('#events').on('submit', function(e){
e.preventDefault();
document.location.href= '/events/' + $(this).find('select#sportID').val();
})

jquery form plugin send/get disabled select value

I use the Jquery_Form plugin and i would like to get the value of disabled select box.
HTML form :
<form id="myform" method="post">
<select name="myselect" id="myselect">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<input type="submit" value="send">
</form>
Javascript :
<script>
$('#myselect').val('2').attr('disabled', true);
$(document).ready(function() {
var options = {
target: '#response',
};
$('#myform').ajaxForm(options);
});
</script>
PHP :
if (isset($_POST['myselect']))
echo $_POST['myselect'];
else
echo "Oups nothing :(";
I always "get Oups nothing"
The value of a disabled input/select box is not transmitted. How about disabling all non-selected values instead?
$('#myselect option:not(:selected)').prop('disabled', true);
is method not methode (see the form) soo is not $_POST is Anything
<form id="myform" methode="post"> //NO
<form id="myform" method="post"> //YES
Finaly i think that i have to put a hidden input that contain the value.
example :
<select name="myselect" id="myselect" disabled>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<input type="hidden" name="myselect" value="2">
Or just remove "disabled" before sending :
$('form').bind('submit', function() {
$(this).find(':disabled').removeAttr('disabled');
});
If you want to get a value from a particular selectList's item, can you try with:
$('#myselect option:contains(1)').val();
Cheers.

how to create a form to generate url

i have a form on my site to generate url and it works well but the user should wait until the whole page is loaded to be able to use it properly , i think that happens because i use window.onload and i should use $(document).ready instead of it , but i couldnt replace it i need someone to help me with it
<script type='text/javascript'>
window.onload = function() {
document.forms['filterform'].onsubmit = filterLoad;
};
function filterLoad() {
var url,
colourSel = this.elements['department'],
shapeSel = this.elements['country'];
url = ( colourSel.options[colourSel.selectedIndex].value ) + ( shapeSel.options[shapeSel.selectedIndex].value );
window.location.href = url;
return false;
}
</script>
<form id="searchform" name="filterform">
<select class="chosen" name="department" id="searchfield" >
<option value="http://www.mysite.com/">choise 1</option>
<option value="http://www.mysite.com/">choise 1</option>
</select>
<select class="chosen" name="country" id="choose">
<option value="?qatar=show&action=Filter">qatar</option>
<option value="?ksa=show&action=Filter">ksa</option>
</select>
<label for="search"><button class="submit" onclick="filterLoad()" /></button></label>
</form>
I'd get rid of all the extra javascript to assign the function and just use:
<form id="searchform" name="filterform" onsubmit="filterLoad">
You have the right idea, I would just call that function though when the form is submitted, and remove the on click event from the submit button.
Try this :
<script type='text/javascript'>
function filterLoad() {
var url,
colourSel = this.elements['department'],
shapeSel = this.elements['country'];
url = (colourSel.options[colourSel.selectedIndex].value) + (shapeSel.options[shapeSel.selectedIndex].value);
window.location.href = url;
return false;
}
</script>
<form id="searchform" name="filterform" onSubmit="return filterLoad();" >
<select class="chosen" name="department" id="searchfield" >
<option value="http://www.mysite.com/">choise 1</option>
<option value="http://www.mysite.com/">choise 1</option>
</select>
<select class="chosen" name="country" id="choose">
<option value="?qatar=show&action=Filter">qatar</option>
<option value="?ksa=show&action=Filter">ksa</option>
</select>
<label for="search"><button class="submit" /></button></label>
</form>

Categories