Reset input values from GET url params using jQuery
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
<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=开发者_StackOverflow社区"radio" name="47" id="47_yes" value="Yes">Yes
<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>
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.
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','');
}
};
});
})
}
});
精彩评论