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.

How to make an alert when a form item is not answered?

I'm very new to JS. But basically, I'm creating a form. Using JavaScript, how do I take a form so that you must fill in form data?
Thanks!
HTML:
<form>
<p>First Name:</p>
<input type="text" name="firstname" class="form">
<p>Last Name:</p>
<input type="text" name="lastname" class="form">
<p>Email:</p>
<input type="text" name="email" class="form">
<p>Questions / Concerns:</p>
<textarea name="concerns" rows="5" cols="30"></textarea>
<br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</form>

There are multiple ways of solving this particular problem.
The easiest way would be to use the required tag in elements:
<input type="text" name="firstname" class="form" required>
Edit: This may not work in very old browsers.But I don't believe you need to worry about that now.
Use required tag in all of your input elements which you need filling compulsorily.
Once you have your basic problem solved, look at using javascript functions for validation. Ref: https://www.w3schools.com/js/js_validation.asp
Once you know this, you can safely progress to reading on how validation is done on large projects- https://validatejs.org/

use document.getElementByTagName to get the input tag
Use addEventListner with first parameter as blur to detect input leave
Use this.value within if statement to check if empty
Alert something
var element=document.getElementByTagName(input);
element.addEventListner("blur",myFunction);
function myFunction(){
if(this.value==''){
alert ("write something");
}
}

On registration form , form fields are not getting saved in browser auto fill on submit .(ReactJs)

I have one registration form in my site in which I am saving fields and after saving the form when user again come back to that registration form I want previous field values to be saved in browser auto-fill.
below is my code snippet -
<form class="clearfix">
<input autocomplete="given-name" name="firstName" type="text" placeholder="Enter First Name" class="form-control" value="">
<input autocomplete="family-name" name="lastName" type="text" placeholder="Enter Last Name" class="form-control" value="">
<input autocomplete="email" name="email" type="text" placeholder="Enter Email" class="form-control" value="">
<input autocomplete="tel" name="phoneNumber" type="text" placeholder="Enter Number" class="form-control contactMask" value="">
<input autocomplete="address-line1" name="addressLine1" type="text" placeholder="Street 1" class="form-control">
<input autocomplete="address-line2" name="addressLine2" type="text" placeholder="Street 2" class="form-control" value="">
<a href="javascript:void(0);" className="btn baseBtn primeBtn" onClick={this.signupUser}>Sign Up</a>
</form>
In this code onClick of anchor tag I am doing ajax call via signup user function.
and after that i want that users data to be auto filled in browsers autofill address in chrome.
I have tried below ways : -
1.Few people suggested to use form "submit" button functionality to save data in autofill rather than having ajax call form anchor tag onClick event.
but that is also not working in my case.
2.I have gone through few post in which they told to use proper name and autocomplete attribute for field. but by using that browser can only guess proper field values .

I am answering my own question.
Actually,I just ignored that I am not directly submitting my form.
On backend we are using grails and using it just for REST API's.
on frontEnd we have react.js but request and response are getting served from Nginx .
So form is not getting submitted to grails that's why on form submit data was not getting saved in browser autofill.

IE, Edge replaces storage text with 'null'

So I have this little contact form on my site, and it's suppose to input some text into an empty p tag telling the client that's it's been submitted. It works fine, it does what it should, but in IE/Edge it ignores everything and inputs the word null into the p tags.
You'll have to forgive me, I'm still new to javascript, but I couldn't find anything anywhere to address this bug. Any help would be greatly appreciated.
<form id="contact-form" method="post" action="#" onsubmit="return setReturn()">
<input type="hidden" value="someone#email.com" name="emailTo">
<fieldset>
<p id="thanks"></p>
<legend>Send me a message</legend>
<div class="contact-info">
<input placeholder="Name*" type="text" name="name" required>
<input placeholder="Email*" type="Email" name="email" required>
</div>
<textarea placeholder="Message*" name="message" required></textarea>
<input type="submit" value="Submit" name="submitContact" class="button">
</fieldset>
</form>
<script>
function setReturn(){
localStorage.setItem("thanks", "Your request was sent successfully!");
}
document.getElementById("thanks").innerHTML = localStorage.getItem("thanks");
localStorage.clear();
</script>

Your issue is that when the innerHTML of the "thanks" element is set, the string in localStorage is unset.
Then when the form is submitted, the localStorage item is set, but the "thanks" element's innerHTML isn't set (it was set to undefined before).
In order to make sure the "thanks" element is updated when the form is submitted, you need to include the lines that set it in the function that fires when the form is submitted.
function setReturn(){
localStorage.setItem("thanks", "Your request was sent successfully!");
document.getElementById("thanks").innerHTML = localStorage.getItem("thanks");
localStorage.clear();
}

On form submit you are calling setReturn function , but when this snippet document.getElementById("thanks").innerHTML = localStorage.getItem("thanks"); is parsed localStorage does not have this key. So you have to first set this local storage before use it's value as innerHTML like in the previous answer.
Also it is odd that you are using localStorge and even you are clearing it, when this thing can be acheived by this snippet
HTML
<form id="contact-form" method="post" action="#" onsubmit="return setReturn()">
<input type="hidden" value="someone#email.com" name="emailTo">
<fieldset>
<p id="thanks"></p>
<legend>Send me a message</legend>
<div class="contact-info">
<input placeholder="Name*" type="text" name="name" required>
<input placeholder="Email*" type="Email" name="email" required>
</div>
<textarea placeholder="Message*" name="message" required></textarea>
<input type="submit" value="Submit" name="submitContact" class="button">
</fieldset>
</form>
JS
function setReturn(){
event.preventDefault()
document.getElementById("thanks").innerHTML = "Your request was sent successfully!";
}
NOTE: I used event.preventDefault just for demo but in real application you dont need to use it as it will prevent default behaviour or the submit button.
Here is a WORKING COPY
Also you can use an IIF to set up this localStorage.This function will be executed as soon as it parsed and will set up the key thanks to it.
(function(){
localStorage.setItem("thanks", "Your request was sent successfully!");
}())
Then onsubmit you can use your function without making any change
function setReturn(){
event.preventDefault();
document.getElementById("thanks").innerHTML = localStorage.getItem("thanks");
localStorage.clear();
}
WORKING COPY WITH IIF
Hope this is helpful

Redirecting after form submission in Javascript

I hope someone can assist with this. I dont have access to the website backend, so I cant change the js script uploaded there. What I am trying to achieve is make a simple form to submit an issue report and then display a "Thank you" popup and redirect back to main page of the account on our page.
So I can make a form no problem. I copied one of the functioning forms by going to Edit link and clicking on Show Source in Page Body. But I can't stop the default behavior of it going to another page after Submit button is pressed. I suspect it is in js script on the back end. I'll copy code below.
<center>
<b>App Issues Report Form</b>
<br>
</center>
<form action="/Modules/SendForm" method="post" class="form" id="NewForm">
<input name="formFields" value="CONTACTID,AgentName,Notes" type="hidden">
<input name="formLabels" value="Contact ID:,Agent Name:,Notes:" type="hidden">
<input name="fromAddress" value="no-reply#callcenter.com" type="hidden">
<input name="toAddress" value="name#CallCenter.com" type="hidden">
<input name="subject" value="A new message about app" type="hidden">
<input name="emailMsg" value="The following data has been collected:" type="hidden">
<input name="CONTACTID" value="##CONTACTID##" type="hidden">
<input name="companyId" value="##COMPANY_ID##" type="hidden">
<div class="clearfix">
<label>Agent Name:</label>
<div class="input"><input id="AgentName" name="AgentName"
class="validate[required] xlarge" value="##LOGGEDIN_AGENT_FIRST_NAME##
##LOGGEDIN_AGENT_LAST_NAME##" type="text">
</div>
</div>
<div class="clearfix">
<label>Notes:</label>
<div class="input"><textarea id="Notes" name="Notes"
class="validate[required] xxlarge"></textarea>
</div>
</div>
<div class="clearfix grey-highlight">
<div class="input no-label">
<input class="button blue" value="Submit" type="submit">
<input class="button grey" value="Reset" type="reset">
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("NewForm").click(function( event ) {
alert( "Thank you for your feedback" );
event.preventDefault();
});
});
</script>
It used to have only this at the end when I copied the code:
<script type="text/javascript">
$(document).ready(function () {
new setupAjaxForm('NewForm'); });
</script>
I tried searching and suggestions here didnt seem to work:
How to redirect user to another page after Ajax form submission
How to redirect user to another page after Ajax form submission?
http://learn.jquery.com/about-jquery/how-jquery-works/

The first thing you have to look at is action="/Modules/SendForm" - this is what does the redirection. If you don't want to redirect, set this to the name of the page you have the form. Obviously there is a whole lot more to forms and redirection (and some other js code might influence this too, nonetheless we don't see what the function setupAjaxForm is supposed to do here), but this is really the first thing to check / get right.
EDIT: I think I understand it more now: basically if you don't have access to the /Modules/SendForm page (where most probably, among others, like form validation, the redirection also happens, then you can't do much to change the redirection.