[SOLVED] form not allowing input

pizzipie · 07-05-2017, 08:17 PM

I'm trying to combine Radio inputs and text inputs in the same form.
If I click on the radio buttons the input is as expected.

If I try to use the text input the function fires without allowing any input .

Do I need two forms to fix this? Input scree shown in attachment.

Code:

<div id="pickIt">

<form action="#" method="GET">

	Choose Camera Directory:<br><br>
	
	<input type="radio" name="photo" id="pana" value='pana'> PANASONIC DCM-215<br>
 	<input type="radio" name="photo" id="canon" value="canon"> CANON SD 1000<br><br>
 	
  	
    	___________  OR  _________<br><br>	
	Enter Base Directory To Access Photos: <br><br>
	<input type="text" id="inputDir">
 
</form>

</div>
<!-- ==============   body scripts 1 of 1   ================ -->

<script type="text/javascript">

$(function(){  // ready

var dir="";
var camera="";

$("#inputDir").on('change', function () {
dir=$(this).val();
myAjaxCall(dir);
});

 $("#pickIt").on('click', function(event) {;
		var choice= $("input[type=radio]:checked").val();			 
	if (choice=="pana") {
		camera="pana";
	}
	if (choice=="canon") {
		camera="canon";		
	}
		myAjaxCall(camera);
  }); // pickIt

hydrurga · 07-05-2017, 11:54 PM

I don't know much about this, but your jQuery is executing a function when there is a click event on the element with id=#pickIt. This element covers the whole form. If you're clicking on the input text field to enter data, that counts as a click and thus the event is triggered. Check by tabbing to the field rather than clicking on it.

A reasonable way of getting round this would be to encapsulate the radio buttons in their own div element, and check for clicks on the id of this specific element.

If this is completely off the mark, I'll gladly delete this comment.

scasey · 07-06-2017, 04:21 AM

Not off the mark at all, hydrurga. My first thought on reading the post was that the form does exactly what it's programmed to do.

I'm not a big fan of "automatically" submitting forms. A form should have a "Go" button

Code:

 <input type="submit" value="Submit">

to cause the action. Note that this won't require any javascript coding. Clicking on the Submit will action the form.

There are challenges in mixing radio buttons OR text input, tho. radio buttons cause a "select only one" function automatically. Adding the text input allows the user to choose one of the pre-filled options and enter a directory.

Suggest using a drop-down list box instead of radio buttons, with three options:

Code:

 <select name="photo">
  <option value="">-- Select One --</option>
  <option value="pana">PANASONIC DCM-215</option>
  <option value="canon">CANON SD 1000</option>
  <option value="base">Enter Base Directory To Access Photos</option>
</select>

Then only use the text in the <input type="text" id="inputDir"> if the "Enter Base Directory..." (photo = base) is selected. Otherwise, simply ignore anything in that field.
One would probably need to validate that something is in the field if base is selected.

Just a thought.

pizzipie · 07-06-2017, 12:05 PM

Thank you both,

Quote:

A reasonable way of getting round this would be to encapsulate the radio buttons in their own div element, and check for clicks on the id of this specific element.

hydrurga, I put the radio buttons in a <div> and all is well.

R