I have a form that originally I decided to wrap using a div:
<div class="formWrap">
<input class="desc" name="newdescription[]" value="" />
</div>
And I add some fields dynamically:
newDesc = $('.desc:first').clone();
$(newDesc).appendTo('.formWrap');
Up to here, everything was working like a charm, but later I changed my mind and decided to make it a form as I won't be using AJAX anymore but instead I'll have the form submit to a next page.
<form class="formWrap" type="post" action="nextpage.php">
<!-- Some inputs -->
</form >
As soon as I changed the div into a form, I couldn't append anymore, if I put it back to a div it works.
A solution that I found was leaving the div and wrap everything into a form. But even if it is a solution I am still curious as for why I can't get it to work directly with a form.
<form type="post" action="nextpage.php">
<div class="formWrap">
<!-- Some inputs -->
</div>
</form >
I've been reading and I don't find any restrictions as to not being able to append to a form, so I am a bit lost now. Any Ideas?
If anybody gets the same error, this might help.
It took a while to find the answer, but I found the error. I realized that the form was inside a form, obviously a huge error!
I guess Jquery prevents from appending into a form that is inside another form.
<form>
.
.
.
<form class="formWrap" type="post" action="nextpage.php">
<!-- Some inputs -->
</form >
.
.
.
</form >
If you can't append into a form, most probably it is a child of another form.
Here is a fiddle showing how it doesn't work:
https://jsfiddle.net/uaeh1kjr/1/
And as #Eddie mentioned in his comment, this one works, with only one form: https://jsfiddle.net/uaeh1kjr/
Related
In a Flask app, I have a form with several fields. There are two submit buttons, one of which is intended to submit only information from fields one and two (even if the other fields contain text).
I reluctantly have decided to try to do this in jQuery, something I don't have much experience in. After considered using the $.post method, I settled on using $.reset.
Here's some of my code:
(home.html)
<HEAD>
<script src="/static/scripts/jquery-3.2.1.js">
</script>
<script src="/static/scripts/reset.js">
</script>
<TITLE>My UI</TITLE>
</HEAD>
(separate html file inheriting from home.html)
<form action="/" method="post">
<dl>
foo
{{ form.foo }}
bar
{{ form.bar }}
<form action="/" method="post"><p><input type=submit class="reset" value="Get Information">
Status
{{ form.status(class_="reset-this") }}
other
{{ form.other(class_="reset-this") }}
Frequency
{{ form.frequency(class_="reset-this") }}
</dl>
<p><input type=submit value=Update>
And finally, my JS:
$(function() {
$("button.reset").click(function() {
$(".resetThis").val("");
});
});
It doesn't have any effect, when I run the file, and when I try to simulate it in JSFiddle, I get a Forbidden (403): CSRF verification failed. Request aborted. error.
Is there something basic I'm missing?
Looking at your fiddle you have several issues:
You lack some serious formatting, you are not closing html tags.
You have a form inside another form, why?
you are using input type="submit" if you want to reset the inputs you have to use type="button" otherwise the form will try to submit to whatever you put on <form action="/"> hence the 403 error
you are using <form action="/"> that does nothing but generate confusion in your case.
in the jquery function you are using $("button.reset") but in your html you are using inputs and never buttons.
In your jquery function you are trying to use the class resetThis but in your html the class is reset-this
You did not attach jquery to your fiddle, it was never gonna work without it.
finally i have refactored your code here with all those problems fixed for you to build up from there. but please do some more research when you are trying to implement a technology you are not familiar with.
So I have this form:
<form method="post" action="index.php" id="searchform">
<input type="text" name="search" placeholder="Search...">
<input type="image" src="img/img1.png" alt="submit" onmouseover="hover(this);" onmouseout="unhover(this);" /></a>
</form>
When the user searches for something I want to change this div:
<div class = "mainText">
<h2>Today's Events: </h2>
</div>
To say this:
<div class = "mainText">
<h2>Results: </h2>
</div>
How can I do this?
EDIT: Is it possible to run this code from within a php if statement?
jquery .text() seems a better fit, so you can just change the text of the tag.
$(".mainText h2").text("Results:");
More on this here:
http://www.w3schools.com/jquery/html_text.asp
The action in your form is the destination of where your form ends up.
If you are looking to control the dom elements you need something like javascript or jquery to control the front end of your application.
You could use jquery to simply listen for when your user has clicked the button or submitted the form and parse the results (in this case, just switching html text). *Remove the the action destination otherwise the page will redirect to index.php
$('form').submit(function(){
$('.mainText').html('<h2>Results: </h2>');
return false;
});
Common usage is to put an ajax call in the submit function to retrieve some data from outside the page source. Hopefully that puts you on track :)
I have a JSP page which is included in the main page..Within the JSP page, I have given a HTMLform which I want to submit() once the user clicks it using Jquery?
<form id="orderBean1" name="myForm" action="/Auto/Item" method="post">
<input id="filename" name="filename" value="" />
</form>
First,
Suprisingly, this form is not recognized within the page..
When I give $('#orderBean1') in my console it does not give the form object whereas $('#filename') gives me the filename input element.
Second ,
As the form is not recognized it does not get submitted...
$("#vehreport").click(function(e) {
e.preventDefault();(I have given this stmt even after the submit() and still not working...
$("#orderBean1").submit();
alert("formsubmnittted");
})
Question -
Why doesn't the form element is recognized in my page?
I set up a JSbin here.
As you can see, #orderbean1 is recognized, and submits.
The error is likely elsewhere is your JS or markup, though if I'm misunderstanding the question please clarify
got a problem and cant find the solution.
I am writing a chat. When a new user opens my site (a new session) a div popes out and the user is asked to fill in his name.
The form works fine when I use an input submit. I want it to work without the submit button, I want it to work when i press a div.
here is my code
html:
<form name="form" id="form" action="index.html" method="post">
<span id="nspan">First name:</span> <input type="text" id="firstname" name="name">
<div name="enter" id="enter">Submit</div>
</form>
the jquery:
$(document).ready(function(){
$("#enter").click(function () {
$("#form").submit();
});
});
nevermind is correct - no problem with that code.
Here's the JSFiddle to prove it: http://jsfiddle.net/8Xk7z/
Maybe you problem is that the id "form" is to general a name, and you already used it for another form.
Another thing, why not use a button or a link? You can style it like you want. Be careful when you use thing for what they are not suppose to be used for, it my give unexpected side effects.
In your case, you may only be able to login to you chat using a mouse, that would exclude blind people. You would also not be able to use the tabulater to get to the login "button". And last, if you are blind and uses a screen reader your would actually not know that there is at login "button", as the reader would not recognize the div as something you can click.
I would recomend using the button-tag like this
<button id="enter">Submit</button>
Or the a-tag like this
<a href id="enter">Submit</a>
If you don't like the predefined styling of them you may always override the styling.
try to define jquery at top of the page
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
Then put your script at next.
still issue.
Please check your other function on same page works fine or not.
I want to trigger the submit event of the form the current element is in. A method I know works sometimes is:
this.form.submit();
I'm wondering if there is a better solution, possibly using jQuery, as I'm not 100% sure method works in every browser.
Edit:
The situation I have is, as follows:
<form method="get">
<p><label>Field Label
<select onchange="this.form.submit();">
<option value="blah">Blah</option>
....
</select></label>
</p>
</form>
I want to be able to submit the form on change of the <select>.
What I'm looking for is a solution that works on any field within any form without knowing the id or name on the form. $('form:first') and $('form') won't work because the form could be the third on the page. Also, I am using jQuery on the site already, so using a bit of jQuery is not a big deal.
So, is there a way to have jQuery retrieve the form the input/select/textarea is in?
I think what you are looking for is something like this:
$(field).closest("form").submit();
For example, to handle the onchange event, you would have this:
$(select your fields here).change(function() {
$(this).closest("form").submit();
});
If, for some reason you aren't using jQuery 1.3 or above, you can call parents instead of closest.
this.form.submit();
This is probably your best bet. Especially if you are not already using jQuery in your project, there is no need to add it (or any other JS library) just for this purpose.
I have found that using jQuery the best solution is
$(this.form).submit()
Using this statement jquery plugins (e.g. jquery form plugin) works correctly and jquery DOM traversing overhead is minimized.
Similar to Matthew's answer, I just found that you can do the following:
$(this).closest('form').submit();
Wrong: The problem with using the parent functionality is that the field needs to be immediately within the form to work (not inside tds, labels, etc).
I stand corrected: parents (with an s) also works. Thxs Paolo for pointing that out.
You can always JQuery-ize your form.submit, but it may just call the same thing:
$("form").submit(); // probably able to affect multiple forms (good or bad)
// or you can address it by ID
$("#yourFormId").submit();
You can also attach functions to the submit event, but that is a different concept.
Your question in somewhat confusing in that that you don't explain what you mean by "current element".
If you have multiple forms on a page with all kinds of input elements and a button of type "submit", then hitting "enter" upon filling any of it's fields will trigger submission of that form. You don't need any Javascript there.
But if you have multiple "submit" buttons on a form and no other inputs (e.g. "edit row" and/or "delete row" buttons in table), then the line you posted could be the way to do it.
Another way (no Javascript needed) could be to give different values to all your buttons (that are of type "submit"). Like this:
<form action="...">
<input type="hidden" name="rowId" value="...">
<button type="submit" name="myaction" value="edit">Edit</button>
<button type="submit" name="myaction" value="delete">Delete</button>
</form>
When you click a button only the form containing the button will be submitted, and only the value of the button you hit will be sent (along other input values).
Then on the server you just read the value of the variable "myaction" and decide what to do.
In JQuery you can call
$("form:first").trigger("submit")
Don't know if that is much better. I think form.submit(); is pretty universal.
<form method="get">
<p><label>Field Label
<select onchange="this.form.submit();">
<option value="blah">Blah</option>
....
</select>
</label>
</p>
**<!-- <input name="submit" type="submit" /> // name="submit_new_name" -->**
</form>
<!--
this.form.submit == this.form.elements['submit'];
-->