Html form with automatic submit - javascript

I have a problem with html forms, I searched for a solutions on google but I didn't find any help. I want to do a html form without submit button, like here (search for activities:) , when I select option it redirect me to the value of option selected

Bind a change event handler to your select element and call the submit() method of the form when it is triggered.
Then have your server side form handler redirect to the page you want.
<form action="redirector">
<select name="destination">
<option value="1">Some page</option>
<option value="2">Some other page</option>
</select>
<!-- Normal submit button for when the JS fails -->
<input type="submit" value="Go">
</form>
<script>
document.querySelector('select').addEventListener('change', submitForm);
function submitForm(event) {
event.target.form.submit();
}
</script>

This is a javascript question. Using jQuery, you would do it something like this:
$(document).ready(function($){
$("select").on("change",function(){
window.location.href = "http://example.com/"+$(this).val();
});
});

Related

How to simulate user's click on the submit button in javascript when the "select" element changes?

I've got a simple html form. I would like to simulate user's click on the submit button in javascript when the "select" element changes.
So, I've tried to do that with the function onchange of the selects. I don't know how to write the function that would send the form. I have searched through this site, but I did't find anything that would work for me. It simply didn't do anything. It did not send the form. Maybe I only needed to include something, but I didn't, so maybe if I did, it would work. I really don't know. I am new in javascript. I would be very thankful for a piece of java script code (the function) and maybe the CDN or file that I need, if I do.
<!DOCTYPE html>
<html>
<head>
//probably I need to include something here (if so, could you please send me the CDN?)
</head>
<body>
<form method="post" id="theForm" enctype="multipart/form-data">
<select id="year_start" name="year_start" onchange="myFunction()">
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
<select id="month_start" name="month_start" onchange="myFunction()">
<option>January</option>
<option>February</option>
.
.
<option>December</option>
</select>
<select id="day_start" name="day_start" onchange="myFunction()" >
<option>1</option>
<option>2</option>
.
.
.
<option>30</option>
<option>31</option>
</select>
<input type="submit" id="submit" value="submit">
</form>
<script>
function myFunction(){
//what should I do there? - I want to simulate user's click on the "submit" button
}
</script>
<?php
//I want to do some stuff there after some of the selects was changed
echo $POST['year_start'];
echo $POST['month_start'];
echo $POST['day_start'];
?>
</body>
you can use .click() function to click on the submit function from javascript.
function myFunction(){
document.getElementById('submit').click();
}
And avoid using inline functions in html.
Instead of manually triggering a click event on the submit button, why not call the submit() method on the form instead?
function myFunction(){
document.getElementById('theForm').submit();
}
Since what you're using is just vanilla JS, you don't need to include any library: that's the beauty of writing vanilla JS.
Pro-tip: you might want to consider avoiding inline JS binding, and use addEventListener to check for the change event fired from the <select> elements (assuming that you want to bind to all <select> elements):
var formEl = document.getElementById('theForm');
var selectEls = formEl.querySelectorAll('select');
[].prototype.slice.call(selectEls).forEach(function(selectElement) {
// Bind event listener to each select element
selectElement.addEventListener('change', function() {
formEl.submit();
});
});
Otherwise, you can also use comma-separated ID selectors in your querySelectorAll() method, e.g.:
var selectEls = formEl.querySelectorAll('#year_start, #month_start, #day_start');
Important note
Based on your comments, I have a feeling that you want the JS to perform some kind of action in the PHP code. Remember that PHP is a server-side language, so if you want to use JS to trigger some kind of server-state mutation via PHP, you will need to use AJAX.
Here is a proof-of-concept example:
var formEl = document.getElementById('theForm');
var selectEls = formEl.querySelectorAll('select');
Array.prototype.slice.call(selectEls).forEach(function(selectElement) {
// Bind event listener to each select element
selectElement.addEventListener('change', function() {
// Here is just dummy code to show you how binding works
console.log('Will submit form');
// Uncommt this line to perform actual form submission
//formEl.submit();
});
});
<form method="post" id="theForm" enctype="multipart/form-data">
<select id="year_start" name="year_start">
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
<select id="month_start" name="month_start">
<option>January</option>
<option>February</option>
<option>December</option>
</select>
<select id="day_start" name="day_start">
<option>1</option>
<option>2</option>
<option>30</option>
<option>31</option>
</select>
<input type="submit" id="submit_button">Submit</button>
</form>

Prevent loading image from appearing until form is complete

I'm building a site which requires the client clicking a submit button. This site includes HTML select menu's and input fields.
This information is then submit to a php file which then passes the data onto a MySQL database.
I've added some code to enable a loading image when the submit button is clicked. But currently, the user can click submit without filling in the form and the loading message appears as well as a message telling the user to enter data into the missing fields.
What I would like, is for the loading message to ONLY appear once the form has been filled out and when the data is being passed the PHP file.
I've crudely mocked this up in a JSFiddle below to better explain what I'm saying:
Link
JSFiddle throws up a POST error obviously, but on my site obviously the data is posted and that error doesn't exist, so ignore it.
HTML:
<form onsubmit="myButton.disabled = true; return true;">
<label for='name'>
Please Enter Your Name:
</label><br>
<input class="label" type="text" name="name" placeholder="Click/Tap here..." required><br><br>
<label for='urgency'>Urgency</label><br>
<select type="select" name="urgency" select id="urgency" required>
<option value="" disabled selected hidden>Please specify an urgency...</option>
<option value="1">1 - Least Urgent</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br><br>
<span>
<button type="submit" name='myButton' value="submit" id="submit">Submit</button>
<button type="reset" value="Reset">Reset</button><br>
</span>
<div id="loader" style="display:none;"><br>
<label>
Please Wait...
</label>
<img src="ajax-loader.gif" alt="Loading" />
</div>
</form>
JQuery:
$('#submit').click(function(e){
$('#loader').toggle();
});
Do not wire up the submit button. Instead use the submit event
do not use submit as id or name
use the id of the button if needed
$('#formID').on("submit",function(e){
var empty = false;
$("input:required",this).each(function() {
if (!$.trim($(this).val())) {
empty=true;
return false; // leave
}
});
if (empty) {
e.preventDefault();
}
else {
$('#loader').toggle();
$("#myButton").attr("disabled",true);
}
});
You could handle the toggling of loading images on the submit event (which is probably where you do your AJAX'ing):
$('form').on('submit',function(){
$('#loader').toggle();
});
The submit event won't fire until the form fields are valid.
You will have to toggle it "off" somewhere else, fx. the "success" and "error" callbacks of the AJAX-function.
Hope it helps.

Javascript onchange select boxes

So I have a drop down box that posts to the page on a submit button.
I am trying to remove the submit button and make it so it posts when you change the drop down as its a much better way to work!
The value = "submit_button" and it gets picked up by:
// Check if form has been submited
if ($_POST['submit_button'])
{
// If form has been submited set $newCookieValue variable, set cookie and refresh webpage
$newCookieValue=$_POST['dbselector'];
The code I am trying to use is:
<form>
<select name="dbselector" onchange="this.form.submit()" style="margin-left:0.5em;">
<option value="option_1" selected="selected">option_1</option>
<option value="option_2">option_2</option>
</select>
<noscript><input type="submit" value="submit_button"/></noscript>
</form>
When I change the drop down from option 1 to option 2 it reloads the page but I don't think its posting the values as I can check the values by adding this into the top of the page:
<br> <?php var_dump($_POST['dbselector']) ?>
<br> <?php var_dump($_POST['submit_button'])?>
and they both return NULL?????
You need to state in your form that you are using POST via method in order to tell the form which HTTP method to use:
<form method="post">
...
</form>

Ajax form select changes doesn't appear in jQuery .serialize/.val

I'm retrieving form with .load jQuery function and places it in document body.
After that I'm changing select value (manually) and trying to save form with ajax .post request.
Select value retrieved by jQuery in any way (with .val or sereilize) doesn't changes. Value stays as it was rendered.
Without prevetnDefault (with plain POST request) form saves as expected. But both .val on select or .sereilize on form returns old select value (not really selected).
<form
id="phrase-fake-form-12243"
method="POST"
action="/phrase-fake/change-group/12243/3">
<input type='hidden' name='csrfmiddlewaretoken' value='UQuHH3ahAnBaSUPsCBaF1QKF4I0O48AO' />
<select name="group" id="phrase-fake-modal-group-dropdown">
<option value="20393"
selected="selected">
1
</option>
<option value="20405"
>
2
</option>
<option value="20417"
>
3
</option>
</select>
<input type="submit" value="Сохранить" class="ui button blue">
</form>
JS:
<script>
$("#phrase-fake-form-12243").submit(function (event) {
console.log($('#phrase-fake-form-12243').serialize())
console.log($('#phrase-fake-modal-group-dropdown').dropdown('get value'))
$.post('/phrase-fake/change-group/12243/3', $('#phrase-fake-form-12243').serialize())
event.preventDefault();
});
</script>
What I'm doing wrong? Actually it's seems like a bug..
Try using this library, form2js
You just have to call the method .toObject() on the jQuery object.
For example, if this is your html
<form id="test">
...
</form>
You can get the all the form element values by
var formObject = $("#test").toObject();

Retrieving an element value from a form present several times in one page

Using server side code Im creating several forms using the same class to prevent the submit using jquery, this forms have a select box and depending of their value i make something.
<form class="fooForm">
<select name="fooBox">
<option value="bar">bar</option>
</select>
<button type="submit">Send!</button>
</form>
<form class="fooForm">
<select name="fooBox">
<option value="bar11">bar11</option>
</select>
<button type="submit">Send!</button>
</form>
<form class="fooForm">
<select name="fooBox">
<option value="bar22">bar22</option>
</select>
<button type="submit">Send!</button>
</form>
<script>
$(".fooForm").submit(function (e) {
e.preventDefault();
//How do I read the value of he current selectbox ???
});
</script>
A this point I wonder, is this valid html? And how do I read the value of the seletbox from the form that is trying to post?
jQuery
$(".fooForm").submit(function (e) {
e.preventDefault();
console.log($(this).children('select').val());
alert($(this).children('select').val());
});
Hope this helps...!!!
The form that was submitted is stored in this, and the selectbox can be found by wrapping the element in a jQuery container and applying .find(). The value of a select is retrieved with .val().
$( this ).find( 'select' ).val();
As for the validity of the HTML, run it through a validator. (It is.)

Categories

Resources