Tag Archives: javascript

HTML, Javascript, Programming, Technical

Programmatically submitting an HTML form via jQuery submit() or trigger(‘submit’) doesn’t work? Solution!

Leave a comment

Say you are trying to submit an HTML form via jQuery. If you’re trying to submit it using .submit() or .trigger(‘submit’) you may have ran into a very strange problem where nothing happens for no reason you can figure out. Here is a very basic example below. Why on Earth is this not working?

[code lang=”js” highlight=”12″]

<script type="text/javascript">

jQuery(‘#my-form-submit’).click( function(e) {
e.preventDefault();
// Do some stuff here…
jQuery( ‘#my-form’).submit();
});

</script>

<form action="?ajax=4" method="post" id="my-form">
<input type="submit" name="submit" value="Submit this form!" id="my-form-submit">
</form>

[/code]

 

Browsers reserve some key words for input names, such as “submit”. As you see in line 12 we have name=”submit”. This simple thing is the problem. Just change name=”submit” to name=”my-submit”:

Does not play nicely with jQuery triggering of submit:
[code lang=”js” highlight=”12″ firstline=”12″]

<input type="submit" name="submit" value="Submit this form!" id="my-form-submit">

[/code]

Works:

[code lang=”js” highlight=”12″ firstline=”12″]

<input type="submit" name="my-submit" value="Submit this form!" id="my-form-submit">

[/code]

Unfortunately browsers offer no error or exlanation to the developer as to why triggering the submit is not doing anything. This can be quite frustrating until you figure this tiny aspect out.

Programming

Return URL at cursor position in textarea

Leave a comment

One of the requested features for Typity.com was the ability to navigate links in the textarea without having to highlight, copy, and paste them into the user’s browser URL input. I thought it would be simple to code some javascript to parse the URL around the cursor’s position. I was sadly mistaken. The methods and properties for textarea are a ridiculous mess and very non-standard. After a ton of trial and error, Googling for hours, and reading tons of documentation, I was able to piece together the following code. Keep in mind that I am very new to javascript. This could probably be done much better and may have bugs though it seems to be working fine so far. It seems as if absolutely no one has been able to get this to work before so I figured I should share it with the rest of the internet.

View source code with tabs and spacing intact [typity.com].

/*
* MicroSwift graburl() (C) Copyright 2009 MicroSwift.com. All Rights Reserved.
* Created exclusively for use on Typity.com by Dustin Bolton
* Leave these top 3 lines if using this on your own site or editing, please.
*
* Last updated: 7/17/09. Now works in FF & Internet Explorer.
*
* EXAMPLES:
* graburl(textareaobject)
* Returns the url found touching the user’s current cursor position.
* User may have to click first in the area sometimes. Not sure of a workaround
* Only tested in firefox so far!
* I hate textarea javascript… textarea is designed so poorly and inconsistent.
*
*/

function graburl(o) {
if (o.setSelectionRange) {
o.focus();
caret=o.selectionStart; // Set initial caret position when clicked.

// Find beginning of url
i=caret;
linestart=-1;
while(i>0) {
charcode=o.value.substring(i-1,i).charCodeAt(0);
if ((charcode==10)||(charcode==32)) { // If line feed or space, reached left border
linestart=i;
i=-1; // branch out
}
i=i-1;
}
if (linestart==-1) { linestart=0; } // Hit BOF

// Find end of url
i=caret;
lineend=-1;
while((i0)) {
charcode=o.value.substring(i-1,i).charCodeAt(0);
if ((charcode==10)||(charcode==32)) { // If line feed or space, reached left border
lineend=i-1;
i=-1; // branch out
}
i++;
}
if (lineend==-1) { lineend=o.value.length; } // Hit EOF

url=o.value.substring(linestart,lineend);
} else if (o.createTextRange) { // Internet Explorer
r=o.createTextRange();
r.moveToPoint(window.event.x, window.event.y);
//r.expand(“character”);
r.moveStart(‘character’,-1);
// Start at cursor and go left until we hit a space or weird character.
i=0;
leftline=”;
done=false;
while( (i>-9999)&&(done==false) ) {
r.moveStart(‘character’,-1); // Step caret left one position (move START first!!!)
r.moveEnd(‘character’,-1); // Step caret left one position
if ( (r.text.charCodeAt(0)==32) || (isNaN(r.text.charCodeAt(0))) ) {
done=true;
} else {
leftline=r.text+leftline;
i=i-1;
}
}
// Move cursor back to original point.
i=i*-1;
r.moveEnd(‘character’,i); // Step caret right one position (move end FIRST!!!)
r.moveStart(‘character’,i); // Step caret right one position
// Start at cursor and go right until we hit a space or weird character.
i=0
rightline=”;
done=false;
while( (i<9999)&&(done==false) ) {
r.moveEnd(‘character’,1); // Step caret right one position (move end first)
r.moveStart(‘character’,1); // Step caret right one position
if ( (r.text.charCodeAt(0)==32) || (isNaN(r.text.charCodeAt(0))) ) {
done=true;
} else {
rightline=rightline+r.text;
i++;
}
}
url=(leftline+rightline);
}
// url=suspected url. Check it for http and stuff…
if ( (url.substring(0,7).toLowerCase()==’http://’) || (url.substring(0,8).toLowerCase()==’https://’) || (url.substring(0,5).toLowerCase()==’ftp://’) ) {
return url;
} else {
return ‘error’;
}
}