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.
Related
I'm very new to coding, so please forgive me if this is a dumb question.
I'm working on an assignment where I have to add functionality and styles to an existing bootstrap HTML doc. The purpose is to allow people to enter a dollar amount into an input field either by typing in an amount or by clicking buttons that populate the field with set amounts. One of my instructions was to update the donate submit button so that it appends the chosen donation amount to the "/thank-you" URL.
This is what I have for the input field:
<form id="amountSend">
<input type="text" class="form-control donation-amount-input" placeholder="Other" id="other-amount"/>
</form>
This is what I have for the button:
<button id="donateBtn" type="submit" action="/thank-you"
method="get">DONATE<span class="metric-amount"></span></button>
And I was thinking that the jQuery would look something like this, though the submit function is not currently giving me any visible results.
$("#donateBtn").click(function() {
if (!$.isNumeric($("#other-amount").val())) {
$("#dataWarning").show();
$(".metric-amount").hide();
$(".metric-message").hide();
} else {
$("#amountSend").submit(function() {
var url = "/thank-you";
$(".metric-amount").appendTo("url");
});
}
})
I also got some decent results using a PHP method:
<form id="amountSend" method="post" action="/thank-you.php">
<input type="text" class="form-control donation-amount-input" placeholder="Other" id="other-amount" name="donation"></input>
</form>
<button id="donateBtn" type="submit">DONATE<span class="metric-amount"></span></button>
<script>
$("#donateBtn").click(function() {
if (!$.isNumeric($("#other-amount").val())) {
$("#dataWarning").show();
$(".metric-amount").hide();
$(".metric-message").hide();
} else {
$("#amountSend").submit();
}
});
</script>
This one will open the PHP file I set up (/thank-you.php, which i have stored just in the same root folder as my main HTML doc), but all the browser gives me is the raw HTML code of the PHP file. Here's the code I have in the PHP file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
Thank you for your donation of
<?php echo $_POST["donation"]; ?><br>
</body>
</html>
Anyway, I guess I'm wondering if I'm on the right track? Should I pursue the jQuery or PHP method? Can I even do this using only jQuery? I've seen a few posts on this subject already, but I thought I'd make a new one since the ones I've seen are all fairly vague, I haven't seen the same answer twice, and I'm not sure I fully understand exactly what I'm trying to accomplish, in terms of a visual confirmation of results.
Thanks!
First of all, you have several issues with your code.
Number one: The formulary you have there is bad coded, the form tag needs to have the action and method attributes, not the submit button.
And in top of that, the submit button needs to be inside the form tag, if is not in there, it will not have and kind of effect.
Number two: If you are gonna submit the formulary to a php file and handle the request there ,you need the file to be running on a server (local or whatever). PHP is a server language, if you open the file directly in a browser, it will show you the code it has inside and will not work.
Hope it helps!
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/
Let's keep this short and sweet.
Here is my header:
<head>
<title>4JSB Assignment</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="javascript/form.js"></script>
</head>
Note: <script type="text/javascript" src="javascript/form.js"></script>
Does not appear to be working.
I have a Submit button in the body that is part of a form. Here it is, located at the end of the aforementioned form:
<input type=submit name="submitForm" id="submitForm" onclick="submitForm()">
Here is my external javascript:
function submitForm() {
alert("Working");
}
Alas, "Working" never appears.
My folder structure is as follows:
root
css
....style.css
javascript
....form.js
form.html
The answer is more than likely trivial, but has had me stuck on this assignment for hours because of this one requirement that the javascript be linked from an outside source. I appreciate any attempt to point out this mundane and unfortunate mishap to me.
The issue is that you have id="submitForm" and function submitForm
Not sure why browsers do this, but any id is available as a global object
so,
console.log(submitForm);
would show the input element, rather than the function!!
use a different name for the id, or for the function
console.log(submitForm) actually shows the function!! but it's still a name conflict in the end.
Try changing the name and id of your submit button to something like "submitButton" so that it isn't exactly the same as your javascript function. I believe there is a name conflict.
It depends on what do you want to acomplish:
If you add a onclick function on your submit button it wont work for submit the form, so it will be pointless to have it as that.
If you want execute a javascript function before submit the form and or want to perform some validations that may or may not prevent the form for being submitted . The best way to do it:
<form onsubmit="return submitform();">
....
<input type=submit name="submitFormAny" id="submitFormAny">
</form>
Also as other contributors were saying, be careful, you can't have elements and functions with same id's
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 am trying to see if it is all possible to login to a website after which I will make calls to extract some data. I am doing the latter from one website which doesn't require a login as so:
doc = Jsoup.connect("https://pilotweb.nas.faa.gov/PilotWeb/notamRetrievalByICAOAction.do?method=displayByICAOs").data("retrieveLocId", params[0])
.data("formatType", "ICAO").data("reportType", "RAW").data("actionType", "notamRetrievalByICAOs")
// .userAgent("Mozilla")
// .cookie("auth", "token")
.timeout(6000).post();
This is working perfectly so I want to do the same thing on this other website but I need to login first.
So I have stripped the webpage down to the barest amount to try and see what is required to make the login work and I have the following:
<script src="https://www.airservicesaustralia.com/naips/Scripts/2012.1.214/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="https://www.airservicesaustralia.com/naips/Scripts/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<form action="https://www.airservicesaustralia.com/naips/Account/LogOn" id="frmLogon" method="post">
<input name="UserName" value="login_goes_here" />
<input name="Password" value="password_goes_here"/>
<input type="hidden" value="Submit" data-type="submit" />
</form>
<script src="https://www.airservicesaustralia.com/naips/Scripts/napis/naips.js?v0.0076" type="text/javascript"></script>
If I press the submit button now the login succeeds. However, I have now run out of knowledge about how this whole thing works in terms of the scripts. So my question at this stage is, is it even possible to construct a call from within Android to get a successful login such that I can then use the same style of jsoup.connect I am currently using?
I am thinking I have to look at the naips.js script and perhaps find out what it is finally using to submit but I'm not sure. Any help would be appreciated.
Gavin...
I actually solved this by looking at the element information in Chrome. I could see the submit button that the javascript was creating and then I just manually put that into the HTML and then could remove all the scripts