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?
What's simpleset way to enable text field when radio selecte
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
What's simpleset way to enable text field when radio selecte
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: What's simpleset way to enable text field when radio sel
Attach a listener to your radio button on change, and use that to toggle visibility of the text field.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: What's simpleset way to enable text field when radio sel
Sorry I am no JS expert, so have no idea how to do that.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: What's simpleset way to enable text field when radio sel
Look up "addEventListener" and document.querySelector
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Re: What's simpleset way to enable text field when radio sel
Something like this: http://jsfiddle.net/fLBMU/
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: What's simpleset way to enable text field when radio sel
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>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.