Submit a form without using submit button - javascript

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

Related

Check string in select option

I have created with javascript and I get a result of a string.I get that result on my html code
<div id="results"></div>
Next,I want when I select for example Red to check if it is the the same thing (string), the select option - > Red with the string of this code
<div id="results"></div>
I was trying to do it but I failed.It is not working not even sure ,if I press the submit button I will send the string.
<div id="results"></div>
<form method="post" >
<select >
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input id="results" type="submit" value="results"/>
It appears that you want to check whether the selected option is equal to the text value of the div #results. You can achieve this effect like so:
$(document).ready(function(){
var select = $("select");
$("input[type=\"button\"]").click(function(){
var text = select.find(":selected").text();
if(text==$("#results").text()){
$("#results").html(text+" is equal!");
}else{
$("#results").html(text+" is not equal :(");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results">Red</div>
<form method="post" >
<select >
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input id="results" type="button" value="results"/>
</form>
A form is going to be Sending data somewhere, it would be best to remove the form, leaving the select and button elements. In the button add the code onclick='myFunction() ; when the button is clicked it will run the javascript function called myFunction(). Also you need to give the select a Id. I'm using selectInput
<script>myFunction() { document.getElementById('result').innerHTML = document.getElementById('selectInput').value;} </script>
Now when ever the button is pressed it will set the content of the div equal to the value entity in the selected select box option
You lack an action attribute.
<form method="post" action="path/to/file">
<select name="select">
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input type="submit" value="Get Results" />
</form>
Use a function, and a regular button. No form is needed.
<button onclick='func()'></button>
const func = () => {...}

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>

Stop form from submitting if select option is disabled

I'm not very good with forms and am having a great deal of difficulty with what should be a simple problem.
I have a form which contains the following:
<select id="values" name="Choice">
<option value="choose">Please Choose...</option>
<option value="01">Value 1</option>
<option value="02">Value 2</option>
</select>
All I want to do is stop the form from submitting if neither value-01 or value-02 are selected but the disabled option doesn't work.
How can I achieve this?
UPDATE:
I'm already using javascript to check the form, but this does not seem to work.
function submitForm() {
if (formObj.Choice.value == '') {
alert("Please select a value");
return false;
}
return true;
}
UPDATE 2: In answer to #h4b0 question:
<input type="submit" value="Search" class="screen-reader-text button cf" name="SubmitButton" onclick="return submitForm();">
In the form tag, use something like
<form name='myForm' method='post' id='myForm' onsubmit='return submitForm()'>
....
</form>
When the form is submitted, it will run that JavaScript function, and then return the value of the result to the form. If it's true, it posts the data. If the results are false, it will cancel the submit.
You're really close with what you have in your submit button, but change the onclick to onsubmit, and move the event binding to the form tag.
[EDIT]
Your form will never return false with how you are checking for values in the select. Since none of the options have value='', your if statement will never evaluate to true and return false to the function caller.
Try this, While Submitting the form call a method to check your condition by selectedIndex and return false to cancel the submit.
<script>
function validateMe(){
var x=document.getElementById("Choice").selectedIndex;
var y=document.getElementById("Choice").options;
if(y[x] != "01"|| y[x] != "02"){
return false;
}
return true;
}
</script>
<form name="YourForm" id ="YourForm" onSubmit="return validateMe()">
<select id="values" name="Choice" id="Choice">
<option value="choose">Please Choose...</option>
<option value="01">Value 1</option>
<option value="02">Value 2</option>
</select>
<input type="submit" value="Search" class="screen-reader-text button cf" name="SubmitButton">
</form>

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

Categories