We Keep Coding

Change HTML form action based on selected option when submit button is pressed

HTML
<select class="form-control input-lg" id="r" name="r">
<option data-action="/test1">Test1</option>
<option data-action="/test2">Test2</option>
<option data-action="/test3">Test3</option>
<option data-action="/test4">Test4</option>
</select>
jQuery
$("form").submit(function( event ) {
event.preventDefault();
$("form").attr("action", $(this).children(':selected').attr("data-action"));
$(this).submit();
});
Problem
Form action does not update and form does not submit?

I'll assume that you have a form and a submit button (since it is missing in your codes), what your planning can also be done this way:
Since you're using the attribute data-, you can get its value by using data(nameOfData)
Using submit button
$("form").submit(function(e){
var newMethod = $(this).find(':selected').data('action');
$(this).attr('action', newMethod);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST">
<select class="form-control input-lg" id="r" name="r">
<option data-action="/test1">Test1</option>
<option data-action="/test2">Test2</option>
<option data-action="/test3">Test3</option>
<option data-action="/test4">Test4</option>
</select>
<button type="submit" id="btnSubmit">Submit</button>
</form>
Using a simple button
$("#btnSubmit").click(function(){
var newMethod = $("#selectElement :selected").data('action');
$(this).closest('form').attr('action', newMethod);
$(this).closest('form').submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST">
<select id="selectElement" class="form-control input-lg" id="r" name="r">
<option data-action="/test1">Test1</option>
<option data-action="/test2">Test2</option>
<option data-action="/test3">Test3</option>
<option data-action="/test4">Test4</option>
</select>
<button type="button" id="btnSubmit">Submit</button>
</form>

create a separate button like this:
HTML:
<!-- form html -->
<button type="button" id ="submit-btn" class="my-class">Submit!</button>
JS/jQuery:
$(document).ready(function()
{
$('#submit-btn').on('click', function()
{
var action = $('form select option:selected').data('action');
$.ajax({
url: action,
//rest of ajax code
})
})
});
instead of running the event on form submit, we execute the action via the button, which gets the action based on the selected option data-action value.

Use a button instead of submit button and submit the form inside the click event handler of the button. Inside the click handler, before submitting the form, change the action of the form.
I hope you can change the input type="submit" to type="button".

Changing form action based on select value - with JavaScript

I have a form that I wish to change the action of, depending on what value a user selects in a drop down box.
The example code below shows each option value, I want to change the form action to whatever option value is chosen on a button press, how can I do this with JavaScript?
<form name ="form1" action="VariableFormAction" method ="post" target="_blank">
<select name="formchoice">
<option value="/formaction1">function 1</option>
<option value="/formaction2">function 2</option>
<option value ="/formaction3">function 3</option>
</select>
<input type="submit" value="Go" class="button">
</form>

In order to do this you need to specify an onSubmit JavaScript event handler on the form that retrieves the value of the select list and updates the form action.
You can do this using the following code.
//Add onSubmit() event handler to form to call JavaScript method when the form is submitted.
<form name ="form1" onSubmit="actionOnSubmit()" method ="post" target="_blank">
<select id="formchoice" name="formchoice">
<option value="/formaction1">function 1</option>
<option value="/formaction2">function 2</option>
<option value ="/formaction3">function 3</option>
</select>
<input type="submit" value="Go" class="button">
</form>
<script>
function actionOnSubmit()
{
//Get the select select list and store in a variable
var e = document.getElementById("formchoice");
//Get the selected value of the select list
var formaction = e.options[e.selectedIndex].value;
//Update the form action
document.form1.action = formaction;
}
</script>
Note, for this to work you will need to make sure the select list has an id as you are using the document.getElementById[] JavaScript method to retrieve the value of the control.
You could also call the JavaScript in the OnChange() event of the control. The issue with this is that it implies that the value has changed before the form is submitted. If the user simply left the default select list value it is possible that the OnChange() event would never fire.

You can try like following.
function selectChanged(ctrl) {
var val = ctrl.value;
var frm = document.getElementById('form1');
frm.action = val;
}
<form id="form1" name="form1" action="/formaction1" method="post" target="_blank">
<select name="formchoice" onchange="selectChanged(this)">
<option value="/formaction1">function 1</option>
<option value="/formaction2">function 2</option>
<option value ="/formaction3">function 3</option>
</select>
<input type="submit" value="Go" class="button">
</form>

Use on change attribute.
<select name="forma" onchange="location = this.value;">
<option value="Home.php">Home</option>
<option value="Contact.php">Contact</option>
<option value="Sitemap.php">Sitemap</option>
</select>

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

Submit a form without using submit button

I am using a form to submit the data to get the records from the database.
In the form I am using the two select tag options.
So after selecting the options the form should submit without using the submit button.
I am waiting for the response to submit the form after selecting the inputs without using the submit button(or any button) it should submit automatically.

Make a function to check everything you want has been set, and then if it has, submit the form:
function submitIfFormComplete()
{
// Check the select has something selected
if (document.getElementById('selectOne').selectedIndex > 0)
{
document.getElementById('formID').submit();
}
}
Then on your select, bind the onchange event to run the function.
Here is a working example: http://jsfiddle.net/JE6AM/
Select your car make:
<select id='sel1' name='selectCar' onchange="checkAndSubmit()">
<option value="0">Select...</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br/><br/>
Select your gender:
<select id='sel2' name='selectGender' onchange="checkAndSubmit()">
<option value="0">Select...</option>
<option value="Male">Volvo</option>
<option value="Female">Saab</option>
</select>
Javascript:
function checkAndSubmit()
{
if (document.getElementById('sel1').selectedIndex > 0
&& document.getElementById('sel2').selectedIndex > 0)
{
//document.getElementById('formID').submit();
alert('both have been selected!');
}
}
I've replaced the submit with an alert() to show you how the code triggers.
Edit: You can use $_REQUEST['selectCar'] to access the value.

Every form has a submit() function.
<form name="myForm">
...
</form>
can be submitted with
document.myForm.submit();

Jquery has been used to easily to submit the form.
<form id="test">
<select name="select1" id="select1">
</select>
</form>
$('#select1').change(function() {
$("#test");
});

<form action="submit.php" id="submitform" method="post">
Name:<input type="text" name="nm"> <br>
Age:<input type="number" name="age">
submit

How to prevent form submission for a form using onchange to submit the form when certain values are selected

I have a form I have built:
<form class="myform" action="cgi.pl">
<select name="export" onchange='this.form.submit()'>
<option value="" selected="selected">Choose an export format</option>
<option value="html">HTML</option>
<option value="csv">CSV</option>
</select>
</form>
Now, this form works fine if I pull down and select "HTML" or "CSV". But if I hit the back button and select "Choose an export format", the form is submitted, even though I dont want it to be.
Is there any way to prevent form submission for that option?

onchange='if(this.options[this.selectedIndex].value!=''){ this.form.submit(); }'

$("select[name=export]").on("change", function(e) {
if ($(this).val() != "") {
$("form.myform").submit();
}
});