Develop Reference

Multiple form filter GET paramaters

I have 2 forms GET to filter data, when I submit the first form I have this url
test.com?form1_filter['year']=2022
It works, but now if I want to submit the other form I would like to have
test.com?form2_filter['users']&form1_filter['year']=2022
The problem is when I submit a form, the parameters of the second form were remove
How can I keep all parameters in url ?
I tried in javascript with the event submit when it still remove my parameters.
<form id="form1" method="get">
<div>
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required>
</div>
<div>
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required>
</div>
<div>
<input type="submit" value="Filter">
</div>
</form>
<form id="form2" method="get">
<select name="users" id="user-select">
<option value="1">Dad</option>
<option value="2">Mom</option>
</select>
<div>
<input type="submit" value="Filter">
</div>
</form>
It's 2 form on the same page

The form needs to have inputs for all the data you want to appear in the query string.
If you want to copy existing values without displaying a UI control for them, add them as hidden inputs.
<input type="hidden" name="form1_filter['year']" value="2022">

When you have two form on page that was loaded with URL query string, the newly sent form replaces all the parameters.
The solution is simple: Add hidden fields to the form dynamically (using server-side code) that will add the parameters back to the url.
<input type=hidden name=field-name value=field-value>
You can also do it using JS (not recommended).
Probably better solution is to redirect all requests to other URL that does not use the query string parameters. When query string is added to this URL, also redirect it (to URL that combines both). Example:
/foo?field1=bar
→ /foo/field1=bar
/foo/field1=bar?field2=baz
→ /foo/field1=bar,field2=baz
The only downside of this approach is that it is more complex on the server side.

Javascript not finding first form

I am struggling with a javascript/jquery issue. I have multiple forms that are created within a foreach loop and multiple javascript functions that are created in a foreach loop.
Essentially, the first form looks like this:
<form role="form" action="/save/parishioner" id="1" name="1" method="post">
<input type="text" class="form-control" name="acct_number" id="acct_number" value="test" onchange="save1()" />
<input type="text" class="form-control" name="first_name" id="first_name" value="name" onchange="save1()"/>
</form>
The second form looks like this:
<form role="form" action="/save/parishioner" id="2" name="2" method="post">
<input type="text" class="form-control" name="acct_number" id="acct_number" value="test" onchange="save2()" />
<input type="text" class="form-control" name="first_name" id="first_name" value="name" onchange="save2()"/>
</form>
And the functions looks like this:
alert($('form[name="2"]').serialize());
alert($('form[name="3"]').serialize());
When I try to serialize the data and alert it, the first alert returns blank and the second alert shows the second form serialized.
Why is it not finding the first form?
I would greatly appreciate any help!

From the code you have posted (unless this is a mistake in your post) you are actually getting a serialized alert from the first call not the second. Your selectors in the alert are wrong
alert($('form[name="2"]').serialize());
alert($('form[name="3"]').serialize());
so the values you are placing in name param of the form and then in the selector in your alert do not match. They should be:
alert($('form[name="1"]').serialize());
alert($('form[name="2"]').serialize());

Javascript: change element value by input textbox

I want to change THISVALUE using a textbox and submit button, which then refreshes the data on the page:
<form id="newssearch" action="#">
<input type="text" size="30" maxlength="155" name="search" id="search" />
<input type="button" name="submit" value="Search" onclick="showElements();" />
</form>
<div class="sm" data-type="static" data-symbol="THISVALUE" data-size="medium" data-logscale="on" data-chart-type="ca" data-timeframe="1y"></div>
<div class="sm" data-type="news" data-symbol="THISVALUE"></div>
Also: you press the button and it refreshes the page with the new data-symbol value. That value stays for the next visit to the page or until another search is performed.
Perhaps it would be better to do this in php?

You can also use the setAttribute() function
function showElements(){
document.getElementsByClassName('blah')[0].setAttribute("data-symbol",document.getElementById('search').value);
}

First off - data-symbol is not an element. It is an attribute and to be more specific - a data attribute.
Learn more about data attributes here: Using data attributes | MDN
I assume you want the data submitted in the form to get into the data-symbol attribute.
Checkout the working code snippet below:
function showElements(){
// just copy over the search text into the data attribute
document.getElementsByClassName('blah')[0].dataset.symbol = document.getElementById('search').value;
}
<div class="blah" data-type="cur" data-symbol="THISVALUE"></div>
<form id="newssearch" action="#">
<input type="text" size="30" maxlength="155" name="search" id="search" />
<input type="button" name="submit" value="Search" onclick="showElements();" /> <!-- no need to pass any arguments to this function, we can get data using element ID -->
</form>
Check the result using Developer Tools (I have used Chrome here):

Multiple form with same form-name. But I want to send that form value that is being selected

In my website, I am retrieving multiple previously saved addresses from the database and showing them on my website. Now, the user can select any one of them and the data of the address selected will be send to the next page to be inserted into the database.
http://tinypic.com/r/2lj70i9/5
My jsp code to fetch address:
<a href="javascript:next()">
<div class="address1">
<form name="form2" method="post">
<input name="name" type="text" readonly="readonly" value="<% out.print(x1); %>" style="font-weight: bold;" />
<input name="address" type="text" readonly="readonly" value="<% out.print(x2);%>"/>
<input name="city" type="text" readonly="readonly" value="<% out.print(rs1.getString("city"));%>"/>
<input name="state" type="text" readonly="readonly" value="<% out.print(rs1.getString("state"));%>"/>
<input name="pin" type="text" readonly="readonly" value="<% out.print(rs1.getString("pin"));%>"/>
<input name="phone" type="text" readonly="readonly" value="<% out.print(rs1.getString("mob"));%>"/>
</form>
<div class="selectLine">Click to Select</div>
</div>
</a>
and my Javascript is:
function next()
{
var f=document.forms["form2"];
f.method="post";
f.action='checkout3.jsp';
f.submit();
}
but the problem is whatever I'm selecting only the top address is being fetched to the next page.

Currently your anchor elements all call your next() function without passing any information about which item was selected. You could change that by using onclick='next(this)' so that your function gets a reference to the clicked anchor, but it's generally best not to include JS directly inside your html - especially if you're using a library like jQuery which makes it really easy to set up event handlers. (I assume you are either using jQuery already or are open to it given you added the jQuery tag to your question.)
I'd suggesting changing your anchor from:
<a href="javascript:next()">
...to something like:
<a class="selectAddress">
And then instead of your next() function you can use a jQuery-based click handler as follows:
$(document).ready(function() {
$("a.selectAddress").click(function() {
$(this).find("form")
.prop("action", "checkout3.jsp")
.submit();
});
});
That is, bind a click handler to all anchors with that class. Within the handler, this will be the particular anchor clicked, so you can use the .find() method to select the form that is a descendant of the anchor, then set its action property, then submit it. Note that your form has method="post" in its html, so there's no need to set this again like you do in your next() function.

jquery .load not applying ready function

On document ready I run this code:
jQuery(document).ready(function(){
jQuery('#button').click(function() {
jQuery('#contact_form').load("/Users/mge/Downloads/jquery-ajax-1/readme.txt");
return false;
});
});
Then if I create a form like
<div id="contact_form">
<form name="contact" method="post" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label for="email" id="email_label">Return Email</label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
<label for="phone" id="phone_label">Return Phone</label>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
<br />
<input type="submit" name="submit" class="button" id="button" value="Send" />
</fieldset>
</form>
</div>
Everything works fine. However, if I mimic the behavior I want in the actual app (the form is loaded dynamically after document.ready has already been executed. The jquery #button action does not get called and the form acts as if there is no javascript and just runs a post.
jQuery('#contact_form').load("/dynamicform.php");
Is there something that has to be done to .load() in order for the ready function to be applied to it?

Use .live() like this:
jQuery(document).ready(function(){
jQuery('#button').live('click', function() {
jQuery('#contact_form').load("/Users/mge/Downloads/jquery-ajax-1/readme.txt");
return false;
});
});
Your element isn't there when you're adding the handler. You need to listen for the click in all cases...this is what .live() is for, is listens up at the DOM root for the click, whereas .click() isn't getting attached to anything because there are no elements that match the selector when you're calling it. live() listens for clicks on matching elements later.

The .ready event is called when the DOM is ready to be used, and therefore it won't be called when you dynamically load and insert something into an already existing DOM.
Also I believe that it is common practice to have a custom form submit work by attaching an event handler to the form, not the submit button. As it will also handle cases where the user submits the form in another way than clicking on the submit button. Example:
jQuery("#contact_form form").submit(function (event) {
event.preventDefault();
// Do your stuff...
})
(event.preventDefault(): http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29)

ready() is not applied after load(). Look in the doc for load(), you can probably specify a callback to be executed when the loading is done, in which you'll be able to reassign the click handler.