We Keep Coding

Making jquery function to work across multiple forms. (Making Jquery DRY)

I've created a simple js function called from a button-onclick to do something straight forward, submit the data 'selected' and open a new tab. This was a single use case, worked fine for this one case. But NOW, as I'm scripting out more and more widgets within my feature, (tabs presenting different tools, within the same DOM). I'm finding way harder to keep the DRY.
I want to set up the forms to have same general inputs, get which form it is by the form id, serialize and let the controller deal with the rest. Knowing the form id will allow some exceptions to some forms, if needed. Each attempt has me banging my head on my desk.
Why are no forms being executed?
And if I get one form working, why isn't the other? [Similar code sample with '.change']
How do I get this ideal code to work across all the forms
OldCode:
JS
function doaction(){
alert("I work perfectly");
}
HTML
<form id='form_w'>
<input type='hidden' name="action" />
<input type='text' name="term"></input>
<input type='button' onclick="doaction()"/>
</form>
Ideal Code:
jQuery
//$('form.results').submit(function(e){ //DIDNT WORK
$('.rbutton').click(function(e){ // NOT WORKING EITHER
alert("This alert doesnt exist");
var form_id = e.target.id;
// gather data
// submit data via ajax
// update the dom by adding another tab/widget.
});
HTML
<form id='form_tab_id1' class="results">
<input type='hidden' name="A_action" />
<input type='text' name="term"></input>
<input type='button' class='rbutton'/>
</form>
<form id='form_tab_id2' class="results">
<input type='hidden' name="A_action" />
<input type='text' name="term"></input>
<input type='button' class='rbutton'/>
</form>
<form id='form_tab_id3' class="results">
<input type='hidden' name="B_action" />
<input type='text' name="term"></input>
<input type='button' class='rbutton'/>
</form>

Essentially, a user posted a solution. I am greatful he did. It pointed me in the right direction. [It was removed for whatever Reason that may be. But thanks George.]
His Solution was the following.
JQuery
$('.rbutton').click(function(){
var form = $(this).closest('form');
}
After juggling with so many variations, my code was drifting into an unstable code set. I honestly didn't know how to go about this; JQuery is prolly my sworn enemy. But knowing that the code George posted should be working, and wasn't, it kind of pointed me into other factors that I didn't consider. [I didn't take into consideration the code was being executed before the tabs with the '.rbutton' element were being populated.]
The Solution that helped me make this a more DRY principle was the following JQuery;
JQuery
$(document).on('click','.rbutton',function(){
var form = $(this).closest('form');
// Actions that are needed to be performed
}
Reason why this helps, or at least with my code, it binds this function to any element with the class '.rbutton' including new instances. As i mentioned above,these buttons were created after the jQuery was being executed; So nothing was being binded essentially. The following will do the binding to newly created elements, as if tho there was an active listener doing the additional binding over the document even after the code had been executed.

submitting a form with link

I have following form structure
<form action="{Basket-Addproduct}" method="post" id="items-form">
<button class="button-text button-gray-custom" type="submit" value="Submit" name="{dynamically generated name}"><span>Submit</span></button>
</form>
here "dynamically generated name" is the key field which tells which element or product to submit..
I want it to convert it into link,
I have tried following
Add This
Its getting submitted but not able to add the product...
Its expecting the name parameter also to be passed so it knows which product to add...
Stuck....:(
Any solution appreciated...

you should have <input type="submit".
There is no need to do JavaScript.
Just remove JS and then have as many <input type="submit" buttons as you want.
The GET/POST should have the key/value you look for.
E.g.
<input type="submit" name="item1" value="submit" />
when you click it, the recipient receives (sorry PHP used here):
$_GET['item1'] = submit
and other submits do not have value.

You can use jQuery to do this clean and easy.
So, here's your link:
<a id="form-submit-btn" href="#" name="{dynamically generated name}">Add This</a>
And your form:
<form action="{Basket-Addproduct}" method="post" id="items-form">
<!-- form contents -->
</form>
Now write a JavaScript which submits your form data on a button click:
$('#form-submit-btn').click(function(e) {
e.preventDefault();
var $form = $('#items-form');
$.post($form.attr('action'), $form.serialize(), function(data){
// do something with the data
});
});

Your code should work, I have created an example for you to test, here it is: http://jsfiddle.net/afzaal_ahmad_zeeshan/yFWzE/
<form id="form">
<input type="text" name="something" id="something" />
</form>
Submit
By using this you will submit the form using the id of it. And other user told you to use jQuery, which I am afraid you don't want to. In jQuery you use .preventDefault but if you want to stick to the simple JS then you will be using href="#" which will automatically prevent any anchor tag execution.
And the result of the request can be checked, which sadly is an error. But it makes sure that the request has been sent to the server.
Then you can test the methods and other type of executions by having some if else blocks as
if(condition == true) {
// if post
} else {
// if get
}
The parameter might be mis handled on the server side, because when the form is submitted you need to take out the data from the QueryString (the request is GET). So, you need to check that, or if that's not the issue then make sure you're pointing the element well. Otherwise if there is no such element, nothing will be sent.
I am not sure, which language you're using but here is the code for ASP.NET
var value = Request.QueryString["something"];
PHP version is already present above. That all depends on the parameters you send with the request. You are more likely to convert the code to a function. Such as
Submit
And the function
function submit() {
// create variable
var value = document.getElementById("something").value;\
// now submit the form and all that other bla bla, which
// you want to be process,
}
If you find this one tricky, using jQuery as
var values = $('form').serialize();
will be easy. This will create a string of the form and will send it with the request.

Javascript - concatenate field value to onclick button link?

I have an issue I need to fix on an existing app that I didn't initially write. Here is a snippet of code that doesn't do what it is intended to do. What it is supposed to do is take the value of the field and upon clicking "Search", append that to the redirection to pass in the querystring to the destination page:
<form name="frm_someform">
<input type="text" name="f_date" id="f_date"/>
<input type="button" value="Search" onclick="parent.location='runreport.asp?date=' + document.frm_someform.elements['f_date'].value); + '"/>
</form>
Now, as you javascript folks can plainly see, the concatenation doesn't work. I've searched high and low for how to properly concatenate, but something isn't translating correctly (in my head). Note that if I take out the concatenation, the redirection works fine, so there is something with that causing the issue. Yes, of course in the example above, I could simply make the form submit the proper value with a real 'submit' button, but I have whittled the code down here for simplicity - it is much more complex than the example I have above.
(*Note, I successfully tested concatenation through other javascript functions, but the possibility exists that the purely inline code must be different)
Thanks in advance,
Beems

Please, try this:
<form name="frm_someform">
<input type="text" name="f_date" id="f_date"/>
<input type="button" value="Search" onclick="parent.location='runreport.asp?date='+ document.getElementById('f_date').value"/>
</form>

Passing forms between html pages

I've got an assignment to pass data between 2 .htm pages, in a manner which the source gets copied to the destination.
sourcePage.htm contains a form. (it contains more controls this is just a sample)
<form id="myform" action="destPage.htm" method="get" >
<input type="text" name="user" />
<input type="submit" name="submit" value="Submit" />
</form>
and destPage.htm is blank.
Using JavaScript I am required to parse the data from the url, that part isn't the problem
, the problem is that I am also required that destPage would be an exact duplicate of sourcePage.
My question is, if there's a way to pass the form as an object or some way to pass the control types and their properties along side the data.

You specified in the answer of ek_ny, that you want to dynamically build the form, based on it's input.
You can do this, in fact, with the JavaScript DOM:
var i = document.createElement('input');
i.setAttribute('type', "text");
i.setAttribute('name', "user");
var f = document.createElement('form');
f.setAttribute('action', "destpage.html");
// etc.
f.appendChild(i);
document.getElementById('container').appendChild(f);
The form will be added as a child in the <div id="container"> container.
Now you can use hidden input elements, which give, for instance, the specifics of the form:
<form>
<input type="hidden" name="x_type" value="input-text" />
<input name="x" type="text" />
<input type="hidden" name="y_type" value="select:[...]" />
<select name="y">
...
</select>
</form>

As far as I know, you won't be able to do a post between two pages. At least when I've attempted that you get an error-- it really doesn't make sense to have a post from one static page to the other (right?). What you can do is serialize the data you want to pass, put it on the url string to the next page and then deserialize that data and populate the controls on the destination page. If the html between the two pages is identical, then it should be pretty straightforward, if not it will be a little tricker. If you used jQuery it would be pretty easy, because you could serialize an entire form. If you need to come up with a generic solution (and you should, because it will help you learn) that's one thing, if you need to just get it working for this assignment and there are only a couple of form fields, you'll just need to encode the values you want to pass and pass them on a URL string with a get request.

Form not submitting with JS

I have the worlds most simple javascript function:
fnSubmit()
{
window.print();
document.formname.submit();
}
Which is called by:
<button type="button" id="submit" onclick="fnSubmit()">Submit</button>
All is well and good, the print dialog shows up, however after printing or canceling the print I get the following error:
"document.formname.submit is not a function"
My form is defined as follows: (obviously I am not using formname in the actual code but you get the idea)
<form name="formname" id="formname" method="post" action="<?=$_SERVER['SCRIPT_NAME']?>">
Obviously I am not trying to do anything special here and I have used similar approaches in the past, what in the world am I missing here?

In short: change the id of your submit button to something different than "submit". Also, don't set the name to this value either.
Now, some deeper insight. The general case is that document.formname.submit is a method that, when called, will submit the form. However, in your example, document.formname.submit is not a method anymore, but the DOM node representing the button.
This happens because elements of a form are available as attributes of its DOM node, via their name and id attributes. This wording is a bit confusing, so here comes an example:
<form name="example" id="example" action="/">
<input type="text" name="exampleField" />
<button type="button" name="submit" onclick="document.example.submit(); return false;">Submit</button>
</form>
On this example, document.forms.example.exampleField is a DOM node representing the field with name "exampleField". You can use JS to access its properties such as its value: document.forms.example.exampleField.value.
However, on this example there is an element of the form called "submit", and this is the submit button, which can be accessed with document.forms.example.submit. This overwrites the previous value, which was the function that allows you to submit the form.
EDIT:
If renaming the field isn't good for you, there is another solution. Shortly before writing this, I left the question on the site and got a response in the form of a neat JavaScript hack:
function hack() {
var form = document.createElement("form");
var myForm = document.example;
form.submit.apply(myForm);
}
See How to reliably submit an HTML form with JavaScript? for complete details

Given that your form has both an id and a name defined, you could use either one of these:
With the form tag's id:
document.getElementById('formname').submit();
With the form tag's name attribute:
document.forms['formname'].submit();

Try this:
fnSubmit()
{
window.print();
document.getElementById("formname").submit();
}

The most likely culprit is IE confusing JavaScript variables, ids, and names. Search in your source for something sharing the name of your form.

Place a input button inside your form.
Give tabindex="-1" on it.
Make It invisible using style="display:none;".
Like This
<input type="submit" tabindex="-1" style="display:none;" />