Submiting a form using JavaScript in Django is not working - javascript

I try to submit a form by Javascript in Django.
The form is working
The Javascript is working
The submit() function is not working.
My testing HTML code:
<form method="post" id='testForm' action="www.google.com">
{% csrf_token %}
<a onclick="onDeleteButtonClick()" href="">Delete</a>
<input type="submit" value="Submit">
</form>
My testing Javascript code:
<script type="text/javascript">
function onDeleteButtonClick(){
console.log("before");
document.getElementById("testForm").submit();
console.log("after");
}
</script>
3 Results:
This part of the web page looks like this:
web page pic
Really simple
A When I click the Submit button:
It is working, the form is been submit.
B When I click the delete link:
It is not working.
The log in Javascript works, I can see "before" and "after" in the console.
C I also test this on a normal web page (without Django framework), the Submit button, and the Delete link is all working.
So I think it must be something related to Django.
If anyone knows why this happened, please let me know~ Thank you!

Related

Redirecting form submission to URL after sending the details to database

I am working on a popup newsletter signup. I already have the similar signup form in another page. I used the exact code and it works great. Once I submit the form, two actions has to happen.
Sending the form details to database
Redirecting to thank you page.
With the existing code(this is from a ecommerce website, I cannot manipulate the code), I can send the details to database - perfectly works fine, but
it is not redirecting to Thank You page, instead redirecting to the page hardcoded in the database(assigned to "action". Is there a way out?
This is the code.
<form name="MailingList" method="post" action="http://www.mywebsite.com/MailingList_subscribe.asp">
<input type="text" name="emailaddress" placeholder="Email Address" maxlength="100" size="28"> <br>
<input type="submit" name="Submit" value="Submit" width="260px">
</form>
Instead of this - http://www.mywebsite.com/MailingList_subscribe.asp, I would like to redirect to "www.mywebsite/thankyou.html" . If I assign www.mywebsite.com/ThankYou.html to "action" , then the form is getting redirected to Thank you page, but not sending the information to the database. I have to use HTML, I cannot call from outside file. I guess I need to use PHP, but I am unclear with the code.
Sorry my mind is all over the place, I guess I explained it clearly. Apologies if my question is unclear. Thanks
Give id to your form like formId and you can do this using jQuery,
Download the jQuery latest version from JQuery repo and then place the jquery.min.js file in your resources folder.
Updated
<script src="yourResourcesFolderPath/jquery.min.js"></script>
// above code will use the jQuery plugin online
// chances are that the file path might be wrong according to where you put the js file
// A simple way to try this is put your file in the same folder of your html file and then change above code to
// <script src="jquery.min.js"></script> change file name according to downloaded file name.
<script>
$(document).ready(function(){ // will run the below code after all html loaded
$('#formId').submit(function(){ // will be called upon form submission
$.ajax({
type: "POST",
url: "http://www.mywebsite.com/MailingList_subscribe.asp",
context: document.body
}).success(function() {
// this will be called when you return from your server submit code
location.href = "www.mywebsite.com/ThankYou.html";
});
});
)};
</script>

after clicking anchor jquery validate not working ( Spring MVC + JQuery)

We are developing a project using spring + hibe and jquery which do some form validation and text changing stuff. spring + hibe is working fine. but jquery doesnt. Here goes the scenario:
login.jsp
<form:form action="/login" method="post" id="registerForm" modelAttribute="formbean" data-ajax="false">
...
//some input fields
...
register
...
//some buttons
...
</form:form>
register.jsp
<form:form action="/reg" method="post" id="registerForm" modelAttribute="formbean" data-ajax="false">
...
//some input fields and buttons
...
</form:form>
in the login page ive got an anchor which will go to the register page.
if i call the two pages using spring mapping pattern /login... or /reg... seperately the jquery validation works pretty well.(validate if the fields are empty or invalid input and so on...).
BUT if i go to the register page by means of clicking the anchor, the validation will not be executed in the register.jsp. And basicly it submits the form to the server.
I suppose it has something to do with the jquery or ajax. Spring on the otherside should be no problem.
Could someone please tell why the jquery validate plugin doesnt work after the anchor being clicked and help me find the solution. I would really appreciate it.
btw the file i used included for both jsp pages are:
<script src="scripts/jquery-1.7.1.min.js"></script>
<script src="scripts/jquery.mobile-1.1.1.min.js"></script>
<script src="scripts/jquery.validate.js"></script>
I recommended you choose between jquery validation or spring form validation ,combination of them is not good point! however spring tag will execute validation before jquery .
you can use simple
#RequestParam ("param1") String param1
In controller instead of use modelAttribute and command,and use plain html form and rely on jquery validation.

onsubmit property fails to open new window

A quick question here regarding forms. I've searched the web and can't seem to figure out why what I've implemented isn't working.
The idea is simple. I have a form inside a JSP page. The form has an 'onsubmit' property defined to open a different jsp with some parameters. Inside the form I have a few buttons, one of which calls a JavaScript function, which in turn submits the form (under some conditions).
Here's the code:
JSP:
...
<form id='testForm' onsubmit="window.open('another.jsp')">
<input type="button" onclick="callJsFunction()" />
..
</form>
JavaScript:
function callJsFunction() {
if (launchNow == 1) {
var form = document.getElementById("testForm");
form.submit();
}
}
If I add target="_blank" to the form definition, a new window does open, but NOT the jsp I want to open. Ultimately, I want the form to perform a servlet action (using the action attribute) and then open the new jsp. Any ideas???
Thanks!
The solution to what I was looking for is found here: Javascript Post on Form Submit open a new window
Rather than setting target="_blank", I can set the target to the window I define and open. In my servlet, I redirect to the desired jsp, and it appears in the new pop-up window.
<form id='testForm' action='another.jsp' target='_blank'>
I might be wrong but is this what you are looking for?
Please see the working demo at this link: http://fiddle.jshell.net/vf6AC/show/light/ (don't work in the jsfiddle)
<form action="http://google.com" id="testForm">
<input type="submit" />
</form>​
<script type="text/javascript">
var testForm = document.getElementById("testForm");
testForm.onsubmit = function(e){
window.open("http://stackoverflow.com");
return true;
};​
</script>
See the jsfiddle here: http://jsfiddle.net/vf6AC/

Firefox HTTP Form Action doesn't fire

In Chrome and IE, the following code, when the Anchor tag is clicked, pops up the form (modal box ID of "modalContent", form ID of "DL") and adds an "OnSubmit" to the Form. When the Form is submitted, it will navigate to the requested PDF via Javascript, and run some ASP to send an email with their details attached.
<script language="javascript">
function downloadAnyway(link) {
$('#DL')[0].setAttribute('ONSUBMIT', 'return checkform("' + link + '")');
$('#modalContent').modal();
}
function checkform(navName) {
window.open(navName);
$.modal.close();
}
</script>
<!-- link to download a product guide -->
Product Guide
<div id="modalContent">
<form id="DL" action="contactusprocessNew2.asp" method="post" name="contact" >
<div align="center">
<input type="image" src="templates/default/images/submit_download.gif" class="imagebutton" value="submit" />
</div>
</form>
</div>
This works fine in IE and Chrome, in Firefox, the Javascript onsubmit works, but the action of the asp never fires. If I remove the javascript, the asp fires as expected.
So, the final form in FireFox, after the "onsubmit" has been dynamically added looks as below:
<form id="DL" action="contactusprocessNew2.asp" method="post" name="contact" onsubmit="return checkform("downloads/ProductGuide.pdf")">
The onsubmit fires, opening the product guide in another tab, however, the ASP Action never fires. There is more that goes on here, like we write a cookie making sure we don't ask the client for a download every time they use our downloads, however, I've trimmed off anything I think is outside the problem domain.
In the asp, I have gotten rid of all code and put a simple response.redirect to see if it fires and make sure nothing is going on in the ASP.
Any idea how I can get this to function in FireFox?
UPDATE:
I have replaced the onsubmit event wireup with a 'proper' jquery submit wireup replacing the first line below, with the second. The asp on the form still does not function.
//$('#DL')[0].setAttribute('ONSUBMIT', 'return checkform(\'' + link + '\')');
$('#DL').submit(function checkform() {
$.modal.close();
window.open(link);
return true;
});
UPDATE 2
Right, it is because to modal popup CLOSES before the ASP fires. If we comment out the line $.modal.close(); then the asp fires as expected. In Chrome and IE the javascript and the ASP must fire at the same time, in Firefox, the javascript fires which "hides" the div with the "modelContent" and the asp can no longer fire. So this is the real problem... now how to sort it out...

jquery form submit

I have a jquery fancyzoom box. In that box ,I have a contact form which sends an email on submission. But I am not able to call form submit function due to fancyzoom.
Code is like :
("req_quote.php")
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#popup1_link').fancyZoom({width:610});
$("#submit").css('cursor', 'pointer');
$('.reqfrm').submit( function(){
alert("hell");
});
});
</script>
<body>
<form class="reqfrm" id="frm">
<input type="text" name="name" />
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
</body>
</html>
Above file is included in "index.php" which contains the actual link to open the form in fancyzoom box.
(index.php)
< a href="#popup1" id="popup1_link">< div class="blink">Request a Quote< /a>"
If I remove $('#popup1_link').fancyZoom({width:610}); then i get alert on submission otherwise it goes on form action directly.
Are you getting any JavaScript errors with the fancyZoom call in? Are you including the script file you need to use it? It's hard to say without seeing some more data, or a jsbin / jsfiddle.
The form is submitted in the fancybox js file.
As mentioned by Raul, you need to provide more info for us to help out. You could try any of these things:
See if you can reproduce this issue within a simple html file, that doesn't have any of the extra stuff that your current page may have. If the issue still persists, put it into jsFiddle and post the link here.
If you haven't already, install the Firebug addon for Firefox, and use it's console to check for any JS errors.
Have a look at the jsFiddle that I've created. Is this similar to what you are doing? Mine works wihtout any issues.

Categories