AJAX form checkbox array value gets "stuck" hanging - javascript

To make it really short and simple.
I have an AJAX form with method="GET", because I want to reflect all the changes in the URL (and for it to be accessible afterwards).
And the form is getting submitted to the server automatically when either of form elements is changed. On the server I rewrite the URL by using "history pushState".
I'm using Ruby-on-Rails as a server-side technology, if it matters.
One of the elements checkbox array (multiple elements can be chosen) - it is a list of parameters that user would like to see.
Now to the problem itself - suppose we visit this page for the first time.
None of checkboxes is checked so far. Then we check, for example, first checkbox.
Event is triggered - form is getting submitted -> url is rewritten properly.
Then I uncheck this checkbox -> event is triggered -> form gets submitted -> url is rewritten properly again!
Everything is correct so far.
And now the case that does NOT work.
I check this checkbox -> form is submitted -> url rewritten. Correct. And after that I hit "refresh" (F5 or Ctrl-R). I see that the checkbox is checked (as it is supposed to be), but ... I attempt to UNCHECK this checkbox, BUT for some odd reason on the server-side I still see this array value reaching the server. And, of course, it is reflected in the URL as well - it is present there (while it should not).
Sorry for messy explanation.
I'm I doing something extremely wrong?
P.S Form works correctly with ordinary parameters (fields, mainly).
P.P.S I was really curious - what is going on there, and I even attempted to see form values before they got submitted to the server by executing following code:
$("#my-form").on("ajax:beforeSend", function(){
console.log("FORM BEFORE SUBMISSION: " + $(this).serialize());
});
And the checkbox is absent there. Which is correct!
Thanks in advance!
P.P.P.S This is how my idea is implemented in general (very briefly):
<form method="GET" action="/search/?" id="my-form" data-remote="true">
... (some form elements here as well)
<input type="checkbox" name="search[types][]" value="1">
<input type="checkbox" name="search[types][]" value="2">
<input type="checkbox" name="search[types][]" value="3">
... (and submit button)
</form>
$("#my-form").change(function(){ $(this).submit(); });

Sorry everyone for wasting your precious time.
I found the problem - I used query-params as form "action" attribute, so submitting the form caused query params duplication every single time I refreshed the page before submitting it.
Easy :) Should have thought about it in the first place.

Related

Radio buttons in form do not transfer to another web page

I can not see why my code does not take me to the specified webpage when dealing with my radio buttons:
<form name="login" onsubmit="return validateForm()" method="post">
.
.
<input type="radio" name="ans1" id="yes">Yes<br>
<input type="radio" name="ans2" id="no">No<br>
<input type="submit" value="Login" onclick= "where_to_go();">
</form>
Script for where_to_go():
function where_to_go(){
if (document.login.getElementById('yes').checked) {
// Yes is chosen
document.location.href = "Admin_index.html";
} else if (document.login.getElementById('no').checked) {
// No is chosen
document.location.href ="Log-In_Greet.php";
}
}
Can someone please tell me where did I go wrong at?
You have two problems.
The first would be revealed if you had looked at your browser's Developer Tool's Console (and had log preservation enabled so it wouldn't be wiped when you navigated to a new page).
getElementById is a property of the document object and only the document object. It is not a property of document.logic so trying to call document.login.getElementById will throw an exception.
Second: You are running your JS when you submit the form.
The JS runs, tells the browser to navigate to one of two pages (or would if the above problem wasn't there), then the form submission continues and tells the browser to navigate to the form's action URL (which you haven't specified so is "the current URL"). This overrides the URL set in the JS.
The quick and dirty solution is to return false from the onclick function so that the normal behaviour of the submit button is cancelled.
The very slightly less dirty approach would be to use type="button" so you wouldn't be triggering a form submission in the first place.
The robust approach would be to write server side code which tests, on a POST request, which submit button was used and issues an HTTP redirect. This will work when the JS inevitably fails.
The cleanest, simplest, most reliable approach is to replace the radio buttons with simple links.

Jquery form submit behavior not understandable

I am writing code for a small webproject using js and jquery. In it, at some point, onclicking a button, i create a dialog. the dialog has a form within it with a name field and some number fields. I am supposed to check user inputs and send them to server, along with appending the name field to a list in the browser, to intimate user, one more item has been added. Two strange things are happening -
1) After posting the form, the dialog box closes on its own without me issuing a dialog('close') anywhere in the submit button handler.
2) The name entry doesn't get appended to the list. Its as if the whole page refreshes after the submit. With the original default entries of the list of names.
Anyone has any ideas on why this is happening? Would post some code for your aid.Please don't suggest to use Ajax instead. I think this reflects some fundamental flaw in my understanding of JS ways and would like to clear it first than just switching to some other technology.
<div id='dialog' title='Define New Matrix'>
<form name='form1' id='form1' method='post'>
<fieldset>
<label for="Name">Name</label>
<input type='text' name='nameofmatrix' id='Name' class='whitepanes'><br>
<label for="a11">a11</label>
<input type="text" name='a11' id='a11' class='whitepanes number-field'><br>
<label for="a22">a22</label>
<input type="text" name='a22' id='a22' class='whitepanes number-field'><br>
<button id='submit_button'>Submit</button>
<button id='cancel_button'>cancel</button>
</fieldset>
</form>
<p id='tip' style='color:red;'><i>All fields are required</i></p>
</div>
<script>
//#button_define is a button on whose clicking the dialog opens.
$('#button_define').click(function(){
$('#dialog').dialog('open');
$('#tip').html("<p style='color:red; font-size:small'>All fields are mandatory</p>");
});
$('#submit_button,#cancel_button').button();
$('#cancel_button').on('click',function(){
$('#dialog').dialog('close');
});
$('#submit_button').click(function(event){
event.preventDefault();
var name=$('input[name=nameofmatrix]').val();
//Validate is a function which returns a bool if validation proceeds correctly
var isCorrect = Validate();
if(isCorrect){
//if validated correctly then add to list
$('#form1').submit();
//$('#dialog').dialog('close');
$('#selectable').append("<li class='ui-widget-content'>",name,"</li>");
}
});
</script>
Its as if the whole page refreshes after the post. with the original entries.
That's precisely what happens. Though I'm not sure where you're submitting the POST request to since there's no action attribute on your form. But a standard non-AJAX request triggered by a form sends the request to the server and then renders the response from the server. If the response is this same page again, then this same page will be rendered again.
JavaScript isn't going to remember the state of the previous page when it loads this new response. Even if they're the same page, they're two separate responses from the server. So...
1) After posting the form, the dialog box closes on its own without me issuing a dialog('close') anywhere in the submit button handler.
The dialog isn't closing. After the page refreshes you're in an entirely new page context. It didn't close, it just hasn't been opened yet in this context.
2) The name entry doesn't get appended to the list.
There's nothing that would cause this to happen when the page loads, so in the new page context it doesn't happen. Your server-side code would need to include this content in the response to the POST request.
I think this reflects some fundamental flaw in my understanding of JS ways and would like to clear it first than just switching to some other technology.
Included in that misunderstanding is the fact that AJAX is part of JavaScript. (The "J" in "AJAX" stands for "JavaScript.") It's not "switching to some other technology." It's taking advantage of the capabilities of the technology you're already using. All AJAX does, really, is send requests and receive responses to/from the server without refreshing the page context.
You are not properly appending the name. The concatenation operator is not a comma, but a + in javascript:
$('#selectable').append("<li class='ui-widget-content'>" + name + "</li>");
Next, the form refreshes because you are submitting the form using $('#form1').submit();. If you do not want the page to refresh while submitting, use ajax.

Onclick to submit a form

There is a PHP-generated HTML 4 transitional page that is used to edit data from a database of a single record. The user has two options: to store changes or delete the record. I use a form with controls (some of them are hidden):
<form method="post" action="object_mod.php"><!-- this is another file -->
<!-- inputs follow -->
As I want to process two actions ie. delete or save a record I put two submit buttons on the form, before </FORM> tag:
<input type="submit" id="btnSubmit" value="Save">
<input type="submit" id="btnDelete" value="Delete">
</form>
Because the user should confirm deletion I added the following onclick event:
<input type="submit" id="btnDelete" value="Delete" onclick="javascript:deleteRecordConfirm();">
(I also tried without javascript: and onclick="javascript:deleteRecordConfirm(); return true;"), but it doesn't submit a form.
The JS function is
function deleteRecordConfirm(){
if(confirm('Are you sure to delete?')){
document.getElementById("field_action").value=-1;
//document.forms[0].submit();
return true;
}
}
This field_action is set to -1 so I know in object_mod.php that I want to delete record rather than save it.
Here go question, why this form doesn't submit on deletion?
I think it would be good if a user has Javascript disabled to submit a form anyway, even without confirmation so that is why I use <INPUT TYPE="submit"> for deletion. Is it a good idea? I was thinking about giving two independent forms (in fact deletion should have only one hidden field with record id) with their own submit buttons, one for deletion and the other for saving.
In fact the page will work in some kind of intranet, with users who I trust and I'm not afraid of hacking or something, but any security remarks are also welcome.
(I tested it on Firefox 19.0 and Javascript console shows no errors, w3c validator says it's a valid page).
The form should submit according to your code. The only thing I spot is that you should terminate the input tags with />.
BUT... this way, even if the the confirm is cancelled, the form will be submitted. Use the form.onsubmit handler and if that returns false, the form will not submit.
I dont think #B3aT's answer is right in that not unconditionally the best way to "externalise" so to say. Many the the simplest is the best.
I think the best way is to "externalize" the actual form posting.
//make regular buttons (not submit)
//call your own functions (save and delete)
//after you have done your logic do document.forms["myform"].submit();
Another solution is to add a checkbox named "delete" and rename the "save" button to "Done or do". And on server side, if "delete" is activated, then ..delete it.
Usually the "delete" is required "per entry" level (same user have multiple records), so you will have to make a separate button/link and eventually do an ajax request/access an URL with ?delete=1&id=3.
You need to make custom yes/no windows or use a jQuery plugin for it, the only browser standard is "confirm".
OK, it worked, and this was in fact very stupid mistake. The problem was with this button as it was outside the form. I was so sure that I have it inside that I did not review PHP code but copied all from script not the HTML output as I should have done.
As I understand this correctly the line document.forms[0].submit(); worked but it was not because it was button who submitted the form but document.form[0] object itself.
Thank you for all your answers. I will try this form.onsubmit hint from Marcell.

Form submission string concat/modify

So not sure if this is possible but I have a pretty complex form. With multiple levels of processing ie: If you click a radio button 'x' amount options so up in a drop down etc etc.
Well the problem I have is all the form fields need a name, and went I submit the form I'm sending alot of junk. IE Url could be '?meat=3434?fruit=34495?salad=034943' you get the idea. But in the end all I'm looking to is pull the 'salad' value into the url without all the other byproducts. IE: '?salad=034943'
I've tried a few things, pulling all the inputs radios etc out of the form and placing them in a div. The making a form with just a hidden value so I can pull through Mootools (But that made conflicts because I'm using Mootools Form.Validator so then that fails) Then I tired to make two forms, One that would just be all show, then I would pull the value I want into the processing form. Which I thought would work but apparently it still will process both forms.
Any ideas/techniques of how to accomplish this would be greatly appreciated! (because I'm losing my mind)
Disable any form field you don't want sent and it won't show up in the URL.
In HTML it's:
<INPUT type="text" name="foo" DISABLED>
In javascript set document.forms[...].elements[....].disabled = true.
If you hide the field with CSS it will still be sent like normal.
the elegant way you do this is mount your GET url to submit by yourself..
this way you can send only what you want..
dont send any junk.. you can have problems in the future with a variable that you didnt know you were sending..
you can use this util function of jQuery
var params = { width:1680, height:1050 };
var str = jQuery.param(params);
// str is "width=1680&height=1050"

dojox.form.Rating Not Appearing in Post Data

I have a included a Dojo star rating widget (dojox.form.Rating) in a Dojo form but when submitted, it doesn't appear.
<div dojoType="dojox.form.Rating" numStars="5" id="field_3177" value="3"></div>
The documentation doesn't mention adding a name attribute, but even if I add one, it doesn't help.
<div dojoType="dojox.form.Rating" name="field_3177" numStars="5" id="field_3177" value="3"></div>
Examining the rendered HTML in Firebug, it seems the hidden input field has no name attribute - which would explain why it doesn't appear in the POSTed data.
<input type="hidden" dojoattachpoint="focusNode" value="3" id="field_3177" tabindex="0">
Is there something I should do before submitting?
You just need to add a name to the widget, i.e.
<div dojoType="dojox.form.Rating" numStars="5" id="field_3177" name="field_3177" value="3"></div>
This is nothing special to Dojo. All input elements must have a name in order to be submitted back to the server, see http://www.w3schools.com/tags/att_input_name.asp.
UPDATE:
Sorry, didn't see that you'd already tried adding a name param. I'd argue this is a bug in either the Form or (more likely) the rating widget. If you submit your form via XHR using dijit.form.Form.getValues() then you'll get the rating widget included - if you have a name. But if you use the native form submit then you don't.
I've created a test case at hhttp://telliott.net/dojoExamples/dojo-ratingInFormExample.html. You can get this to work for non-XHR form submission by quickly iterating through the values returned by getValues() and building the query string yourself. Not ideal. I suspect the template for the rating should be updated to put the name attribute onto the input node rather than the top level node.
Silly question:
have you added dojo.require("dojox.form.Rating"); to your code?
Hope it helps you.
//Daniel

Categories