submitting a HTML form using JavaScript - javascript

i want to have a button to submit a form, but it doesnt seem to work. when the button is clicked, nothing happens.
HTML
<form method="post" action="process.php">
<select name="taskOption" id="taskOption2">
<option value="Select">Please select a site</option>
<option value="http://www.Itslearning.com">Itslearning</option>
<option value="http://www.NDLA.no">NDLA</option>
</select>
</form>
<button onclick="FormSubmit()" class="button button1 button1:hover">Take me there</button>
JavaScript
function FormSubmit() {
document.getElementById("taskOption").submit();
}
PHP
<?php
$option = isset($_POST['taskOption2']) ? $_POST['taskOption2'] : false;
if ($option) {
header("Location: $option");
}
else {
echo "Venligst velg en side.";
exit;
}
?>

Your function is wrong.
document.getElementById("taskOption").submit();// this is wrong
taskOption it is the id of select box not your forms
<form name="F1">// give a name to your form
.....
</form>
function FormSubmit() {
document.F1.submit();
}
or
<form id="formid">// give a id to your form
.....
</form>
function FormSubmit() {
document.getElementById('formid').submit();
}

You must write id of Form, like instead of below:
<form method="post" action="process.php" id="taskOption2">
<select name="taskOption" >
<option value="Select">Please select a site</option>
<option value="http://www.Itslearning.com">Itslearning</option>
<option value="http://www.NDLA.no">NDLA</option>
</select>
</form>

Use:
Javascript:
function FormSubmit() {
document.taskform.submit();
}
HTML:
<form method="post" name="taskform" action="process.php">
<select name="taskOption" id="taskOption2">
<option value="Select">Please select a site</option>
<option value="http://www.Itslearning.com">Itslearning</option>
<option value="http://www.NDLA.no">NDLA</option>
</select>
</form>
<button onclick="FormSubmit()" class="button button1 button1:hover">Take me there</button>

first you gave a name to form here form1 is name
then onclick you call the form
<form method="post" name="form1" action="process.php">
<select name="taskOption" id="taskOption2">
<option value="Select">Please select a site</option>
<option value="http://www.Itslearning.com">Itslearning</option>
<option value="http://www.NDLA.no">NDLA</option>
</select>
</form>
<button onclick="FormSubmit()" class="button button1 button1:hover">Take me there</button>
function FormSubmit() {
document.form1.submit();
}

Seems to me you just want a submit button in a form:
In that case, by far the easiest solution is move the <button> to inside the form tags, and make its type="submit". There's no Javascript required at all:
<form method="post" action="process.php">
<select name="taskOption" id="taskOption2">
<option value="Select">Please select a site</option>
<option value="http://www.Itslearning.com">Itslearning</option>
<option value="http://www.NDLA.no">NDLA</option>
</select>
<button type="submit" class="button button1 button1:hover">Take me there</button>
</form>

Try this
function submitMyForm()
{
alert("Test");
document.getElementById("myForm").submit();
}
<form id="myform" method="post" action="process.php">
<select name="taskOption" id="taskOption2">
<option value="Select">Please select a site</option>
<option value="http://www.Itslearning.com">Itslearning</option>
<option value="http://www.NDLA.no">NDLA</option>
</select>
</form>
<button onclick="submitMyForm()">The time is?</button>

It will not work because you forgot to add the id in the form and you are calling submit function on a form with id taskOption.
<form method="post" action="process.php">
there is no id in the form tag, add the id as:
<form method="post" action="process.php" id="taskOption">

You have wrong call submit , only form id or element can use submit() . So call form element first
function FormSubmit() {
document.getElementById("taskOption2").parentNode.submit(); //must call id not name (parentNode is getting for parent form element)
}
In your php you have wrong access with select id ,the correct thing is access by element name
$option = isset($_POST['taskOption']) ? $_POST['taskOption'] : false; //element name is valid call

Related

Change Button Name="" and Form Action based on Select Option in Jquery

Hi I have form which contains three search criteria.
These search criteria are jobs, resume, recruitment consultant.
Based on the drop down, fields are updated accordingly.
Based on the select value I want to change the action on the form, and name of the submit button. Problem is putting values with hyphen in option select makes jquery not work.
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
<option value="Jobs">Jobs</option>
<option value="Resume">Resumes</option>
<option value="Recruitment Consultant">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>
Change the form action as per following
action="search-recruitment-consultant-results?"
action="search-resume-results?"
action="search-job-results?"
And the button name (NOT VALUE OR TEXT) as per following
name="searchrecruitmentconsultantbutton"
name="searchresumebutton"
name="searchjobbutton"
I put these in option values accordingly
search-recruitment-consultant-results?
search-resume-results?
search-job-results?
and then used
<select name="search_for" onchange="this.form.action=this.value;">
but putting hyphen in option values makes the jquery show/hide not work
Try this code, see i have use hyphen in option and it works properly.
<form method="get" name="search" id="form" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
<option value="Jobs">Jobs</option>
<option value="Resume">Resumes</option>
<option value="Recruitment-Consultant">Recruitment Consultants</option>
</form>
<script>
$(document).ready(function() {
$("#search_for").change(function(){
if($(this).val()=='Jobs')
{
$("#form").attr("action",'search-job-results?');
$("#search_submit").attr('name',"searchjobbutton");
}
else if($(this).val()=='Resume'){
$("#form").attr("action",'search-resume-results?');
$("#search_submit").attr('name',"searchresumebutton");
}
else if($(this).val()=='Recruitment-Consultant'){
$("#form").attr("action",'search-recruitment-consultant-results?');
$("#search_submit").attr('name',"searchrecruitmentconsultantbutton");
}
});
});
</script>
i think this will help you
add id for your form 'formId'
$(document).ready(function(){
$('#search_for').change(function(){
var cur = $(this);
var search = cur.val();
if(search == 'job'){
$('#formId').attr('action', 'search-job-results?');
$("search_submit").attr('name', 'searchjobbutton');
} else if(search == 'Resume'){
$('#formId').attr('action', 'search-resume-results?');
$("search_submit").attr('name', 'searchresumebutton');
}else if(search == 'Recruitment Consultant'){
$('#formId').attr('action', 'search-recruitment-consultant-results?');
$("search_submit").attr('name', 'searchrecruitmentconsultantbutton');
}
});
});
try this
Add data attribute with button name
only you need to add - onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));" in the select
and data-name="" in the option
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for" onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));">
<option value="search-job-results?" data-name="searchjobbutton">Jobs</option>
<option value="search-resume-results?" data-name="searchresumebutton">Resumes</option>
<option value="search-recruitment-consultant-results?" data-name="searchrecruitmentconsultantbutton">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for" onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));">
<option value="search-job-results?" data-name="searchjobbutton">Jobs</option>
<option value="search-resume-results?" data-name="searchresumebutton">Resumes</option>
<option value="search-recruitment-consultant-results?" data-name="searchrecruitmentconsultantbutton">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>
Instead of writing multiple forms, just write one and use .change() and data-* attribute which is used to create custom tags. Store the button names inside <option data-name="button name"> then you can access this value with on change.
The data-* attributes is used to store custom data private to the page or application.
.change()
Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
$('#search_for').on('change', function () {
$('form[name="search"]').attr('action', $(this).val()).find(':submit').attr('name', $(this).find(':selected').data('name'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
<option data-name="searchjobbutton" value="search-job-results?">Jobs</option>
<option data-name="searchresumebutton" value="search-resume-results?">Resumes</option>
<option data-name="searchrecruitmentconsultantbutton" value="search-recruitment-consultant-results?">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>

How to make go to "link" button from option value?

How to make go to "link" button after changing option value and click sumbit?
I've got problem, because when I change value it's going to "link" before i click submit
<form action="search-form" method="post">
<select onChange="window.location.href=this.value" >
<option value="here comes a link nr 1">coffie medium</option>
<option value="here comes a link nr 2">coffe big</option>
</select>
<button type="submit" name="submit" value="submit"><img src="xyz.JPG" width="240" height="72">
</button>
</form>
Remove the onchange from the select element and write a listener for your submit button (you are using search-form action already)
<form action="search-form" method="post">
<select>
<option value="here comes a link nr 1">coffie medium</option>
<option value="here comes a link nr 2">coffe big</option>
</select>
<button type="submit" name="submit" value="submit"><img src="xyz.JPG" width="240" height="72">
</button>
</form>
EDIT:
#Peril Adding a solution as requested. Now it is working if you use onsubmit for the form submit as per below. Note that you should give valid links for the option values
function submit_form() {
window.location.href= document.getElementById('select-box').value;
}
<form onsubmit="submit_form()" method="post">
<select id="select-box">
<option value="http://google.com">coffie medium</option>
<option value="http://yahoo.com">coffe big</option>
</select>
<button type="submit" name="submit" value="submit">submit</button>
</form>
EDIT 2:
#Peril Normally we load external links into a page when we click on anchor tag. If you load it using window.location.href, you will get the cross-origin access error. Take the below snippet into a local html file and check it out.
// load href initially
document.getElementById('form-button').setAttribute('action', document.getElementById('select-box').value);
// load href on value change of select
function onChangeValue() {
document.getElementById('form-button').setAttribute('action', document.getElementById('select-box').value);
return false;
}
<body>
<select id="select-box" onchange="onChangeValue()">
<option value="http://www.google.com">coffie medium</option>
<option value="http://www.facebook.com">coffe big</option>
</select>
<form action="#" id="form-button" style="display:inline">
<input type="submit" value="Submit" />
</form>
</body>
Try including in your select the attribute 'onchange' and in the value of option the link, how that:
<select name="form" onchange="location = this.value;">
<option value="Home.php">Home</option>
<option value="Contact.php">Contact</option>
<option value="Sitemap.php">Sitemap</option>
</select>
remove the onchange event from select box and validate it in js on button click. If the page redirects what is the use of submit button
<form action="search-form" method="post">
<select>
<option value="here comes a link nr 1">coffie medium</option>
<option value="here comes a link nr 2">coffe big</option>
</select>
<button type="submit" name="submit" value="submit"><img src="xyz.JPG" width="240" height="72">
</button>
</form>
This isn't working, it only ads to adres url "search-form"
Ok, so if you use JavaScript or Jquery?
First Created the select:
<select name="form" id="form">
<option value="url">Home</option>
<option value="url">Contact</option>
<option value="url">Sitemap</option>
</select>
Try .change for assing a new location:
$("#form").change(function(){
var url = $(this).val();
location.assign(url);
});

How to prevent form submission if there is not any option selected from dropdown

I am using Rails 4 and in my app I have one form where I am passing form action via dropdown box. Now I want if there is not any option selected then form should not be submitted.
below is my code
= form_for #store, {:url => remove_multiple_store_path} do |f|
= f.select(:name, [['Delete', 'delete'], ['Change Status', 'changestatus']],{:include_blank=> 'Select Action'})
..........
..........
..........
= f.submit 'Submit'
I am getting in browser
<form method="post" action="/remove_multiple_store" accept-charset="UTF-8">
....
......
<select id="store_name" class="select1" name="store[name]">
<option value="">Select Action</option>
<option value="delete">Delete</option>
<option value="changestatus">Change Status</option>
</select>
</div>
<input type="submit" value="Submit" name="commit">
I wish if there is not any option selected or Select Action is selected then form should not be submitted.
For this I have searched but everything is I am getting as result its for PHP and I don't know ajax. So its very difficult for me to understand
If you need more details then just inform me I will post...
Can any one please help me... thanks in advance :)
Got the solution
Fiddle
$("#frm").submit(function(event){
// var valDDL = $(this).val();
//event.preventDefault();
var valDDL = $("#store_name").val();
if(valDDL=="")
{
event.preventDefault();
alert("select dropdown option");
}
});
HTML
<form method="post" id="frm">
<select id="store_name" class="select1" name="store[name]">
<option value="">Select Action</option>
<option value="delete">Delete</option>
<option value="changestatus">Change Status</option>
</select>
<input type="submit" value="Submit" name="commit"/>
</form>

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.

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

Categories