0

I have multiple pages with some input fields. On this page, I have a previous and next button as well as a save (submit) button. When I press the save button, it will save the user input in the database.

However when I press next or previous, I'll get an alert with:'The user input is not saved yet, untill you click the save button.' Pressing OK will go to the next page and cancel will make it stay on this page. This is what I want, however the alert will always pop up whenever I press next or previous even when there's no user input or in case of editting the user input has not changed. So I dont want the alert to popup whenever nothing has changed or nothing is filled in.

This is my javascript function:

function something(evt) {
        if ( ! confirm("The user input is not saved yet, untill you click the save button.") ) evt.preventDefault();
}

buttons:

<a onclick="something(event)" href=""> </a>

Also on some pages, there are select boxes as well. These have standard values and the select boxes cant be empty so I can't check on the select boxes. The check should only be on textareas and textfield.

I am not able to figure out how to accomplish this.

How would I get to check if the user input(textarea, textfield) has changed or is not empty in my case?

Dinshaw Raje
  • 933
  • 1
  • 12
  • 33
Loko
  • 6,539
  • 14
  • 50
  • 78
  • Use an `onchange` handler in the input fields that sets a variable, and check that variable in `something()`. – Barmar Apr 24 '15 at 07:19
  • @Barmar Thanks for the close(no sarcasm) That question might help me, but I was wondering how would I get textarea and textfield? *Im not experienced with javascript.* – Loko Apr 24 '15 at 07:24
  • http://jsfiddle.net/yknauggc/1/ – Said Kholov Apr 24 '15 at 07:26
  • There are several answers in that question that show how to detect changes on text fields. – Barmar Apr 24 '15 at 07:30

2 Answers2

0

In the something() function do a check if the input field is empty first:

function something(evt) {
  var input= document.getElementsByTagName('input')[0];
  if(input && input.value !=""){
    if ( ! confirm("The user input is not saved yet, untill you click the save button.") ) evt.preventDefault();
  }
}
Zee
  • 8,420
  • 5
  • 36
  • 58
  • This is not an option. I cant do it with ID's or Name's since this function has to be used for multiple pages with different input names – Loko Apr 24 '15 at 07:22
  • @Loko. Edited my answer. This time the code checks if at all there is an input present in the page. You can also use `input.length` instead of `[0]` . – Zee Apr 24 '15 at 07:31
0

you can save your input change in cookies and check them on clicking link whether it is edited or not. Note- include jquery library

$('input').change(function(){
 document.cookie="input="+$(this).val();

});
$("a").click(function(e){
    var inputChange= getCookie('input');

    if(inputChange!=$('input').val()){
         var ask = confirm('The user input is not saved yet, untill you click the save button.');
         if(!ask){
             e.preventDefault();
         }
    }

});
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}
mohit
  • 1,878
  • 1
  • 16
  • 27