Serialize with javascript (jquery) to new window - javascript

I’m trying to submit a form to with javascript (jquery) to another page that export the result to excel. Below is the code I use to send form data a page and return the results to a div on the same page.
<script type="text/javascript">
function get3() {
$.post('chartprojecttype.php',
$('form[name="reportform"]').serialize(),
function (output) {
$('#info').html(output).show();
});
}
</script>
I tried to modify it like this,
<script type="text/javascript">
function get4() {
$.post('openticketsexcel.php',
{
document.getElementById(‘reportform’).submit();
});
</script>
But it does not work. I have another way to do this and have to different pages that export it in different format.
<input type="image" name="excel" onclick="submitForm('openticketsexcel.php')" value="Export To Excel" src="../pix/excel.png" class="submit_button"><input type="image" name="word" onclick="submitForm('openticketsword.php')" value="Export To Word" src="../pix/word.png"class="submit_button">
and
<script type="text/javascript">
function submitForm(action)
{
document.getElementById('reportform').action = action;
document.getElementById('reportform').submit();
}
</script>
This works but only in IE. Chrome and FireFox can used the first code that returns the submitted data but not the code that submits it to the export pages. Any ideas?

You have MANY issues
1) input type=image is a submit button. Do NOT submit in the onclick of the submit button since you will actually interfere with the event
2) why would you need to submit a form after you post the form to the server? If you need the server to return a word or excel, you need to GET (I GET below by chaning location) or POST a form - but not using $.post since the browser needs to open the file, you cannot ajax word or excel
You likely just want this:
<button class="button" id="excel"><img
alt="Export To Excel" src="../pix/excel.png"/></button>
<button class="button" id="word"><img
alt="Export To Word" src="../pix/word.png"/></button>
using
$(function() {
$(".button").on("click",function(e) {
e.preventDefault();
location="opentickets"+this.id+".php?"+$('form[name="reportform"]').serialize();
});
});
The simpler solution is just
<form action="export.php" target="_blank">
<input type="submit" name="exportformat" value="Excel" />
<input type="submit" name="exportformat" value="Word" />
</form>
and have the php sort things out

You forgot the function and an ending curly brace, and your single quotes were curly instead of straight. Try this:
<script type="text/javascript">
function get4() {
$.post('openticketsexcel.php', function() {
document.getElementById('reportform').submit();
});
}
</script>

jQuery post should be like this
$.post( "some/url", function( data ) {
// code goes here
});
REFERENCE
http://api.jquery.com/jQuery.post/

Related

adding an input value and submitting the form on load

I have the following form:
<form action="http://example.co.uk/order" method="post" id="voucher" class="AVAST_PAM_nonloginform">
<fieldset>
<h4>Vouchers</h4>
<input type="text" class="discount_name form-control" id="discount_name" name="discount_name" value="">
<input type="hidden" name="submitDiscount">
<button type="submit" name="submitAddDiscount" class="button btn btn-default button-small"><span>OK</span></button>
</fieldset>
</form>
and am using the following script:
<script>
window.onload = function(){
document.getElementById(\"discount_name\").value = \"50681\";
}
</script>
to populate the input. I then use:
<script>
window.onload = function(){
document.forms['voucher'].submit();
}
</script>
to activate the submit.
However, use the second script, it stops the "50681" from being inputted into the text box (instead submits a blank input).
Originally I had the code as :
<script>
window.onload = function(){
document.getElementById(\"discount_name\").value = \"50681\";
document.forms['voucher'].submit();
}
</script>
(I split it up thinking it may be a timing issue).
Any ideas?
p.s. the reason for the backslash's is due to it currently being run under php until I can get it working
The issue seems to be with (\"discount_name\").value = \"50681\"; & document.forms['voucher'].submit();
In either of the case you can avoid \ & for form you need to target by the index number. Assuming there is only one form present , so passing 0 in index
window.onload = function(){
document.getElementById("discount_name").value = "50681";
document.forms[0].submit();
}
Note: In the demo I have changed the action url to https else it will prohibit to make call from jsfiddle. In your case you can still keep http in code
DEMO USING ID

Post form via javascript?

I'm working on my first php project and I appear to have hit a milesone, I'm trying to get my form to post via javascript so that the webpage does not have to refresh but I cannot see to get it to work, any help appreciated :)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function say(){
var theusername = $("#message").val();
$.post("q3/say.php", {
message: message,
}
{
return false;
}
}
</script>
<form><input type="text" name="message"><input type=BUTTON value="Submit" onClick="say()"></form>
Seems like you haven't closed properly curly braces and there is no need for return false as you already use type="button" on form. See below code :
function say(){
var theusername = $("#message").val();
$.post("q3/say.php", { message: theusername }, function ( data ) {
// populate data here
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="message">
<input type=BUTTON value="Submit" onClick="say()">
</form>
You might need to read this POST. The callback function is optional in case you want to populate or doing something after request being made

My page goes to the onclick event before submit

I have used submit and added an onclick event to it and I want to call the controller method save for it, and after that I want to redirect my page to another method of the controller for that I have used onclick where I have used opener.href = "". My problem is that sometimes it goes to the save page but oftenly it goes to the onclick event first. I have searched it on google and all the methods tell me to the way I did but something is not right. Please help me.
Here is the code:
<input id="m_bs_btnNext" type="submit" value="Save" onclick="closeWindow();" />
and the onclick function is:
function closeWindow() {
window.opener.location.reload();
window.opener.location.href = "ViewDesign";
setTimeout("window.close()", 800);
}
I would have your close window happen after the save by using onsubmit on your form:
<form id="form" action="/save" onsubmit="saveAndCloseWindow()">
<-- Other form elements -->
<input id="m_bs_btnNext" type="submit" value="Save" onclick="closeWindow();" />
</form>
Then your save function would look like this:
function saveAndCloseWindow() {
$.ajax({
url: $('#form').attr('action'),
method: 'POST',
success: function() {
window.opener.location.reload();
window.opener.location.href = "ViewDesign";
setTimeout("window.close()", 800);
}
})
}

Fire javascript function after all xval validations in MVC

I want to fire a JavaScript function when the user clicks on a button.
This JavaScript should fire only after the page does the xval validation.
How can this be achieved?
Do you want it to run only if the form is valid or it doesn't matter? If you want to run it only if the form is valid try this...
<form method="post" id="formToValidateID" >
<input type="button" onclick="ButtonClicked();" />
</form>
<script type="text/javascript">
function ButtonClicked() {
if($("#formToValidateID").validate.form(){
ExecuteJavascriptMethodIfValid();
}
}
function ExecuteJavascriptMethodIfValid() {
/* awesome code */
}
</script>
If you don't care if the form is valid, you can leave off the if condition.

How to grab the onSubmit event for a form?

I want to know how to grab the onsubmit event from a form to do some form validation, because I don't have access to it directly. (I am writing a Wordpress plugin for comments, so don't have direct access to the form tag or the submit button.)
I got so frustrated trying to do this for my plugin that I have written a Hello World version below. I want it to show the 'Hello World' alert when I load the page, and the "form submitted" alert when I click on the submit button. Instead, it shows both pop ups when the page loads.
Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h2>Test</h2>
<form action="#" method="post" id="commentform">
<p><input type="text" name="author" id="author" size="22" tabindex="1" />
<label for="author"><small>Name (required)</small></label></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
</form>
<script type="text/JavaScript">
<!--
alert("Hello world");
var formCheck = document.getElementById("commentform");
formCheck.onSubmit = doMapping();
function doMapping() {
alert("form submitted");
return false;
}
-->
</script>
</body>
</html>
Change this:
formCheck.onSubmit = doMapping()
to this:
formCheck.onSubmit = doMapping
When you add parenthesis to the end of a function you execute that function. When you assign a function (or pass it as a parameter to another function) you need to omit the parenthesis as that is the way to retrieve a function pointer in JavaScript.
Edit: You will also need to move the declaration of the doMapping function above the assignment of that function to the onsubmit event like this (good catch tvanfosson!):
function doMapping() {
alert("form submitted");
return false;
}
formCheck.onSubmit = doMapping();
However if the doMapping function is not used elsewhere you can declare the doMapping function as an anonymous function like this:
formCheck.onSubmit = function() {
alert("form submitted");
return false;
}
which seems a bit cleaner to me.
Using jQuery.
$(document).ready( function() {
$('#commentform').submit( function() {
alert('form submitted');
return false;
});
});
Thank you! Actually I solved it another way, using both Andrew's suggestion and the window.onload event - I think the problem was partly because the element hadn't actually loaded.
window.onload = function(){
if (document.getElementById("commentform")){
document.getElementById("commentform").onsubmit = doMapping;
}
}
function doMapping(){
alert("form submitted");
return false;
}

Categories