Combining then passing values to function onSubmit

[emozley]

Hi,

I have a table with two form elements:

<table>
<form method="post">
<tr>
<td>Matter Code</td>
<td><input type="text" name="ClientCode" size="7" maxlength="6" autocomplete="off">
/ <input type="text" name="MatterNumber" size="4" maxlength="4" autocomplete="off">
</tr>
<tr>
<td> </td>
<td colspan="1"><input type="submit" value="Search"></td>
</tr>
</form>
</table>

I want to make it so when the submit button is clicked it combines the two fields also putting a '/' between them an passed that new string to a function called checkCode.

I've tried different things but am I close with:

<form method="post" onSubmit="checkCode(ClientCode.value + '/' + MatterNumber.value)">

The idea is if you type in '123456' in one box and '7890' then the function will receive '123456/7890'.

Thanks very much

Ed

 

[feherke]

Hi

I would write it like this :

[b]<form[/b] [maroon]method[/maroon][teal]=[/teal][green][i]"post"[/i][/green] [maroon]onsubmit[/maroon][teal]=[/teal][green][i]"checkCode([highlight]this.[/highlight]ClientCode.value + '/' + [highlight]this.[/highlight]MatterNumber.value)"[/i][/green][b]>[/b]

Because ClientCode and MatterNumber are not global variables, just elements of the current [tt]form[/tt].


Feherke.

http://free.rootshell.be/~feherke/

 

[1DMF]

depends if you still want the form to submit to the action attribute or not.

As you haven't given an action in your example i'm assuming you don't want the form to submit so try....

<form method="post" action="javascript:checkCode(document.forms[0].ClientCode.value + '/' + document.forms[0].MatterNumber.value);">

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[1DMF]

or as feherke has it if you do want to submit the form.

Also if you want to stop the form from submitting while the checkcode is running, you need to use...

<form method="post" onsubmit="[b]return[/b] checkCode(this.ClientCode.value + '/' + this.MatterNumber.value)">

then either return true or false from the checkCode routine and that will control if form is submitted or not

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[emozley]

Thanks for this - very helpful indeed. I've noticed sometimes it's able to pickup the values from form fields and sometimes not. Please can you advise what is wrong with:

<form name="form" method="post">
<input type="text" name="search" autocomplete="off" onkeyup="checkApp(this.value, form.MatchType.value)">
<input type="radio" name="MatchType" value="B" onclick="checkApp(search.value, 'B')" CHECKED>Begins
<input type="radio" name="MatchType" value="C" onclick="checkApp(search.value, 'C')">Contains
</form>

The form works when you click one of the radio buttons but then when you start typing in the box it isn't able to get form.MatchType.value

Thanks!

Ed

 

[1DMF]

you have named your form 'form'

If you want the forms collection it's an array as follows..

document.forms[0].NAME OF FIELD

where [0] = first from on page [1] for the second etc. etc..

you are always better off giving the form a unique ID and then use document.getElementById('FORM ID');

then the object can easily be accessed to gather the form data...

<form id="myform" method="post">
   <input type="text" name="search" autocomplete="off" onkeyup="checkApp(this.value, document.getElementById('myform').MatchType.value)">
   <input type="radio" name="MatchType" value="B" onclick="checkApp(document.getElementById('myform').search.value, 'B')" CHECKED>Begins
   <input type="radio" name="MatchType" value="C" onclick="checkApp(document.getElementById('myform').search.value, 'C')">Contains
</form>

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[emozley]

Hi 1DMF,

Thanks for this - however I've tried renaming the form and seeing if that worked and also I've tried copying and pasting your code but it's not picking up the value of the radio button when you type in the box.

It's very strange!

Thanks

Ed

 

[1DMF]

my bad , having multiple radio buttons with the same name generates an array and you have see what one is 'selected'.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[1DMF]

play around with this test code, it should give you the inspiration you need to get it to work ;-)

<html>
    <script type="text/javascript">
        function checkApp(obj){
        
            for(var i = 0; i < obj.MatchType.length; i++){
                if(obj.MatchType[i].checked){            
                    alert("s = " + obj.search.value + "\n\n m = " + obj.MatchType[i].value);
                }                    
            }                    
        }
    </script>
<body>
<form id="myform" method="post">   
<input type="text" name="search" autocomplete="off" onkeyup="checkApp(document.getElementById('myform'))">   
<input type="radio" name="MatchType" value="B" onclick="checkApp(document.getElementById('myform'))" CHECKED>Begins   
<input type="radio" name="MatchType" value="C" onclick="checkApp(document.getElementById('myform'))">Contains
</form>
</body>
</html>

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts