Onchange="this.form.submit();"

dev
1

Has anyone had a simple select statement within a form with an Onchange=“this.form.submit();” not submit the form when the value is changed?

I have 2 other forms within the same page with Onchange=“this.form.submit();” that work.

I’ve tried specifically naming the form with an id and using getelementbyid to submit the form, modifying the form name and submitting it with that specific form name, creating a javascript function to submit the form and other options that will submit forms.

I’m pulling my hair out! It’s simple html code that should work 100% of the time.

Below is the piece of code that pertains to this form and select statement.

Dale

<table width="100%">
<form name="form" method="post"  action="">
<cfoutput>
  <input name="pafnumber" type="hidden" value="#form.pafnumber#">
  <input name="positionnumber" type="hidden" value="#form.positionnumber#">
  <input name="paftype" type="hidden" value="#form.paftype#">
  <cfif form.pafnumber neq "">
  <tr>
    <td width="50%" nowrap="nowrap"><div align="right"><strong>PAF Number:</strong></div></td>
    <td width="50%"nowrap="nowrap">#recordset1.pafnumber#</td>
  </tr>
  </cfif>
  
 
  <cfif form.pafnumber neq "">
  <tr>
    <td width="50%" nowrap="nowrap"><div align="right"><strong>EPAF Type:</strong></div></td>
    <td width="50%">#recordset1.pafdescription#</td>
  </tr>
  </cfif> 
  <tr>
  <td width="50%" nowrap="nowrap"><div align="right"><strong>Appointment Type:</strong></div></td>
  <td width="50%">
 <select name="appointmenttype" onchange="this.form.submit();">
  <option value="">Select Appointment Type</option>
  <cfoutput query="getappt">
  <option value="#getappt.appointmenttype#" <cfif getappt.appointmenttype eq "#recordset1.appointmenttype#"> selected </cfif>>#getappt.appointmentdescription#</option>
  </cfoutput>
  </select>
  </td>
</tr>
  
   <tr>
  <td width="50%" nowrap="nowrap"><div align="right"><strong>First Name:</strong></div></td>
  <td width="50%" nowrap="nowrap"><input name="firstname" type="text" value="#recordset1.firstname#" onselect="this.form.submit();" ></td>
  </tr>
  
  <tr>
  <td nowrap="nowrap"><div align="right"><strong>Last Name:</strong></div></td>
  <td><input name="lastname" type="text" value="#recordset1.lastname#"/></td>
  </tr>
</cfoutput> 

<cfoutput>
<tr>
<td nowrap="nowrap"><div align="right"><strong>Effective Date:</strong></div></td>
<td><input name="dateofactionfrom" id="dateofactionfrom" type="text" value="#dateformat(recordset1.dateofactionfrom,'mm/dd/yyyy')#"/></td>
</tr>



<cfif form.pafnumber neq "">

<cfif form.paftype eq 'LV' or form.appointmenttype eq 'TEMP'>
<tr>
<td nowrap="nowrap"><div align="right"><strong>End Date:</strong></div></td>
<td><input name="dateofactionto" id="dateofactionto" type="text" value="#dateformat(recordset1.dateofactionto,'mm/dd/yyyy')#"/></td>
</tr>
</cfif>
<tr>
  <td valign="top">&nbsp;</td>
  <td valign="top">&nbsp;</td>
</tr>
<tr>
  <td valign="top"><div align="right"><strong>Comments:</strong></div></td>
  <td valign="top"><textarea name="comments" cols="50" rows="4">#tostring(Recordset1.comments)#</textarea></td>
</tr>
</cfif>
<tr>
  <td colspan="2">&nbsp;</td>
</tr>
</cfoutput>
<tr>
<td colspan="2">
<div align="center">
<cfif form.pafnumber eq "">
<input name="submit" type="submit"  value="Create PAF"/>
</cfif>
<cfif form.pafnumber neq "">
<input name="submit" type="submit"  value="Update"/>
</cfif>
</div>
</td>
</tr>
<tr>
  <td colspan="2">&nbsp;</td>
</tr>
</form> 
</table>
2

Hi - did you fix this ? I think I’m having the exact same problem!

3

@dmarinello

4

@tillybishop1 Are you seeing some error in your browsers development tools console? Please note that the reference this is on the select tag. That tag hasn’t a form in it.

5

Hi,

Yes I’m getting a
Uncaught TypeError: Cannot read properties of null (reading ‘submit’)
at HTMLSelectElement.onchange

My select tag is a bit more complicated than the above example and is in a form…

6

I had forgotten that the data in my form was multi-record.

I ended up using <select id=“appointmenttype#currentrow#”

7

With this you are referencing the dom node of the <select> tag, and that doesn’t have a form to submit. Instead, I’d add an ID to the form tag and reference it by the ID and submit it then. Something similar to:

<form id="myForm"...>
...
<select onchange="let el=document.getElementById('myForm);el.submit();">
...
</form>

But of course, it depends what you are trying to do exactly.