As a beginner, I would like to build a form with a few input fields and be able to reuse it in different pages. How can I build this with JavaScript/jQuery objects and be able to reuse it?
Let's call the object CustomerForm, and by calling a function CustomerForm.submitInformation(). I have no idea what syntax/structure looks like? I am familiar with jQuery/JavaScript but I have not built Javascript objects before. How can I do an AJAX post or a JSONP post to the server? How do you structure this differently for AJAX and JSONP?
Let's assume the form looks like this:
<form>
<input type="text" name="name" value="foo" />
<input type="text" name="email" value="[email protected]" />
<textarea name="comment">Whatever</textarea>
</form>
How do you submit this form with AJAX and/or JSONP? What do I need to do to create a form object and how do I use it in various pages?
So, I based on Nicholas's help, I am closer to getting the gist of this. I have created a Customer object,
In formload.js
Customer = {name: "", email: "", submitInformation: function(){
var form = '<form name="input" action="submit_action.php" method="get">';
var label1 = '<label>Your Label: </label>';
var input1 = '<input type="text" name="name" value="foo" />';
var label2 = '<label>Your Second Label: </label>';
var input2 = '<input type="text" name="email" value="[email protected]" />';
var sub = '<input type="submit" value="Submit">';
var killform = '</form>';
var br = '<br />';
$('body').append(form + label1+input1 + br + label2+input2 + br + sub + killform);
}}
In HTML view, customer.html
$(document).ready(){
var customer1 = new Customer();
customer1.username = customer1.input1.val();
customer1.email = customer1.input2.val();
customer1.getInformation();
}
Is this correct?
I suppose you could just hard write it via jQuery, but this really isn't the best solution. If you are editing an HTML page, you should really include your form using PHP with an include of the appropriate document, or use some sort of CMS system (Wordpress? Joomla?) to import and reuse files.
Of course, you asked the question, so one way you could do it would be like so:
submit_action.php file stored on the same domain to avoid CORS issues.append to the HTML using jQuery.Example http://jsfiddle.net/nAQ3C/2/
$(function() {
$('body').append('<form name="input" action="submit_action.php" method="get"><label>Your Label: </label><input type="text" name="name" value="foo" /><br /><label>Your Second Label: </label><input type="text" name="email" value="[email protected]" /><br /><input type="submit" value="Submit"></form>');
});
/* Then just write your submission request with PHP, ASP, or whatever other service you'd like to use and upload that file as well */
*Note that DOM manipulation is possible, but should be minimalized as much as possible as it is much more stressful on the browser itself for the client.
To reuse this for instance, you would have to save it as an external js file and just load it into the head of your html pages like so:
<head>
<script src="js/formload.js"></script>
</head>
And for the sake of readability, I've expanded it slightly:
Where formload.js is equal to:
$(function() {
var form = '<form name="input" action="submit_action.php" method="get">';
var label1 = '<label>Your Label: </label>';
var input1 = '<input type="text" name="name" value="foo" />';
var label2 = '<label>Your Second Label: </label>';
var input2 = '<input type="text" name="email" value="[email protected]" />';
var sub = '<input type="submit" value="Submit">';
var killform = '</form>';
var br = '<br />';
$('body').append(form + label1+input1 + br + label2+input2 + br + sub + killform);
});