How to create and submit a form using Java Script - javascript

I'm writing a Firefox extension that's to be used in house. Basically, I need to submit a pdf file and some text values to a web service. Right now I have a html page that does this. I need the extension to automate the gathering and submission of the data to the web service.
Here's the html that works.
<body>
<form name="frm_upload_file" enctype="multipart/form-data" method="post" action="my web service address">
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td>ClientID</td>
<td><input type="text" name="client_id" /></td>
</tr>
<tr>
<td>HTML</td>
<td><input type="text" name="html" /></td>
</tr>
<tr>
<td align="right" class="inputtxt"> File: </td>
<td class="inputtxt">
<input name="pdf" type="file" />
</td>
</tr>
<tr>
<td align="left" colspan="2" class="inputtxt">
<p><br /><input type="submit" name="submit" value="Submit" /></p>
</td>
</tr>
</table>
Here's the javascript that doesn't
postToURL: function(html, file) {
var form = content.document.createElement("form");
form.setAttribute("enctype", "multipart/form-data");
form.setAttribute("method", "post");
form.setAttribute("action", "address to my web service");
var clientIDField = document.createElement("input");
clientIDField.setAttribute("type", "text");
clientIDField.setAttribute("name", "client_id");
clientIDField.setAttribute("value", "123456");
form.appendChild(clientIDField);
var htmlField = document.createElement("input");
htmlField.setAttribute("type", "text");
htmlField.setAttribute("name", "html");
htmlField.setAttribute("value", html);
form.appendChild(htmlField);
var fileField = document.createElement("input");
fileField.setAttribute("type", "file");
fileField.setAttribute("name", "pdf");
fileField.setAttribute("value", file);
form.appendChild(fileField);
content.document.body.appendChild(form);
form.submit();
When submitting the data with the js, I get the following exception from the server.
exception
javax.servlet.ServletException: com.sun.jersey.api.container.ContainerException: javax.mail.MessagingException: Missing start boundary
Any ideas?

You can't set the value of a file input - otherwise you could steal files from people's machines.

I don't think you can modify the value of a <input type="file"> field for security reasons. You'll likely need to find another way of automating this.

Related

I'm trying to create an html form to generate an url address based on input to a field

I am trying to create a small HTML document for my team to use to create fake devices for testing purposes in our program. We currently have a link to do this with but we have to manually change parts of it in the URL field before hitting enter to process it. I came up with the idea of creating this form so we can make sure that we are filling in all the elements of the URL correctly and then copy and paste the created URL into the browser. There are static parts of the address that we don't change and then there are values we update after the '=' sign. There are 4 different environments that we can use this in.
I admit it has been a while since I last worked in HTML so I've been trying to search forums and sites like W3School to find the segments of code that I think will serve the purpose I'm aiming for. The following code is where I have gotten so far but can't get it to work the way I've intended it to. If anyone can provide suggestions or feedback on what I missed or did wrong I'd appreciate it. Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Item birth generator</title>
<script>
function mySubmit() {
var addStart;
var addPart1 = "part1=";
var addPart2 = "&part2=";
var addPart3 = "&part3=";
var addPart4 = "&part4=";
var addPart5 = "&part5=";
var addPart6 = "&part6=";
var addPart7 = "&part7=";
var addPart8 = "&part8=";
var myChoice = "choice";
if (myChoice.value == "choice1")
{addStart="https://address1?";}
else if (myChoice.value == "choice2")
{addStart="https://address2?";}
else if (myChoice.value == "choice3")
{addStart="https://address3?";}
else (myChoice.value == "choice4")
{addStart="https://address4?";}
var address = addStart.concat(addPart1, "mInput1", addPart2, "mInput2", addPart3, "mInput3", addPart4, "mInput4", addPart5, "mInput5", addPart6, "mInput6", addPart7, "mInput7", addPart8, "mInput8");
document.getElementById("demo").innerHTML = address;
}
</script>
</head>
<body>
<font> <H3>Please fill in the appropriate fields and then click Generate to create a url for an item in the chosen environment.</H3></font>
<form target="_self" id="demo" name="item" method="post" onSubmit="return checkValue();">
<input type="radio" name="choice" id="ch1" value="choice1" checked> Choice 1 <input type="radio" name ="choice" id="ch2" value="choice2"> Choice 2 <input type="radio" name="choice" id="ch3" value="choice3"> Choice 3 <input type="radio" name ="choice" id="ch4" value="choice4"> Choice 4
<br><br>
<table>
<tbody>
<tr>
<td>Item Part 1</td>
<td><input type="text" name="mInput1" maxlength="13"></td>
</tr>
<tr>
<td>Item Part 2</td>
<td><input type="text" name="mInput2"></td>
</tr>
<tr>
<td>Item Part 3</td>
<td><input type="text" name="mInput3"></td>
</tr>
<tr>
<td>Item Part 4</td>
<td><input type="text" name="mInput4"></td>
<tr>
<td>Item Part 5</td>
<td><input type="text" name="mInput5"></td>
</tr>
<tr>
<td>Item Part 6</td>
<td><input type="text" name="mInput6"></td>
</tr>
<tr>
<td>Item Part 7</td>
<td><input type="text" name="mInput7"></td>
</tr>
<tr>
<td>Item Part 8</td>
<td><input type="text" name="mInput8"></td>
</tr>
<tr>
</tr>
<tr>
<td><input type="submit" value="Generate" onclick="mySubmit()"></td>
</tr>
</tbody>
</table>
<br>
<input type="text" size="250" name="address" value=''>
</form>
</body>
</html>
There is an error with this line:
var s.address = s.addStart.concat(addPart1, mInput1, addPart2, mInput2, addPart3, mInput3, addPart4, mInput4, addPart5, mInput5, addPart6, mInput6, addPart7, mInput7, addPart8, mInput8);
Verify what you are using is valid by testing the variables (output with a console.log or an alert) and check the command syntax. :)

JavaScript -- clear form after values are submitted

I am using the following JavaScript code to clear a form on my page.
document.getElementById("bulletinForm").reset();
This code does indeed clear my form, but it does it before the information is sent to the server. I've tried calling as the onSubmit event on the form and as the onClick event on the Submit button. How do I send the information to the server before clearing the form? I am not currently using any Ajax with this. All I have is a Spring form that looks like this.
<form:form commandName="bulletin" method="post" action="processBulletin">
<table>
<tr>
<td>Name: <font style="font-weight: bold; color: red;">
<c:out value='${nameRequired}' /></font><br /></td>
</tr>
<tr>
<td><form:input path="name" id="name" maxlength="100" value="" /></td>
</tr>
<tr>
<td>Subject: <font style="font-weight: bold; color: red;">
<c:out value='${subjectRequired}' /></font><br /></td>
</tr>
<tr>
<td><form:input path="subject" id="subject" maxlength="1000" value="" /></td>
</tr>
<tr>
<td valign="top">Message: <font style="font-weight: bold; color: red;">
<c:out value='${messageRequired}' /></font><br /></td>
</tr>
<tr>
<td><form:textarea path="note" id="note" cols="80" rows="100" value="" /></td>
</tr>
<tr>
<td><input type="submit" value="Submit bulletin" onClick="clearForm()"/></td>
</tr>
</table>
</form:form>
If you clear the form before submitting you won't get any data. That's also what should be expected.
However you can circumvent this by sending the form without refreshing the site with an asynchroneous request. After sending the form data you can reset the form.
A fast way would be doing it with the Javascript Framework jQuery:
$.ajax({
type: 'POST',
url: "url.html",
data: $('#myForm').serialize(),
success: function() {
// This function is called after
// sending the request successfully
$('#myForm').trigger("reset");
}
});
Sending AJAX request with pure Javascript is a bit more complicated.
You could try manually submitting your form in Javascript, change the input type from submit to button and then you could have something like:
function onSubmit() {
document.getElementById("bulletinForm").submit();
document.getElementById("bulletinForm").reset();
return false; //stop page refresh
}
Source: Clearing my form inputs after submission

locally add javascript to xampp to do math/formula

I'm trying to make a table, in which user can fill some cells with values and then click submit to show the calculation result. I have jquery-2.0.3.min.js and script.js in my directory. Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Inteligence Decision Support System</title>
<script src='localhost/idss/jquery-2.0.3.min.js'></script>
<script type="text/javascript" src='localhost/idss/script.js' charset="utf-8"></script>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Cost</th>
<th>x20</th>
<th>x25</th>
</tr>
<tr>
<td>someName</td>
<td><input name="Cost" type="text" value="0"></td>
<td><input name="a20" type="text" value=""></td>
<td><input name="a25" type="text" value=""></td>
</tr>
</table>
<input type="button" onclick="Zcount()" value="Submit" >
</body>
</html>
and here is the script.js file
<script type="text/javascript">
function Zcount(){
var cost, a20, a25;
a20 = document.getElementById("a20").value;
a25 = document.getElementById("a25").value;
cost = (2*parseInt(a20))+(3*parseInt(a25));
document.getElementById("Cost").value=cost;
}
</script>
but when I filled a20 and a25 and click the submit button, nothing happened. The result stayed zero. Where did I go wrong?
You have to check if the external javascripts are actually loaded. You can do this by right-clicking in he browser ind click "inspect element" in chrome or firefox. If you click "console" in these inspectors you can check if they are loaded. If they aren't, you have to adjust your src attribute in the HTML script element.
Also, you have to use the id attribute on the input's because you're using getElementById, and officially inputs have to be surrounded by a form element. So, in the body tag, your HTML will be like this:
<form id="form" action="#" method="post">
<table border="1">
<tr>
<th>Name</th>
<th>Cost</th>
<th>x20</th>
<th>x25</th>
</tr>
<tr>
<td>someName</td>
<td><input name="Cost" id="Cost" type="text" value="0"></td>
<td><input name="a20" id="a20" type="text" value=""></td>
<td><input name="a25" id="a25" type="text" value=""></td>
</tr>
</table>
<input type="submit" value="Submit" >
</form>
Inside the script.js, you don't have to use the HTML script tags.
Why are u including jquery if you don't use it?
But because you do, you can use this script:
$('form').submit(function(){
var cost, a20, a25;
a20 = $("#a20").val();
a25 = $("#a25").val();
cost = (2*parseInt(a20))+(3*parseInt(a25));
$("#Cost").val(cost);
return false;
});
Working jsFiddle: http://jsfiddle.net/jwvanveelen/ch2wR/

Issue using Ajax's Post Method to Send Multiple Values

My goal is to submit an entire form through an ajax function which will then send those values to a php file. I'm using Post for several reasons - one being that I will be changing data within a MySQL database.
I've seen a few examples while I was searching for an answer, but none of them seem to have addressed the issue I'm having directly.
For instance, this example:
var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("POST", url, true);
// Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
// Call a function when the state changes.
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);
starts to address it.
To be specific, I am not sure how to go about sending multiple values. In the example I found above, I see that they hard coded two values into their statement in the variable params. I'm wanting to know how to pass those values to the function without having to hard code them.
My form:
<table border="0" cellpadding="2" cellspacing="5">
<th colspan="2" align="center">Check Out</th>
<form name="checkOut" method="post" onSubmit="return(validate(this))">
<tr>
<td>Territory Number</td>
<td><input type="text" name="numberOut" tabindex="1" maxlength="3" size="3" /></td>
</tr>
<tr>
<td>First Name of Publisher</td>
<td><input type="text" onKeyUp="showHint(this.value)" name="fName" tabindex="2" maxlength="15"/></td>
</tr>
<tr>
<td>Last Name of Publisher</td>
<td><input type="text" onKeyUp="showHint_l(this.value)" name="lName" tabindex="3" maxlength="15" /></td>
</tr>
<tr>
<td>Special Campaign</td>
<td><input type ="checkbox" name="specialC" tabindex="4" value="Yes"/></td>
</tr>
<tr>
<td><input type="button" onClick="clearForm()" value="Reset" /></td>
<td><input type="submit" value="Check Out" /></td>
</tr>
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</table>
Here, I want to pass the values of numberOut, fName, lName, and specialC. I know how to pass each of them individually, but not as a group. Ultimately, I want to then be able to access those value through php with $_POST['fName'] for instance.
From seeing several answers to similar questions on this site, a number of people say to use jQuery. I'm aware that it is easier, but I want to learn to use ajax first as I'm new to web-based languages.
You will have to create the params
Here is a sample code for you
var params = "numberOut="+document.getElementsByName("numberOut")[0].value;
params+="?fName="+document.getElementsByName("fName")[0].value;
params+="?lName="+document.getElementsByName("lName")[0].value;
var isSc = document.getelementsByName("specialC")[0].checked;
if(isSc){
params+="?specialC=Yes";
}

Javascript form validation isn't working

I'm writing a form validation script in JavaScript. When the form is submitted, I want it to be validated before going to the next page.
This page is being called from another page using Perl Interchange. Validation is performed for the three fields on the form.
Update: here is the full code:
<FORM ACTION="[process]" name="outofstock_form" METHOD=POST onsubmit="return validate_outofstockform();" >
<INPUT TYPE=hidden NAME="mv_todo" VALUE="return">
<INPUT TYPE=hidden NAME="mv_nextpage" VALUE="outofstock_wish_submit">
<INPUT TYPE=hidden VALUE="[perl scratch session]$which_search;[/perl]" NAME="search_key">
<script type=javascript>
function validate_outofstockform() {
var m = document.forms["outofstock_form"]["email"].value
var e = document.outofstock_form.email.value
var f = document.forms["outofstock_form"]["name"].value
var p = documnet.forms["outofstock_form"]["wish_product"].value
var atpos = e.indexOf("#");
var dotpos = e.lastIndexOf(".");
if (document.outofstock_form.email.value == "") {
alert("The Email field is required.");
return false;
}
if (document.outofstock_form.name.value == "") {
alert("The Name field is required.");
return false;
}
if (document.outofstock_form.wish_product.value == "") {
alert("The Product field is required.");
return false;
}
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= e.length) {
alert("Please enter a valid e-mail address");
return false;
}
if (f == null || f == "" || f == "First Name") {
alert("Please enter your first name");
return false;
}
if (p == null || p == "" || p == "Product") {
alert("Please enter your first name");
return false;
}
return false;
}
</script>
<br/>
*Fields in bold are required.<br/>
<table cellpadding="1" cellspacing="5" width="360px" border="0">
<tr>
<td><b>Name:</b></td>
<td>
<input type="text" id="name" name="name" size="40">
</td>
</tr>
<tr>
<td><b>E-mail:</b></td>
<td>
<input type="text" id="email" name="email" size="40">
</td>
</tr>
<tr>
<td>Phone:</td>
<td>
<input type="text" name="phone" size="40">
</td>
</tr>
<tr>
<td> State/ Province:</td>
<td>[include pages/ord/widget_state.html]</td>
</tr>
<tr>
<td > Zip/Postal Code:</td>
<td><INPUT TYPE="text" NAME="zip" VALUE="" size="40" maxlength="10"></td>
</tr>
<br/>
<tr>
<td valign="bottom">Country:</td>
<td>[include pages/ord/widget_country_s.html]</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Salesperson:</td>
<td align=left colspan=2>
<SELECT NAME="salesrep" class="field">
<OPTION VALUE="WEB">(Optional)
[query list=1 prefix=s sql="SELECT id AS username, real_name AS disp_name, everest_id AS int_id FROM employee WHERE sales_ddown = 'Y' AND everest_id != '' ORDER BY real_name"]
<OPTION VALUE="[s-param int_id]"[calc]'[value salesrep]' eq '[s-param int_id]' ? 'selected' : '';[/calc]>[s-param disp_name]
[/query]
</SELECT>
</td>
<INPUT TYPE=hidden NAME="salesperson" VALUE="[s-param username]">
[perl values scratch]
$Scratch->{salesperson} = q{[s-param username]};
[perl]
<tr>
<td colspan="2">
Provide us with the product you are looking for, or the brand and product type
of interest and we will inform you if we find a match.
</td>
<td></td>
</tr>
<tr>
<td><b>Product:</b></td>
<td>
<input type="text" id="wish_product" name="wish_product" size="40" value="">
</td>
</tr>
<tr>
<td>Item Description:</td>
<td>
<textarea name="wish_descrip" rows="2" cols="40"></textarea>
</td>
</tr>
<tr>
<tr>
<td>Brand/Manufacturer Preference:</td>
<td><input type="text" name="wish_man" size="40"></td>
</tr>
<tr>
<td>Product Category :</td>
<td>
<select name="wish_cat">
<option value="" selected>Any Category</option>
[include pages/CATLIST.html]
</select>
</td>
</tr>
<tr>
<td>Is this for a business?:</td>
<td>
<input type="radio" name="option" value="Yes"> Yes
<input type="radio" name="option" value="No"> No<br>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"><font size="0px">
We do not sell, rent or otherwise share your information with anyone.<br/>
</font>
</td>
<td></td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" name="Submit" value="Submit" class="button">
</td>
</tr>
</table>
</form>
Make your JavaScript valid (remove part with multiple dashes) and make it return false to avoid sending the form.
It's hard to tell what exactly is causing the problem, because there are several errors in your code.
A couple of pointers:
You're referencing document.outofstock_form, while the form's name is frm.
<//code table> is not valid HTML. Remove it or replace it with an HTML comment (e.g.: <!-- table code: -->).
It's more common to use a regular expression (search here on SO) to validate form input.
If you're sending the input to a server, perform validation on the server as well. Never trust input from the browser.
You never open the <tr> (presumably a copy-paste error).
And finally, but most importantly:
Always look at your browser's JavaScript error console first. This must be your starting point when debugging JavaScript code. It can help you find the problem and if it doesn't, it can help others help you.
Read How to Ask.
Have you debugged your code?
Use tools like Firebug to debug your scripts. Put a breakpoint in the first line of your validation function and then debug it step by step. You will eventually get to the line that's causing your problems.
A suggestion of how to improve your validator
But apart from debugging I would do validation differently. Instead of checking every single aspect of individual fields I'd rather just add a custom attribute to those inputs that need validation and just check whether they match or not. If any fails inform your user about non-valid field...
<input name="SomeName"
validation-expression=".+"
display-name="Required text field"
type="text" />
Using libraries like jQuery would be even more helpful when working with such data because it would be much easier to enumerate these elements and work with their data... I would of course warmly suggest you use jQuery anyway because it will make your code much more cross-browser. It's a simple library with short learning curve but huge benefits.
But using those special attributes would make your validator function universal so it could be used with any element and on any page. All you'd have to do is to put particular validation attributes to your elements.
Just a suggestion of course.

Categories