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
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!
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.
I am currently in the middle of the development of a website. If a user presses a button an javascript function needs to be called. I simplified this function to:
<html>
<head>
<script type="text/javascript">
function newProd(number,customer,software,hardware,name)
{
//I simplified this function
alert('number is: '+number+'customer is: '+customer+' software is: '+software+' hardware is: '+hardware+' name is: '+name);
}
</script>
</head>
<body>
<input type="text" name="textfieldCustomer"><br>
<input type="text" name="textfieldSoftware"><br>
<input type="text" name="textfieldHardware"><br>
<input type="text" name="textfieldDescription"><br>
<input type="button" name="button" value="go to function" onClick="newProd('a number',textfieldCustomer.value,textfieldSoftware.value,textfieldHardware.value,textfieldDescription.value)">
</body>
when the user presses the button in Internet explorer, the function works perfectly! Unfortunately the function does not work in Chrome or Safari.
Does anyone have any idea what is going wrong?
The form fields are not supposed to be defined as global variables. Maybe in IE they are but that's not a behavior you can depend on. Try this:
onClick="newProd('a number',
this.form.textfieldCustomer.value,
this.form.textfieldSoftware.value,
this.form.textfieldHardware.value,
this.form.textfieldDescription.value)">
Oh, and add a form to wrap the inputs of course.
Demo: http://jsfiddle.net/kdUMc/
In my eyes there are two big mistakes in your code. First, the access to inputs fields is wrong. It needs a connection to an instance variable, like 'document'. The second one, the form tag is missing. If you wrap the input fields into a form tag you can access the values as Esailija has posted.
I have written this code for Firefox:
<html><head><title>No</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<form action="javascript:void(alert('Yes'));">
<input type="submit" value="Submit">
</form>
<script>$($('form').submit())</script></body></html>
It correctly displays the alert box.
However, when i run this inside an iframe, with this code:
<html><body><iframe src="click.php"></iframe></body></html>
i don't get the alert box, not even if i click the submit button myself.
What is going on exactly? The same code works in Chromium
Well, don't do that then!
It doesn't make any sense to submit a form to a javascript: URL. Use a submit event handler to pick up the form submission and execute script, eg using jQuery:
$('#someform').submit(function() {
alert('Yes');
return false;
});
A good rule of thumb about when to use javascript: URLs is: never.
It looks like it's a problem with FF4 so I'll discuss it on their bugzilla if it's really their fault. I have modified the source so I'm not even sure it is a bug...
I have a situation where I have a form with multiple submit buttons and I want to update a remote frame. I've tried using a g:formremote with 2 g:actionsubmit buttons (which support javascript) but the multiple submit buttons have a glitch (described here: http://www.grails.org/Ajax under "Multiple buttons with formRemote").
I took the workaround, using 2 g:submittoremote buttons, which work the way I expect, but doesn't accept the javascript parameters like onClick (the buttons in question are accept/reject and I want to put an AYS on the reject so it isn't used accidentally).
Is there a way for javascript and multiple submit buttons in a remote form to exist peacefully?
Thanks in advance for your help...
Did you try the before parameter? It takes a JavaScript function, which will be executed before the remote function call. Just use it like this:
<g:submitToRemote value="Reject" update="feedback"
controller="test" action="reject"
before="if (!confirm('sure?')) {return false;}" />
Whatever JavaScript you put in the before parameter will be inserted into the onclick attribute right before your Ajax updater call. This way you can easily do validation, get confirmations etc. and even break from onclick handling before submitting the Ajax call. There is a similar after parameter.
Okay, I'm not saying this is beautiful, but I just messed around with this for a few minutes and have something that might work for you. Like I said... not the prettiest solution, but workarounds rarely are...
<html>
<head>
<g:javascript library="prototype" />
</head>
<body>
<script type="text/JavaScript">
function setReject()
{
document.getElementById('reject').value='true'
}
</script>
<g:formRemote name="test" update="updater" url="[ controller: 'date', action: 'test']" >
<g:hiddenField name="reject" value="false" />
<g:submitButton name="submit" value="something" onclick="setReject();return confirm('Are you sure???')" />
<g:submitToRemote update="updater" action="otherTest" controller="date" value="Go Ahead"/>
</g:formRemote>
<div id="updater">
</div>
</body>
</html>