www.

Blog Tags

Lab Eleven Blogs

A short description about your blog
Tags >> Javascript

Using an Image as a Submit Button in HTML

Posted by: twmeier

Tagged in: Javascript , HTML

There are times when you want to use an image as a button to submit a form. One case is when you need to use JavaScript to check the html form was submitted correctly. Here is the code:

<script>
    function checkForm()
    {
        var msg = "Please correct the following: \n\n";
        var error = false;
       
        if(document.formName.elementName.value=="") {
            msg += "You must enter a date.\n";
            error = true;
        }
       
        if(error){
            alert(msg);           
        }else{
            if(confirm("Are you sure you want to submit this form?")){                                               
                document.formName.submit();       
            }                   
        }
    }
</script>

<form name="formName" action="/index.php?&task=something" method="post">
    <input type="text" name="elementName" id="elementId" value="">
    ....
</form>


<a href="#" onclick="checkForm(); return false;"><img src="/images/brown_submit.jpg" /></a>


The method above works in all browsers, and is easy to use. When you click the image, the JavaScript function is called. If there are no errors in the form, the function submits the form. Its that easy.


How to Stop a Form From Submitting on Enter

Posted by: twmeier

Tagged in: Javascript , HTML

I came across a problem this week, with a form that submitted when a user hit the "enter" or "return" button even though the submit button had an onclick function that should have kept the form from submitting. The problem only manifested itself on Google's Chrome browser.

I found the following JavaScript code to keep this from happening:

// Disables enter button from submitting the form
    var nav = window.Event ? true : false;
    if (nav) {
       window.captureEvents(Event.KEYDOWN);
       window.onkeydown = NetscapeEventHandler_KeyDown;
    } else {
       document.onkeydown = MicrosoftEventHandler_KeyDown;
    }
    function NetscapeEventHandler_KeyDown(e) {
      if (e.which == 13 && e.target.type != 'textarea' && e.target.type != 'submit') { return false; }
      return true;
    }
    function MicrosoftEventHandler_KeyDown() {
      if (event.keyCode == 13 && event.srcElement.type != 'textarea' && event.srcElement.type != 'submit')
        return false;
      return true;
    }

 
This worked great and fixed my problem (and hopefully your too).


Opening a New Browser Window

Posted by: twmeier

Tagged in: Javascript , HTML

There are times when you may want to open a page in a new browser window. You may also want to be able to determine the size of the new window, whether or not to have scroll bars, tool bars,  status bars etc..  There is a ready-made JavaScript function that you can use to do this:

window.open('url', 'window name', 'attribute1', 'attribute2', .....)

  1. 'url'
    This is the url of the page you would like to appear in the new window.
  2. 'window name'
    You can name your window whatever you like, which can be used if you need to make a reference to the window later.
  3. 'attributes'
    Attributes determine how the new window will look, and are listed below.

Attributes



Parsing an XML string retrieved using AJAX

Posted by: twmeier

Tagged in: XML , Programming , PHP , Javascript , Ajax

While working on an AJAX function this week, I found the need to parse an XML string using JavaScript and PHP. The following JavaScript was used to retrieve an XML string from a PHP file:

function someJavascriptFunction() {
      xmlHttp=GetXmlHttpObject();    
      url = "/components/com_component/ajax/ajax.php?task=someTask";    
      url += "&cc_number="+document.getElementById('cc_number').value;
      xmlHttp.open("GET",url,true);    
      xmlHttp.onreadystatechange = function() {
      if (xmlHttp.readyState == 4)  {       
           xmlDoc=loadXMLString(xmlHttp.responseText);
           var response = xmlDoc.getElementsByTagName("response")[0].childNodes[0].nodeValue;
           document.getElementById("someID").innerHTML = response;
     }
     xmlHttp.send(null);
}

function GetXmlHttpObject()    {
      var xmlHttp=null;
      try {
           // Firefox, Opera 8.0+, Safari
           xmlHttp=new XMLHttpRequest();
      }
      catch (e) {
           //Internet Explorer
           try {
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
           }
           catch (e) {
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
           }
      }
      return xmlHttp;
}

As you can see from the code above, the XML field I was interested in was the "response" field. The XML string that was created and passed using xmlHttp.responseText from the PHP file looked similar to this:

<authorizationResponse>
      <message>Some Message</message>
      <response>Some Message</response>
....
</authorizationResponse>

Not only did I need to parse the XML from the  responseText in javascript, but I also need to parse it inside the PHP function that the JavaScript function called. The XML above was retrieved from a payment gateway in the PHP function using CURL and naned $xmlString.

The only field I needed in the PHP file was the "message" field, and to retrieve it, (or any other field), I did the following in the PHP file:

$xml = new SimpleXMLElement($xmlString);
$message = $xml->authorizationResponse->message;

Don't forget you still need to echo out the entire XML string in your PHP file order to be used by your JavaScript function:

echo $xmlString;


Latest Blogs

Fix Bad Credit With These Helpful Tips
Feb 26th 2013 by: Administrator

Will iPhone Apps Run On iPad?
Jan 29th 2010 by: Trevor M.

How to create a marquee text for an iPhone app
Jan 21st 2010 by: Trevor M.

How to Submit Additional Images in Virtuemart
Aug 7th 2009 by: Trevor M.

Using an Image as a Submit Button in HTML
Jul 31st 2009 by: Trevor M.

Read all blogs