Page 1 of 1

What's simpleset way to enable text field when radio selecte

Posted: Fri May 23, 2014 2:30 pm
by simonmlewis
I need to do a simple form, where if they click Other, the textbox is enabled.

I'm sure there is a simple JS way of doing it. If the
<input type='radio' name='subject' value='other'> is selected, then <input type='text' name='subjectother'> need to be enabled. Otherwise, readonly/disabled.

How?

Re: What's simpleset way to enable text field when radio sel

Posted: Fri May 23, 2014 3:01 pm
by Celauran
Attach a listener to your radio button on change, and use that to toggle visibility of the text field.

Re: What's simpleset way to enable text field when radio sel

Posted: Fri May 23, 2014 3:08 pm
by simonmlewis
Sorry I am no JS expert, so have no idea how to do that.

Re: What's simpleset way to enable text field when radio sel

Posted: Fri May 23, 2014 5:36 pm
by pickle
Look up "addEventListener" and document.querySelector

Re: What's simpleset way to enable text field when radio sel

Posted: Sat May 24, 2014 7:34 am
by Celauran
Something like this: http://jsfiddle.net/fLBMU/

Re: What's simpleset way to enable text field when radio sel

Posted: Sun May 25, 2014 2:37 pm
by simonmlewis
It works with that basic code, but not among this. and there is only one set of radio buttons.

Code: Select all

 <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
  <style type='text/css'>
    #subjectother { display: none;}
  </style>
  


<script type='text/javascript'>
$(function(){
$('input:radio').change(function() {
    if ($(this).val() === 'other') {
        $('#subjectother').show();
    } else {
        $('#subjectother').hide();
    }
});

}); 

</script>

<script language="JavaScript">
function ticketCheck(formobj){
	// Enter name of mandatory fields
	var fieldRequired = Array("subject", "message");
	// Enter field description to appear in the dialog box
	var fieldDescription = Array("Subject", "Your Message to us");
	// dialog message
	var alertMsg = "A few boxes to complete: (and then you're done!)\n";
	
	var l_Msg = alertMsg.length;
	
	for (var i = 0; i < fieldRequired.length; i++){
		var obj = formobj.elements[fieldRequired[i]];
		if (obj){
			switch(obj.type){
			case "select-one":
				if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			case "select-multiple":
				if (obj.selectedIndex == -1){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			case "text":
			case "textarea":
				if (obj.value == "" || obj.value == null){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			default:
			}
			if (obj.type == undefined){
				var blnchecked = false;
				for (var j = 0; j < obj.length; j++){
					if (obj[j].checked){
						blnchecked = true;
					}
				}
				if (!blnchecked){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
			}
		}
	}

	if (alertMsg.length == l_Msg){
		return true;
	}else{
		alert(alertMsg);
		return false;
	}
}
// -->
</script>
<?php 
function curPageURL()
{
 $pageURL = (isset($_SERVER['HTTPS']) && ($_SERVER["HTTPS"] == "on")) ? 'https://' : 'http://';
 if ($_SERVER["SERVER_PORT"] != "80") {
  $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
  $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 return $pageURL;
}
$pageurl = curPageURL();

if (isset($pageurl)) {
    $pageurl = $pageurl;
    $_SESSION['pageurl'] = $pageurl;
} else if (isset($pageurl)) {
    $pageurl = $_SESSION['pageurl'];
}

if (isset($_SESSION["loggedin"])) 
{
$email = $_SESSION["email"];
$firstname = $_SESSION["firstname"];
$usertype = $_SESSION["usertype"];
$userid = $_SESSION["userid"];

$website = isset($_POST['website']) ? $_POST['website'] : null;
$subject = isset($_POST['subject']) ? $_POST['subject'] : null;

$subjectother = isset($_POST['subjectother']) ? $_POST['subjectother'] : null;
if(!empty($subjectother) && $subject == "Other") { 
$subject = NULL;
$subject = $subjectother; 
}

$message = isset($_POST['message']) ? $_POST['message'] : null;

<div class='head' style='color: #ff5500'>Raise a New Ticket</div>
<form onSubmit=\"return ticketCheck(this)\" action='/newticket&new=y' method='POST' name='login'>

<table border='0' class='bodytext' cellspacing='0' cellpadding='0'>
 <tr><td ><div class='email'>Website*</div></td><td>
 <select name='website' style='width: auto'>
 <option value='site'";
 if ($website == "site") { echo " selected='selected'";}
 echo ">site</option># <option value='site2'";
 if ($website == "site2") { echo " selected='selected'";}
 echo ">site2</option>
 </td></tr>
 
  <tr valign='top'><td ><br/><div class='email'>Subject*</div></td><td >
  <div class='newticketsubject'><input type='radio' name='subject' value='My order is late'>Not Arrived</div>
  <div class='newticketsubject'><input type='radio' name='subject' value='I have a missing item in my order'>Not Arrived</div>
  <div class='newticketsubject'><input type='radio' name='subject' value='My order is not correct'>My order is not correct</div>
  <div class='newticketsubject'><input type='radio' name='subject' value='I have a faulty product'>I have a faulty product</div>
  <div class='newticketsubject'><input type='radio' name='subject' value='I have a product that need repair'>I have a product that need repair</div>
  <div class='newticketsubject'><input type='radio' name='subject' value='I have given incorrect info on my order'>I have given incorrect info on my order</div>
  <div class='newticketsubject'><input type='radio' name='subject' value='I would like to change my order'>I would like to change my order</div>
  <div style='clear: both' /></div>
  <div class='newticketsubject'><input type='radio' name='subject' value='Other'>Other <input type='text' name='subjectother' id='subjectother' style='width: 600px'></div>
  
  
  </td></tr>
   <tr valign='top'><td ><br/><div class='email'>Message*</div></td><td><textarea name='message' style='width: 600px; height: 200px; background-color: #ffffff'></textarea></td></tr>

   <tr><td nowrap><div class='email' style='margin-right: 15px'>RC Order Number<br/>If relevant to your enquiry</div></td><td width='233px'><input type='text' name='rcnumber' style='width: 200px' class='form' ></td></tr> 
   
 
    
	<tr><td colspan='2'><input type='submit' value='Create Ticket' class='submit'>
  </tr>
</table>
</form>