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
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>