We Keep Coding

show hide text box based on selection of radio button

I'd like to show/hide text box based on selection of radio buttons.
If I select patient radio button, it will display only patient name text box.
If I select visitor radio button, it will display patient name text box and visitor text box.
How could I show/hide using html/javascript/jquery ? Thanks

I got the solution. I just need to create 2 div. 1 div has 1 text box and another div is 2 text box. And just make show/hide control for these 2 div.Thanks

this should get you started. Fool around with the code and let me know what you don't understand.
function show(){
var pvs = document.getElementsByName('pv');
var pv0 = document.getElementById("patient");
var pv1 = document.getElementById("visitor");
if (pvs[0].checked){
pv0.style.display='inline-block';
pv1.style.display='none';
}else{
pv0.style.display='inline-block';
pv1.style.display='inline-block';
}
}
#patient,#visitor{
display:none;
}
select patient <input type='radio' name ='pv' onClick="show()"> or visitor
<input type='radio' name ='pv' onClick="show()"><br>
<div id='patient'> patient: <input type='text' ></div><br>
<div id='visitor'>visitor: <input type ='text' ></div><br>

Multiple Input Boxes in AlertifyJS Prompt dialog

The following code produces a prompt with a single input box, however i need to have two input boxes . Is this achievable ?
alertify.prompt("Please enter Values","Default Text").set('onok', function(closeevent, value) {
if (value == "" || value == " " )
{
alertify.error("No value entered");
return;
}
else
{
updateItem(selectedItem,value);
}
}).set('title',"Update Values");

So i was able to achieve this with the following code :
<!-- the content to be viewed as dialog
***Define the two input boxes
*** Note the input element class "ajs-input" that i have used here , this is the class used by AlertifyJS for its Input elements.
-->
<div style="display:none;" >
<div id="dlgContent">
<p> Enter Value One </p>
<input class="ajs-input" id="inpOne" type="text" value="Input One Default Value"/>
<p> Enter Value Two </p>
<input class="ajs-input" id="inpTwo" type="text" value="Input two default Value"/>
</div>
</div>
<!-- the script -->
<script>
var dlgContentHTML = $('#dlgContent').html();
$('#dlgContent').html("");
/* This is important : strip the HTML of dlgContent to ensure no conflict of IDs for input boxes arrises" */
/* Now instead of making a prompt Dialog , use a Confirm Dialog */
alertify.confirm(dlgContentHTML).set('onok', function(closeevent, value) {
var inpOneVal = $('#inpOne').val();
var inpTwoVal = $('#inpTwo').val();
/* Insert your code to work with the two values */
}).set('title',"Update");
</script>

Javascript Adding a href after form is loaded

I have 3 dropdowns. Only when Australia is selected from the country dropdown, I have to show a help hyperlink for the city dropdown. The user can read some guidelines when he selects Australia before he can select a city. For this I want to append the 'City' label with an a href. How can I achieve this? I tried the following but failed:
function ddCountryChange()
{
var ddCountry = document.getElementById("ddCountry");
var tbCity = document.getElementById("tbCity ");
if (ddCountry.value == "AUS"){
tbCity.innerHTML = '<div class="GXIRowTitle">[<u>Help</u>] <span style="font-weight:normal;">City : </span></div><div class="GXIRowControl"><div id="ctl02_ctl00_GXDivLeft_TbCity_TbBoxReadOnly" style="display: none;"> </div><span id="ctl02_ctl00_GXDivLeft_TbCity_TbBoxNonReadOnly" style="display: inline;"><input name="ctl02$ctl00$GXDivLeft$TbCity$TbBox" type="text" maxlength="64" id="ctl02_ctl00_GXDivLeft_TbCity_TbBox" autocomplete="off"><ul id="ctl02_ctl00_AcCity_completionListElem" class="GXAutoComplete_CompletionListElement" style="position: absolute;"></ul></span><input type="image" name="ctl02$ctl00$GXDivLeft$TbCity$Btn" id="ctl02_ctl00_GXDivLeft_TbCity_Btn" align="ABSMIDDLE" src="/ucommand/CRM/images/icn/DropDown.gif" alt="Show List" onclick="javascript:onAutoCompleteViewList("ctl02_ctl00_AcCity");return false;" style="border-width:0px;"></div>';
}
}
While debugging through Firebug, I see that the city label is appended with a 'Help', but once the process finishes, the 'Help' disappears.

Assuming ddCountry is the select element
// Detect when value is changed
ddCountry.addEventListener("change", function(e){
// Is its value now "AUS"?
if(this.value == "AUS"){
// Do stuff such as appending whatever label
}else{
// Hide stuff again?
}
});

Dynamic text field can't take the value jquery php

I'm trying to add/remove items dynamically but I can't take the values of all the elements of the array.
Basically I have this form
<form action="" method="post">
<div class="input_fields_wrap">
<div>
<label> <span>Team name </span>
<input type="text" class="input-field" name="teams[]"> </label>
</div>
</div>
<span id="num_teams"></span> <label><span> </span>
<input type="submit" value="Add Team" class="add_field_button" name="add_field_button">
<input type="submit" name="next" value="Next" />
</label>
</form>
It just shows an input box where I'd have to insert the team name and two buttons ; one to go to the next page, and the other one to add a new text field using jquery.
Here it is the jquery script
<script type="text/javascript">
$(document).ready(function() {
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
var max_fields = $('#n_teams').val(); //maximum input boxes allowed
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><label><span>Team Name </span><input type="text" class="input-field" name="teams[]"> Delete</label></div>'); // add input box
$("#num_teams").html('Number of Teams: '+x);
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('label').remove(); x--;
$("#num_teams").html('Number of Teams: '+x);
})
});
</script>
The script above works perfectly: it adds and removes textfields.
The problem that I have now is that I can't take the values of the array 'teams[]' .
in a
if(isset($_POST['next']))
even if I try to take the values manually like
echo $_POST["teams"][0]; and
echo $_POST["teams"][1]; ect...
It just takes the first value (i.e. the one I don't add using jquery). It doesn't 'see' the jquery text fields added.
Of course my final aim is to insert 'teams[]' in a mysql table, but for now I noticed that I can't either take the values.
Where am I wrong ?
EDIT - SOLVED
It was a very stupid error I made in the html code. Actually there was a <div> before of the <form> that caused all the troubles. After a very accurate analysis , trying every single piece of code alone, I finally got that I just had to move the <form> above two <div> to make the code work.
I do apologize to everyone, silly me!

Instead of using name="teams[]" use name="teams" and on server side use:
$_POST['teams']
which should give you the comma separated list.

var wrapper = $(".input_fields_wrap").first();

Enable input field X+1 onChange of input field X

So every 'special-input' div contains an input field. I am trying regulate when each information can be entered into each input field.
Initially, I would like the first input field from the top to be enabled, while the rest of the input fields below it be disabled.
OnChange of input field 1, I would like for the next input field below it to be enabled, while the rest disabled. OnChange of input field 2, I would like for input field 3 to become enabled, while the rest remain disabled, etc...
I know I can use JQuery's attr() to enable input fields when needed, but I am unsure how to apply the logic to accomplish this as JQuery is quite new to me.
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
......
......
......
<div class="special-input"><input type="text" /></div>

// Cache the inputs, this is a good way to improve performance of your
// jQuery code when re-using selectors.
var $inputs = $('.special-input :input');
// Disable all except the first input
$inputs.not(':first').attr('disabled', 'disabled');
$inputs.each(function(i) {
// For each input, bind a change event to enable the next input,
// if the user presses enter, the next textbox will receive focus. if the user
// presses tab, the following input won't receive focus, so you'll have to add
// code if you want this to work.
$(this).on('change', function() {
// Get the index of the current input element we're looking at,
// We need to re-wrap the $input[i] element as it is now a normal
// DOM element.
var $nextInput = $($inputs[i + 1]);
$nextInput.removeAttr('disabled').focus();
});
});​
Edit: You can see a working example at http://jsfiddle.net/dFZEq/11/
Edit 2:
To enable the next line's set of elements after a certain condition is met, use this:
var $specialInputs = $('.special-input');
// don't disable the first line's input elements.
$specialInputs.not(':first').find(':input').attr('disabled', 'disabled');
$specialInputs.on('change', function() {
var $this = $(this);
if ($this.find(':input').filter(function() {
// you can change this filter to match any condition you
// like, for now we'll just make sure all inputs have a non-empty value
return $(this).val() == '';
}).length == 0) {
var $nextInputSet = $($specialInputs[$this.index() + 1]).find(':input');
// enable the next set of elements
$nextInputSet.removeAttr('disabled');
// focus your element here, requires more work
$nextInputSet.first().focus();
}
});​
Example at http://jsfiddle.net/tFG5W/

I've not tested the following code, but should look something like this :
$(".special-input").bind("change",function(event){
$(this).attr("disabled","disabled");
$(this).next().removeAttr("disabled").focus();
});