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.
Related
I'm building two forms which will live on a single page on a Kentico website. kentico websites are wrapped in one single form field so I can't create individual form elements for each form on the page. The problem is parsleyJS will only allow you to pass a form to initialise it e.g. $("#form").parsley(); and I need to validate the forms independent of each other. Has anyone had this issue before? Can anyone recommend a workaround.
$("#form").parsley();
input{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.1/parsley.min.js"></script>
<form action="" id="form">
<div class="form1">
<label for="fname">First Name</label>
<input type="text" name="fname" required>
<label for="lname">Last Name</label>
<input type="text" name="lname" required>
<input type="submit" value="submit">
</div>
<div class="form2">
<input type="text" name="anotherInput" required>
<input type="submit" value="submit">
</div>
</form>
You may be able to get the results you want using the group option to validate only part of the fields in your form. This is used in this example of a multi step form.
Initialize the forms independent of one another by using the class selector.
$(".form1").parsley();
$(".form2").parsley();
I have a form which generates a email using Google Apps Mail, and all I want really its to do is to not go to the different page after pressing Submit, although I want it to still generate the email.
Any ideas what is the best way to do it? I learn jQuery now, so solutions in it are more than welcome.
<form class="flex-form" id="gform" method="POST" action="https://script.google.com/macros/..../exec" onsubmit="return confirm('Do you really want to submit the form?');">
<input id="formName" type="text" placeholder="Full Name" name="name" value="" required autocomplete="off">
<br>
<input id="formNumber" type="tel" pattern="[0-9]*" placeholder="(0034) 606248059" name="phone-number" required autocomplete="off">
<br>
<input id="formGeo" type="text" placeholder="Tap to share location" name="coordinates" required autocomplete="off">
<br>
<input type="submit" name="submit" value="Send Us Request">
</form>
Thanks.
You can intercept the form's "submit" event with Javascript.
$('gform').on('submit', function(event){
event.preventDefault();
if ( ! confirm('Do you really want to submit the form?'))
return false;
// ....
});
That will catch the "submit" event and prevent the event's default action, which would be to POST the form to the URL given in the action attribute. Remove the onsubmit attribute from the form, better handle it all in one place.
Next, you need to send the data yourself. Easiest way is to use either jQuery's $.post() or $.ajax() functions, together with $('gform').serialize() to transform the form's data fields into a string, ready to be POSTed.
I create a two forms here http://jsfiddle.net/B9r22/8/ and when you submit them, they convert to JSON, and the problem is when you submit the first form and then the second form, there are both data from form in JSON, how can I reset forms or seperate them?
<form name="first" id="1" action="" method="post">
Which city is in Great Britain?<br/>
London:<input type="radio" name="first" data-questionid="1" value="11"/><br/>
New York:<input type="radio" name="first" data-questionid="1" value="12"/><br/>
<p><input type="submit" /></p>
</form>
<form name="second" id="2" action="" method="post">
Which city is in USA?<br/>
Washington:<input type="radio" name="second" data-questionid="2" value="13"/><br/>
Tokio:<input type="radio" name="second" data-questionid="2" value="14"/>
<p><input type="submit" /></p>
</form>
Use the form as scope when you get the radio buttons:
$('input[type="radio"]:checked', this)
Demo: http://jsfiddle.net/B9r22/11/
You can use a form reset, this will set inputs to their default values, but ignores some fields like type=hidden
$('#1')[0].reset();
As far as I can see, the problem lies in line 6. Your script collects data from all input fields in the whole DOM (document) with a type of radio. Instead, give the selector the context of the currently submitting form to only match those particular fields (using $(this).find where $(this) refers to the submitted form):
Change line 6 to $(this).find('input[type="radio"]:checked').each(function(){
http://jsfiddle.net/B9r22/12/
You need to limit the
$('input[type="radio"]:checked')
to the submitted form:
$('form').submit(function() {
var form = $(this);
//....
$('input[type="radio"]:checked', form).each(function(){
//...
http://jsfiddle.net/B9r22/9/
you should use $(this)
$(this).find('input[type="radio"]:checked').each(function(){
http://jsfiddle.net/B9r22/10/
Ive got a html form with a few select lists and a text box in it. I also have a submit button which is outside of the form. The reason for this is I want to construct the parameters myself, as I dont want the content of all of the select lists. The problem I am having is, that when I press my submit button,The form automaticly trys to redirect to the same page, but with a ? at the end with all the contents of the form. I am also having problems where window.location.href is not working inside the submit() javascript method, but I am not sure if this is caused by the form issue or not. Example code:
<form>
<input name="cName" type="text" class="input-xlarge" id="input01" placeholder=
"Enter title" />
<div class="control-group">
<hr />
<label class="control-label" for="select01">Select box 1</label>
<div class="controls">
<select id="select01" name="type" onChange="reportModification(this.value)">
<option>One</option>
</select>
</div>
</div>
</form>
<button class="btn btn-primary" onClick="next()">Next</button>
This is not the exact code from the page, just a replica.So it might not be valid html in some places. Thanks for the help :)
The reason you get parameters in the url is that a get request is used instead of a post request. you should use:
<form method="POST" action="">
Also why is your button outside the form? you could have this instead:
</div>
<input class="btn btn-primary" type="submit" value="Next" onClick="next()" />
</form>
I think your button has to be inside the form element. You could use an onsubmit in the form element to intercept the form before it gets sent to the server. Here you could manipulate the values before they go. You would also need an action attribute in the form. If your function returns true, the data will be submitted, false and it won't.
I have a simple form. On submit (the submit action is a google docs form submission), it takes to a new page with focus on that page. I want to keep the focus on the current page.
What are my options?
This is the code (also present here )
<html><body>
<form action="https://docs.google.com/a/rangde.org/spreadsheet/formResponse?formkey=dFlSZkt0TzZTWHJyblBiQlNrcmZvZGc6MQ" method="POST" id="ss-form" target="_blank" onsubmit="submitted=true;">
<br>
<input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0" placeholder="Your Name">
<br>
<input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1" placeholder="E-mail Address">
<br>
<input type="text" name="entry.2.single" value="" class="ss-q-short" id="entry_2" placeholder="Pledge Amount">
<br>
<input type="submit" name="submit" value="Submit"></form>
</body>
</html>
Depending on what you're trying to do with the resulting form, (and if you're not comfortable relying js do all the lifting) you could also create a hidden iframe on the page, give it a name, and set the form target to the name of the iframe. This is only if you have no interest in having the user ever see the google page itself.
Try AjaxForm, as found at http://jquery.malsup.com/form/, if you're using jQuery
A form's action parameter will always take you to that page.
Here is an example:
POST without Form Method (PHP)