...

View Full Version : Onblur event not allowing form to submit



nikko50
10-12-2011, 06:10 AM
I have an onfocus event that makes a textarea large and then an onblur event that sets it back to a smaller textarea. If I click the textarea the onfocus event is triggered but if I go straight to submit the form the onblur event is triggered and the form is not submitted unless i hit submit twice. How can i get the form to submit? Can i put an "if" statement in the onblur event to see if the form is being submitted then just submit the form otherwise run the onblur event?




<style type="text/css">


.textarea {
background-color: #ffffff;
color: black;
font-family: Arial, sans-serif;
font-size: 8pt;
font-weight: normal;
border-style: solid;
border-width: 1px;
border-color: aaaaaa;
height: 18px;
width: 50%;
overflow: hidden;


}

.textarea2 {
background-color: #ffffff;
color: black;
font-family: Arial, sans-serif;
font-size: 8pt;
font-weight: normal;
border-style: solid;
border-width: 1px;
border-color: aaaaaa;
height: 100px;
width: 50%;
overflow: auto;

}




</style>

</head>

<body>

<script>

function enlargeBox(v,n,c){

document.theForm.elements[n].className='textarea2';





}


</script>


<form method="POST" name="theForm" action="newProcess.php">



site<br>
<textarea
class = "textarea"
name = "site"
onblur = "this.className='textarea'"

onfocus = 'enlargeBox(this.value,this.name,this.className)' rows="1" cols="20"> this is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textarea</textarea>
<br>

Contact:<br>

<input type="text" onclick="this.select();" name="contact" value="" class="textfieldlp" size="50">

<p>&nbsp;</p>
<p><input type="submit" value="submit" name="B1"></p>

</form>

Old Pedant
10-12-2011, 06:25 AM
You are going to love this one.

Move your <input type="submit"> to *ABOVE* your textarea.

Now try it.

Presto, it works.

Why the difference?

Because when you click on the submit button and it is below the textarea and the textarea is enlarged, the onblur occurs first and shrinks the area.

BUT NOW THE BUTTON HAS MOVED! And the mouse is no longer focussed on the button and so the click is just sent to the <body> and *not* to the submit button.

Ain't that fun?

nikko50
10-12-2011, 06:37 AM
but what if I need the button at the bottom of the form.

nikko50
10-12-2011, 06:41 AM
Can I change the onblur to an "if" statement to see if the user submitted the form??

onblur = "if (form submitted) {submit the form }else {this.className='textarea' }"

Kor
10-12-2011, 01:48 PM
Try this:


<input type="submit" value="submit" name="B1" onfocus="this.form.submit()">

Should work.

Old Pedant
10-12-2011, 11:25 PM
but what if I need the button at the bottom of the form.

Then use position: absolute; to make sure it doesn't get moved by the expanding textarea.

Better would probably be to put the textarea inside a <div> and have the <div> be the same size as the smaller textarea. Then allow the larger one to overflow the div, but make sure that the div stays fixed size so the button doesn't get moved by the resize.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum