Form Validation event issue - javascript

So I'm trying to write an interactive form, where clicking a radio button will unhide another field in the form. It is for display purpose, so I'm not submitting anything. I'm attempting to use Javascript to validate, but needless to say, it's not working very well. A run through of my code would be appreciated.
Since it's so much code, I'll pastie it to you for convenience...
http://pastie.org/3615669
Thanks :)

Your code:
function getShrimpa(radio, name, ext){
//Use of form 'shrimpa'.
var form = document.shrimpa;
document.form.name.style.display = 'block'; // <---- this is not valid
document.getElementById('shrimpa').innerHTML = ext;
}
You cannot use the variable name like that. It's a string and it will not get "replaced" or whatever you were hoping would happen. You'll need to use document.getElementsByName(name) to select that element. But that will give you a node list so you probably want to use ids instead there.

Related

Two ways to process jQuery submitted form

I have a form with button A and button B. It's sent by a jQuery function called clicking on one of the buttons. At the end of this long function which is checking prerequisites, the form is sent using this line:
$('#wlform').submit();
I want to adjust this code to send something to be able to distinguish which button was pressed. Something in JavaScript similar to <input type="submit" name="submitbutton1"/>
Provide us with some code?
I think you're talking about two buttons that both should have their own ID's. You could try and catch the ID attributes after you click them;
$(this).attr('id');
Or change 'id' into 'name' if you want to get that value.
I suppose you use a javascrit click event to execute your javascript functions.
In javascript, you can add a hidden input to your form :
$(...).click(function() {
... // Your code
var clicked_button = $(this);
$('#wlform').append($('<input type="hidden" name="clicked-button"/>').val(clicked_button.attr('id'));
$('#wlform').submit();
});
With that, the id of the clicked_button will be sent with the form.
Just give to the hidden input the value of the button id attribute. You could do something similar to this (before the submit statement):
$('input[type=hidden]').val($(this).attr('id'));
Where $(this) is the button clicked.
None of the answers worked, so I've put something together from these on my own. I've added a hidden input field, clicked-button as you suggested. Then when calling my precheck_submit function, I pass another parameter (c) for storing which has been clicked. In the precheck_submit function I added $('#clicked-button').val(c);. It works. Anyways, thanks for your efforts.

Jquery validation engine ajax, two fields same function?

The jQuery validation engine plugin has the ability to do ajax validation; which works gret except for one small catch...
It sends off the field ID instead of the field name to be validated.
Why is this an issue?
I have a simple item that to create it only requires one textbox to be filled out; so we have this as a modal on every page for managing said item.
We use the jQuery validation engine plugin to validate that the entered value is unique.
Now this also means that the modal shows up on the edit page. Which obviously has the title in a field as well for you to edit.
And we want this field to be validated as well but because the validation engine sends across the field ID instead of the field name we must give the two fields different ID's
e.g. createtitle and edittitle and then on the backend have
if($fieldId == 'createtitle' || $fieldId == 'edittitle'){$fieldId = $fieldId}
Which really is an ugly approach; is there any way to get it to use the name; or another attribute instead?
Maybe this plugin could help you. It uses class names of your element to validate.

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"

Javascript form input field selection and AJAX

I think I want to do something simple, but I'm not sure how to execute it. I have been trying for hours now, with little luck.
function myFunc (form) {
// determine currently selected field on form - Thank you James!
var currElem = document.activeElement;
myAJAX_request(); // This will regenerate the form (no field selected)
// restore currently selected field on form
currElem.focus(); // This does NOT work -- WHY?
currElem.select();
}
I'm looking for a clean implementation that will use "document.forms..." to find the input fields, instead of having to put an id tag on every single form element. Is this possible?
You can use framework such as jQuery. jQuery has .serialize() method that should do exactly what you need. Here it is
You could use document.getElementByName. I do assume you have names for your fields atleast, don't you ? Store them in a variable/cookie and retrieve it back after your myAjax_request().
and to make your life easier in future,
You could use other selectors of jquery, like name, class, etc.
Read about jQuery's selectors here.

Simulate button click in a Webpage

i'm trying to code an application for Android that fills up a form in a webpage,submits it and parse results to show them. I'm using javascript to fill up the fields and then call the form's action, but it doesn´t work. I have studied the web html code, but i believe it uses JSF to display and handle the form. Is there any way to simulate the submit button click just as if i press it physically? In case anyone want to take a peak in the code, web url is http://www.transportedecantabria.es. The fact is i'm not a big expert in web programming and i'm a bit lost :).Thx and sorry about my english
EDIT: I've also tried this:
javascript:var elementToGet = "frmBusqueda:j_id29";
var form = document.forms["frmBusqueda"];
var button = form.elements[elementToGet];
button.click();
But it keeps reloading the web, not giving me the submit result
You should be able to call the click() method on the button object to fire it, though it would probably be better to call the submit() method on the form object.
This code made the trick:
javascript:var elementToGet = "frmBusqueda:j_id29";
var form = document.forms["frmBusqueda"];
var button = form.elements[elementToGet];
button.click();
Thx all for your help
You can use
document.forms
to retrieve the form elements within the current document.
If you want to submit the first form:
var firstForm = document.forms[0];
firstForm.submit();

Categories