Dynamically Working with Form Action and Input

[shef015]

Ok, first off I am not a fan of using Javascript. I do most of my coding in JSP so when I work with Javascript along with that I get a headache. So I am basically a beginner with it. My problem is have a select that has to options(Insert, Update). If insert is selected, it should set the form's action to 'AddRates.jsp' and disable a checkbox. If update, then it should set it to 'UpdateRates.jsp' and disable a text box. Any help would be very much appreciated, I have tried a few different ways to do this with no luck.

Here is my code....
<% String report = &quot;&quot;; %>
<script language=&quot;JavaScript&quot; type=&quot;Text/JavaScript&quot;>
function SelectValue( SelectControl )
{
return SelectControl.options[ SelectControl.selectedIndex ].value;
}

function Init()
{
ChangeReport(SelectValue( document.forms[ 0 ].ReportType ));
}

function ChangeReport(ReportType)
{
switch (ReportType)
{
case 'Insert':
document.EditRatesForm.newJONs.disabled = &quot;true&quot;;
alert(&quot;Insert&quot;
<% report = &quot;AddRates.jsp&quot;; %>
break;
case 'Update':
document.EditRatesForm.newJONs.disabled = &quot;false&quot;;
alert(&quot;Update&quot;
<% report = &quot;updateRates.jsp&quot;; %>
break;
Default:
alert(&quot;Help&quot;
break;
}
}
</script>
<form action=&quot;<%= report %>&quot; method=&quot;Post&quot; name=&quot;EditRatesForm&quot;>
<select name=&quot;ReportType&quot; id=&quot;ReportType&quot; onChange=&quot;ChangeReport( SelectValue( this ) );&quot;>
<Option>Insert</Option>
<Option>Update</Option></select>
<input type=&quot;checkbox&quot; name=&quot;newJONs&quot; value=&quot;OFF&quot;>
<input type=&quot;text&quot; name=&quot;numJONs&quot; size=&quot;3&quot;>
<input type=&quot;submit&quot; value=&quot;Submit&quot; name=&quot;submit&quot;>

I left some snippets of the code out just cause it was more design parts of the code.

 

[skiflyer]

I'm curious to see if there's a way to change the action attribute of a form... if so, it's probably something like

document.EditRatesForm.action = report;

up in your function.

If not though, I can think of several easy workarounds....

mimicing the form as hidden, and submitting whichever form based on whichever value...

The way I usually handle this is by using a controller on the server side... i.e. submit them to something like process.jsp, which figures which script to include... (I'm a php'r, but can't you include in jsp?)

-Rob

 

[shef015]

well i am thinking it is having problems with the case statement. It does not give the alerts when a new option is picked from the select. I think something is wrong in that area.

As a last resort I had thought of just passing everything to an empty jsp page to funnel to associated pages. But I still need to disable those inputs though so it will still be a problem

 

[skiflyer]

Oh you know I didn't even look at that... your case statement looks right to me... try this (until someone who really knows what's going on comes along)...

put a

alert(ReportType);

at the beginning of your ChangeReport function and make sure the right value is getting passed.

and until you have that straightened out coment out those
<% report = &quot;blah.jsp %> lines, I'm fairly certain what you're doing there is escaping to a server side script, which isn't going to help you at all.

so basically put this code in place, to make certain your case statements are working, and your controls are being disabled (notice I also switched to double quotes, dunno if that matters, but it should be double)....

<script language=&quot;JavaScript&quot; type=&quot;Text/JavaScript&quot;>
function SelectValue( SelectControl ) 
{
  return SelectControl.options[ SelectControl.selectedIndex ].value;
}

function Init()
{
  ChangeReport(SelectValue( document.forms[ 0 ].ReportType ));
}

function ChangeReport(ReportType)
{
  alert (ReportType)
  switch (ReportType)
  {
    case &quot;Insert&quot;:
      document.EditRatesForm.newJONs.disabled = &quot;true&quot;;
      alert(&quot;Insert&quot;);
      break;
    case &quot;Update&quot;:
      document.EditRatesForm.newJONs.disabled = &quot;false&quot;;
      alert(&quot;Update&quot;);
      break;
    Default:
      alert(&quot;Help&quot;);
      break;
  }
}

Anyway, let me know what happens with that, if it doesn't help I'll start actually typing in some of this code and see if I can't be more useful.

-Rob

 

[shef015]

ok i did figure it out. It was a simple little problem that i had overlooked in the beginning when i wrote the page. The options had no values assigned to it, therefore the case could not read them. Now I am trying to work with the disabling and enabling of the inputs.

I didn't see your response till after I fixed the main issue but ya i agree with the server side issue. I have seen other code written that incorporates server-side code with javascript but still have no clue how it works.

I changed my code to look like this basically...

function SelectValue( SelectControl )
{
return SelectControl.options[ SelectControl.selectedIndex ].value;
}

function InitPage( )
{
document.EditRatesForm.newJONs.disabled = &quot;true&quot;;
document.EditRatesForm.action = &quot;addRates.jsp&quot;;
document.EditRatesForm.method = &quot;Post&quot;;
}

function ChangeReport(RType)
{
switch (RType)
{
case 'Insert':
document.EditRatesForm.newJONs.disabled = &quot;true&quot;;
document.EditRatesForm.numJONs.disabled = &quot;false&quot;;
document.EditRatesForm.action = &quot;addRates.jsp&quot;;
document.EditRatesForm.method = &quot;Post&quot;;
alert(&quot;Insert&quot;
break;
case 'Update':
document.EditRatesForm.newJONs.disabled = &quot;false&quot;;
document.EditRatesForm.numJONs.disabled = &quot;true&quot;;
document.EditRatesForm.action = &quot;updateRates.jsp&quot;;
document.EditRatesForm.method = &quot;Post&quot;;
alert(&quot;Update&quot;
break;
Default:
alert(&quot;Help&quot;
break;
}
}

 

[shef015]

ok i did figure it out. It was a simple little problem that i had overlooked in the beginning when i wrote the page. The options had no values assigned to it, therefore the case could not read them. Now I am trying to work with the disabling and enabling of the inputs.

I didn't see your response till after I fixed the main issue but ya i agree with the server side issue. I have seen other code written that incorporates server-side code with javascript but still have no clue how it works. Thanks for the input

I changed my code to look like this basically...

function SelectValue( SelectControl )
{
return SelectControl.options[ SelectControl.selectedIndex ].value;
}

function InitPage( )
{
document.EditRatesForm.newJONs.disabled = &quot;true&quot;;
document.EditRatesForm.action = &quot;addRates.jsp&quot;;
document.EditRatesForm.method = &quot;Post&quot;;
}

function ChangeReport(RType)
{
switch (RType)
{
case 'Insert':
document.EditRatesForm.newJONs.disabled = &quot;true&quot;;
document.EditRatesForm.numJONs.disabled = &quot;false&quot;;
document.EditRatesForm.action = &quot;addRates.jsp&quot;;
document.EditRatesForm.method = &quot;Post&quot;;
alert(&quot;Insert&quot;
break;
case 'Update':
document.EditRatesForm.newJONs.disabled = &quot;false&quot;;
document.EditRatesForm.numJONs.disabled = &quot;true&quot;;
document.EditRatesForm.action = &quot;updateRates.jsp&quot;;
document.EditRatesForm.method = &quot;Post&quot;;
alert(&quot;Update&quot;
break;
Default:
alert(&quot;Help&quot;
break;
}
}

 

[skiflyer]

And that works for the disabling of the fields I'm assuming... at least it should...

how about the form actions, those working now too?

And here's how server side meshes with javascript...

You write some server side code which sets some variables when the page loads... then you can substitute that value into the javascript wherever you like.

However, dynamic changes while the page is already loaded don't do anything, that code within the <% %> is not even seen any longer. Those, <%= var_name%>, are just seen as whatever the value of the variable was when the page loaded, it is not updated.

-Rob

 

[shef015]

ya i figured that out pretty quick with the jsp and javascriptt interaction. some of the stuff i have seen other people do just makes me try to figure out the details of it.

The disabling part is what i am working on now. It only works in the InitPage() function. It doesn't disable and enable inputs in the case statement.

The form actions now work perfectly fine, well till I start working with the associated jsp pages. But I don't see any problems from them.

 

[shef015]

I got it. I just had to remove the quotes from the true and false. I really hate trying to learn another syntax. I would love to know why they named it javascript when there is no java.