Create contact form using ECMAScript/JavaScript Client Object Model

My client has asked to create a request form based on a list which records all the requests in SharePoint 2010.

Problems/Requirements:

  • Only one column in the request list which is the default column created when the list is created. It has a column type of “Single line of Text”. This column can’t be deleted or changed to a different column type.
  • Display that column as a muli-line text box rather than a single-line input box and have the message wrapped.
  • Once the request is sent successfully from the form, display a message to the user “Request Sent!”

Final delivery:

Request

Features:

  • The user can only enter 255 characters in the box as specified in the Request column in the list. Anything over 255 will be truncated straight away. The reason it’s set to 255 is because in the list, the column has “Maximum number of characters” set to 255.
  • Once a request is submitted successfully, a message will pop up to indicate the user.
  • If something accidently clicked the “Send” button without typing a message, an error message will pop up and the empty request won’t be added to the list.
  • All done through a content editor web part using ECMAScript, javascript and html.
  • This web part can be reused by changing the field names in the script to match with the list. However, I haven’t tried with lists containing fields other than single/multiple line of text.

Code:

<script type="text/ecmascript">  
function SendEnquiry() {  
  var el = document.getElementById("Message");
  if (el.value == '')  {   
    alert('Please enter a message.');   
    return false; 
  }  
  else  {   
    var MessageField = document.getElementById("Message");     
    SaveInContactUs(MessageField.value);  
  } 
}   
function SaveInContactUs(Message) {  
  var context = new SP.ClientContext.get_current();   
  var web = context.get_web();   
  var list = web.get_lists().getByTitle('ImageRequest');   
  var listItemCreationInfo = new SP.ListItemCreationInformation();   
  var newItem = list.addItem(listItemCreationInfo);     
  newItem.set_item('Title', Message);    
  newItem.update();    
  context.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failed)); 
}   
function success() {  alert('Your message is submitted!'); }   

function failed(sender, args) {  alert('failed. Message:' + args.get_message()); }
function textLimit(field, maxlen) { if (field.value.length > maxlen)  field.value = field.value.substring(0, maxlen);  } 

</script>
<div style="width:300px">  
  <p><strong>Image Request Form</strong></p>  
  <p>I would like to have an image available in the gallery depicting.</p>  
  <div>   
    <textarea id="Message" name="Message" onkeyup="textLimit(this, 255);" style="font-size:11pt; width:300px; height:150px" ></textarea>     
    <br/>   
    <div style="text-align:center;">    
      <input type="submit" onclick="Javascript:SendEnquiry();" value="Send" style="width: 100px; height: 30px; font-weight: bold;">   
    </div>  
  </div> 
</div>

Reference:

This article really got me started. Thanks so much!

http://www.learningsharepoint.com/2011/10/03/create-contact-form-using-ecmascriptjavascript-client-object-model-sharepoint-2010/

Say if I have a contact form instead and I would like to get the user to receive a copy of their submitted message in their email, I can probably include the code in this article. (In theory)

http://stackoverflow.com/questions/7097363/send-email-with-javascript

If the form included a dropdown list, the code in this article may be useful.

http://haseebakhtar.wordpress.com/2012/07/10/how-to-retrieve-all-choice-field-values-using-ecmascript-sharepoint-2010/

Form based validation in js

http://stackoverflow.com/questions/6810985/validate-form-required-fields-based-on-class

Further improvement:

The validation on the form is pretty lame. If someone just entered spaces in the text box, it would still submit the form successfully. So how can I have a better validation for a required field? And what if I have a email or number field, what validation would I need? You are welcome to post solutions/thoughts in the comment area.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s