[eddiehm]

I am trying to take a form input field and take what was entered and grab the first 8 character of what was entered and then submit that to a form instead of what was entered.

here is what I have.
Form

<form id="form" name="myForm" action="https://websiteSubmittingto.com"  method="POST">
		
			<label>inputfield1</label><br/><input type="text" name="inputfield1" style="width:150px;"/><br/>
			<label>inputfield2</label><br/><input  id="inputfield2" name="inputfield2" style="width:150px;"/><br/>
	
			<input type="submit" value="submitto" onclick="getSub()" />
		</form>[code]

Javascript
[code]
var userentered = document.getElementById("inputfield2");
			var form = document.forms[myForm];
			
			function getSub(){
				
				//form.elements["inputfield2"].value = forms.elements["inputfield2"].value.substring(0,8);
				document.alert(form.elements["inputfield2"].value.substring(0,8));
			}

I have tried putting a onsubmit on the form tag but that got me no where. If someone could help me out that would be great.

This post has been edited by eddiehm: 19 July 2011 - 07:30 PM

[Dormilich]

why not limiting the text field to 8 characters?

<input name="inputfield2" maxlength="8">

[eddiehm]

I'm doing this for a company and they are using a third party company so I'm trying to make what I'm doing work with what they have set up.

[satis]

There are a few problems.

1. When you define form, you didn't surround the form name in single quotes. It doesn't work in FF, at least.
2. document.alert() doesn't exist. It's just alert. At least in FF.
3. To not have the form automatically submit, return false.

Here's an example

<form id="form" name="myForm" action="https://websiteSubmittingto.com"  method="POST">
	<label>inputfield1</label><br/><input type="text" name="inputfield1" style="width:150px;"/><br/>
	<label>inputfield2</label><br/><input  id="inputfield2" name="inputfield2" style="width:150px;"/><br/>
	
	<input type="submit" value="submitto" onclick="return getSub()" />
</form>
		
<script type='text/javascript'>
			var form = document.forms['myForm'];
			
			function getSub(){

				alert(form.elements["inputfield2"].value.substring(0,8));
				return false;
			}
</script>

You don't even have to use a submit input. You could just use a button. If you decide to submit the form after checking, you can just do form.submit().

<form id="form" name="myForm" action="https://websiteSubmittingto.com"  method="POST">
	<label>inputfield1</label><br/><input type="text" name="inputfield1" style="width:150px;"/><br/>
	<label>inputfield2</label><br/><input  id="inputfield2" name="inputfield2" style="width:150px;"/><br/>
	
	<input type="button" value="submitto" onclick="getSub()" />
</form>
		
<script type='text/javascript'>
			var form = document.forms['myForm'];
			
			function getSub(){
				var youwanttosubmit = true;
				alert(form.elements["inputfield2"].value.substring(0,8));
				if(youwanttosubmit)
					form.submit();
			}
</script>

Or you could get really creative and put a function on the input field to physically trim it every time a value past 8 characters is entered. I like this one.

<form id="form" name="myForm" action="https://websiteSubmittingto.com"  method="POST">
	<label>inputfield1</label><br/><input type="text" name="inputfield1" style="width:150px;"/><br/>
	<label>inputfield2</label><br/><input  id="inputfield2" name="inputfield2" style="width:150px;" onkeyup='checkField(this)' /><br/>
	
	<input type="submit" value="submitto"/>
</form>
		
<script type='text/javascript'>
	function checkField(el){
		if(el.value.length > 8)
			el.value = el.value.substring(0,8);
	}
</script>

A big benefit of the last one is that it's field-agnostic. I can just put onkeyup=checkField(this) on any input field and it'll start working on that field.

Ultimately, however, this doesn't guarantee much. Javascript runs client-side. If you really need to enforce an 8-character limit when something is submitted, you need to enforce that on the server side when processing the form.

This post has been edited by satis: 20 July 2011 - 04:47 AM

[Dormilich]

satis, on 20 July 2011 - 01:44 PM, said:

2. document.alert() doesn't exist. It's just alert. At least in FF.

window.alert(), but since window is the global object, alert() also works.