submit form with additional options?

Question

I have a page to edit user data for example. On top of the page is a decision if it comes from it's own submit or not. If submit then save the data and close the page. If not then input fields are visible.

But I want to be able to reload the page when some data were changed (for example onchance of a dropdown menue). Because when this dropdown menue is changed then other data should be changed or disabled etc. Therefore I need to reload the page with it's POST data but without saving data. But when I use submit() then it will be saved and closed.

Is there a way to send the form with POST data but to be able to decide if data should be finally saved or the form just should be updated with the POST data?

Thanks! Markus

Answer 1

A page reload isn't the best user experience when an options changes and you need to hide or show details on the page. If you can I'd suggest placing that logic in the front-end entirely. In case you need additional data based on the answer which is only present on the server, then use a GET call to the backend and populate the front-end with the result.

Without further details, I was only able to create this small snippet to give you the idea of how to do this. Comments are in the code.

$('document').ready(function() {
  $('#state').change(function() {

    // NOTE: code only used to show a visual change. Add logic into the .get call success function. Here, read the state and set the input to enabled or disabled depending on what is returned from the server.
    var state = this.value;
    $("#name").prop('disabled', state === "0" ? 'disabled' : '');

    // Make the server call, use GET as you are getting information.
    // The variable provided to the backend is state with value 0 or 1, (?state=0) 
    $.get("https://yourserver/?state=" + state, function(data) {

      // when the call is successful, use the data object to determine what should be done. 
      var state = data.state;
      $("#name").prop('disabled', state === "0" ? 'disabled' : '');
    });
  });

});

input:disabled {
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <select id="state">
    <option value="1">Enabled</option>
    <option value="0">Disabled</option>
  </select>
  <p><input type="text" id="name" placeholder="Your name"></p>
  <div class="result"></div>
</form>