How can i submit a form on value change of an input element?

Question

I'm working on a bootstrap site and im trying to implement a toggle button to change the colors of the design by switching it. So i made a toggle button wich is the same as a checkbox and now i need to know how i could submit the form instantly when i change the value of the checkbox to reload my site. Or is there any other way to implement such a functionality?

score 0 · Answer 1 · answered Mar 17 '16 at 22:41

0

If i were you, i would use jquery to bind an onChanged event to the toggle button and use Ajax to send the form when that event occurs

answered Mar 17 '16 at 22:41

James Nguyen

446
1
4
6

hey thanks for the fast answer! :) i looked up Ajax real quick but i never used it before. could u eventually tell me how i could do it with ajax? so sending the form when the even occurs – thimma Mar 17 '16 at 23:37

score 0 · Answer 2 · edited May 23 '17 at 11:50

You don't need to use either a <form> or AJAX for this (unless you want to communicate with the server - for example, to read settings from a database after the page has rendered).

You can create a pure js/jQuery solution pretty easy:

jsFiddle demo

Here is a brief discussion of AJAX, with a few simple examples

Code from jsFiddle Demo, as an SO code snippet:

chg = 0;
$('button').click(function(){
 if (chg==0){
  $('#hdr').css({'background':'palegreen','color':'darkgreen'});
  $('#body').css({'background':'wheat','color':'orange'});
  $('#ftr').css({'background':'lightblue','color':'blue'});
    $('body').css({'max-width':'70%'});
    chg++;
  }else if(chg>0){
  $('#hdr').css({'background':'palegoldenrod','color':'orange'});
  $('#body').css({'background':'#ccc','color':'darkcyan'});
  $('#ftr').css({'background':'bisque','color':'red'});
    $('body').css({'max-width':'80%','margin':'0 auto'});
  }
});

div{position:relative;box-sizing:border-box;width:100%;}
#hdr{height:80px;background:black;color:white;text-align:center;}
#body{height:60vh;background:white;color:black;}
#ftr{height:80px;background:black;color:white;text-align:center;}
button{position:absolute;top:15px;right:15px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="hdr">Header goes here</div>
<div id="body">body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body </div>
<div id="ftr">Footer this is the Footer</div>
<button>Change</button>

How can i submit a form on value change of an input element?

2 Answers2