views:

449

answers:

2

This may seem like an odd one, but I want to be able to fill in a static web form using values passed in via a GET param list.

Say I have a page, 'self.html':

<form action="self.html" method="get" accept-charset="utf-8">
  <label for = "40">New Question?</label>
  <input type="radio" name="40" id="40" value="Yes"> Yes &nbsp;
  <input type="radio" name="40" id="40" value="No"> No
  <label for = "41">What's your favourite colour?</label>
  <input type="text" name="43" value="" id="41">
</form>

I need the form to submit itself whenever an input changes:

  $(document).ready(function(){
    $('input').change(function(){
      $("form:first").submit();
    });
    // collate_results();
  });

but obviously I want to keep the values, so that they're not reset on the reload.

(Why? Because I'm doing it in a FileMaker web view, and the only way to pull data out of a form is to get the source - url - and parse it... hence I need to url to update to reflect the current state of the form, and also be able to pass in the data for any new records I want to display...)

UPDATE:

Here's my non-working code - it's fine single value fields, but fails for radio buttons...

$('input').change(function(){
  $("form:first").submit();
});
var qString = jQuery.url.attr("query");
if(qString) {
  qString = qString.split("&");
  $(qString).each( function() {
    var parts = this.split("=");
    var item = $('#'+parts[0]);
    if($(item).attr('type') == 'text') {
      $('#'+parts[0]).val(parts[1]);
    };
    if($(item).attr('type') == 'radio') {
      $(item).each(function() { 
        console.log(this);
        if($(this).val() == parts[1]) {
          $(this).attr('checked','checked');
        } else {
          $(this).attr('checked','');
        }
      });
    };
  })
}
});

The problem is that I will have multiple radio buttons with values of yes, no, na on the form, so the way that jQuery wants to do it doesn't seem to apply. I can re-id the radio button if that helps...

<form action="self.html" method="get" accept-charset="utf-8">
  <label for = "40">New Question?</label>
  <input type="radio" name="47" id="47_yes" value="Yes">Yes &nbsp;
  <input type="radio" name="47" id="47_no" value="No" checked> No
  <label for = "48">What's your favourite colour?</label>
  <input type="text" name="48" value="" id="48">
</form>
A: 

Better way may be to implement AJAX submit every time input changes.
But to read the GET params, you can use this plugin http://www.mathias-bank.de/2007/04/21/jquery-plugin-geturlparam-version-2/ for jQuery.

michal kralik
for FileMaker to read the form input values I need to set the GET params in the URL so not sure how AJAX would help in this instance.Am using jQuery.url.attr("query") to get the query string... now only need to figure out how to reset radio buttons from GET params without changing names or ids...
Dycey
Well if you have the params already then it should be only a matter of filling the values - `$('input[name=' + urlParam[i].name +']').val(urlParam[i].value);`
michal kralik
...except for radio buttons...
Dycey
Radios work the same way - http://docs.jquery.com/Attributes/val#val. Try removing the duplicate `id` attribute for radios as that is invalid HTML.
michal kralik
A: 

Here's something that sort of works... but still having problems with url encoding and decoding of values...

$(document).ready(function(){
  $('input').change(function(){
    $("form:first").submit();
  });
  var qString = jQuery.url.attr("query");
  if(qString) {
    qString = qString.split("&");
    $(qString).each( function() {
      var parts = this.split("=");
      var items = $("input[name^='"+parts[0]+"']");
      var myval = decodeURI(parts[1]);
      $(items).each(function() {
        var item = this;
        if($(item).attr('type') == 'text') {
          $('#'+parts[0]).val(myval);
        };
        if($(item).attr('type') == 'radio') {
          if($(item).val() == myval) {
            $(item).attr('checked','checked');
          } else {
            $(item).attr('checked','');
          }
        };
      });
    })
  }
});
Dycey