|
JavaScript - How To Clear Dependent Select Input If Parent Changed To Blank
I have an ajax dependent drop down set up for location fields and am having trouble figuring out how to clear the dependent selects if the parent select is changed to blank.
I set up a function to clearFields: Code: <script>
function clearFields() {
document.getElementById('cb_state').value = "";
}
</script>
And then set the parent to clearFields onchange: Code: onchange='ajaxFunction();clearFields();' This doesn't clear the field, but even if it did it would clear the field on change regardless of what's selected, what I need is for the function to fire only if the blank option is selected. How do I need to go about this? Similar TutorialsHi Experts, i have 2 JS array and i need to have dependency between them knowing that 1st Array has parent element of the 2nd one. i.e ARRAY1 ID VAL ID2 2 Dep1 10 3 Dep2 20 4 Dep3 30 ARRAY2 ID VAL ID2 PARENT 20 team1 11 10 21 team2 12 10 22 team3 13 20 23 team4 14 30 i need to have two different DDL's where when i choose VAL = Dep1 on ARRAY1 , i should see on the 2nd DDL only elements with parent corrsponding to Dep1 ( PARENT =10). how this can be possible thanks Code: I have to create two dropdownlists that are dependent
In my first select tag there are 4 selections ,,, year,quarter,month and week.
and in second select it should automatically populate..If user select year from first select in second select values should be 1 to 365.. if quarter values in second select(dropdown) should be 1 to 4. if month 1 to 12 and if week is selected 1 to 7.. can anyone help me to achieve this.. I will post that code and please help me to resolve this error as iam naive user to javascript..
<select id="user_defn_uom" name="user_defn_uom" onchange="alert(this.options[this.selectedIndex].text)" align="center">
<option selected value="">
<option value="Yearly">Yearly
<option value="Quarterly">Quarterly
<option value="Monthly">Monthly
<option value="Weekly">Weekly
</td>
<td>.
<select name="user_defn_day" align="center">
<option selected value="">
<script type="text/javascript">
alert(this.options[this.selectedIndex].text)
for (var i = 1; i <=366; i++)
{
document.write('<option value="' + i + '">' + i + '</option>');
}
</script>
</select>
Hey, I currently have an input box which submits my input box value to php script with a bit of JS: Code: <input type="text" class="cssShoutForm" name="sbText" onSubmit="this.disabled=true; shoutIt()"> <input type="button" name="Shout" value="Submit" class="cssShoutButton" onClick="this.disabled=true; shoutIt()"> Now when a use clicks the submit button and submits the text - input box clears which is perfect but if a user hits enter the value stays in the input box which is a pain cos you have to delete it to type in the next line. Why is this? This is my JS: Code: function shoutIt() {
document.fShout.admin.value = "";
document.fShout.submit();
setTimeout("document.fShout.sbText.value=''", 1000);
setTimeout("document.fShout.Shout.disabled=false", 1000);
}
How can i get it to also clear on a user hitting enter? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="javascript/text">
<!--
function clearInputField( input, def )
input = document.getElementById( input );
if ( input.value == def ) {
input.value = '';
}
}
-->
</script>
</head>
<body>
<b>Testing Input</b>
<input id="input" onclick="JavaScript: clearInputField('input', 'Enter Text');" type="text" size="31" value="Enter Text" />
<body>
</html>
This gives me a "Uncaught ReferenceError: clearInputField is not defined" error and I'm not sure why...? I dont know if this is a coding or browser based issue (FF 3.6) but when i click on a input box i want it to clear its current default value, that works, but when i refresh my browser the default value doesn't come back, here's what i have. Code: function clearMe(theText) {
if (theText.value == theText.defaultValue) {
theText.value = ""
}
}
<input type="text" name="searchBar" id="searchBar" value="Search Here" onblur="restoreMe(this)" onclick="clearMe(this)" />
Anyone able to help me sort this? <------------------------- -edit- Nevermind <------------------------- Functions: O_o Code: function write_client_data()
{
clearLine();
var msg = document.getElementById("textbar").value;
msg = document.getElementById("hide").value + " says: " + msg;
var url = "process.php";
var uri = "msg=" + msg;
ajax1.open("GET", url + "?" + uri, true)
ajax1.send(null);
}
function check_log_size()
{
var myform = document.getElementById("form1");
var input = myform.elements["size"];
var val = input.getAttribute("value");
var url = "size.php";
var uri = "sz=" + val;
ajax3.open("GET", url + "?" + uri, true);
ajax3.onreadystatechange = function()
{
if(ajax3.readyState == 4 && ajax3.status == 200)
{
if(ajax3.responseText == false)
{
}
else if(ajax3.responseText == true)
{
updateChat();
get_initial_size();
}
}
}
ajax3.send(null);
}
function get_initial_size()
{
var url = "init.php";
ajax4.open("GET", url, true);
ajax4.onreadystatechange = function()
{
if(ajax4.readyState == 4 && ajax4.status == 200)
{
var myform = document.getElementById("form1");
var input = myform.elements["size"];
input.setAttribute("value", ajax4.responseText);
}
}
ajax4.send(null);
}
function updateChat()
{
var url = "update.php";
ajax5.open("GET", url, true);
ajax5.onreadystatechange = function()
{
if(ajax5.readyState == 4 && ajax5.status == 200)
{
var newmsg = ajax5.responseText;
var box = document.getElementsByTagName("div").item(1);
box.innerHTML += "<p>" + newmsg + "</p>";
scroller();
}
}
ajax5.send(null);
}
function scroller()
{
var container = document.getElementById("chatbox");
var maxTop = container.scrollHeight - container.clientHeight;
var aoe = container.scrollHeight - container.clientHeight - 150;
if(container.scrollTop < aoe)
{
//what should I do here? O_o
}
else
container.scrollTop = maxTop;
}
function clearLine()
{
var myForm = document.getElementById("form1");
var element = myForm.elements["textbar"];
element.setAttribute("value", "");
}
Chat page: Code: <?php
include_once('globals.php');
session_start();
if(empty($_SESSION['user']))
{
echo 'YOU ARE NOT AUTHORIZED'.'<br /><br />'.'<a href = "login.php" /> Click here To login </a>'.'<br />'."$www";
exit();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ChatRoom v1</title>
<link rel="stylesheet" type="text/css" href= "css/chat.css" />
<script type="text/javascript" src="js/client.js"></script>
<script type="text/javascript">
get_initial_size();
setInterval("check_log_size()", 1000);
</script>
</head>
<body bgcolor="#CCCCFF" >
<form action="logout.php" method="post" name="form2" id="form2">
<input name="logout" type="submit" id="logout" value="Logout Now" />
</form>
<h1 style="color:#CCCCFF"> POSITION </h1>
<h1 style="color:#CCCCFF"> POSITION </h1>
<h1 style="margin-left:670px"> Chatroom v1.0 </h1>
<div id="pos">.</div>
<div id = "chatbox">
</div>
<div id = "users"><em>Users Online:</em></div>
<div align="center">
<form id="form1" name = "form1" method="post" action="#">
<br /><input name="textbar" id="textbar" type="text" value="" size="60" />
<br /><input type="button" name = "snd" id="snd" value="Send Message" onclick="write_client_data();" />
<input name="size" type="text" id="size" value = "" />
<input type="hidden" id="hide" name="hide" value="<?php echo $_SESSION['user'] ?>" />
</form>
</div>
</body>
</html>
Why doesn't my clearLine function work. I tried several different ways to access but it won't clear the textbar. Anyone see anything wrong? ;o i was wondering what event would clear an input field that has a value in it... so a user can type their own value.... any examples? I need some help as this is driving me crazy. I have a onblur, focus with this code for the columns of footer filter. Code: $("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
I am clearing the input fields with this. Code: $("input:button").click(function(e) { $('#col1').val('');
$('#col2').val('');
$('#col3').val('');
$('#col4').val('');
$('#col5').val('');
Including a reset of the filters, but won't bore with that, it works, the filters for the columns are all released and reset. My issue is the tfoot fields are cleared just fine, but remain blank. The onblur values do not refill the fields until I click in, then click out of the input field. Do I need to adjust for the clearing of the input field in the original focus and onblur? Or do I need a better reset of the the .val('') statement with a tweak to let the onblur function to show. Thanks, any help really appreciated. Tom Hi all can someone guide me (total JS newbie) on this presumably pretty easy task? I have a "parent" page with some text inputs in it (a form). This is what I am after: -when the user clicks a link it pops open a new window via JS - "child" (this is working). -in the "child" window there are also some text inputs (another form) (done). -when the user changes the value for 'testChild_textInput_4' in the child window, then I want it to automatically set this same value, to effectively overwrite, what is currently in 'testParent_textInput_2' in the parent window. Presumably this involves an onChange event, but it is also OK with me if the needful (the text input's value in the parent window being overwritten) happens upon the child window's form submit. If anyone can show me either trick, I would be thrilled! I set up a test page to make this all easy to talk about: http://www.yellow-turtle.com/testDumpMe_parent.html Please let me know! Thanks! -John I am trying but I can't figure it out, let say you select something on your select values, after selecting that value, how can you dynamically put that value on an input box?
Hello, I am trying to change the value of #name and #category inputs based on the value of select. A friend gave me the code below, but I can't get it to work. Thanks so much for your help Code:
<script type="text/javascript">
$('#Gift_Type').change(function(){
if ($(this).val() == 'Monthly'){
$('#name').val('Partnership')
$('#category').val('Partnership')
} else {
$('#name').val('Donation')
$('#category').val('Donations')
}
})
</script>
Code: <SELECT NAME="sub_frequency" ID="Gift_Type" onchange="OnSelectionChanged (this)"> <OPTION VALUE="1m">Monthly</OPTION> <OPTION VALUE="">One Time</OPTION> </SELECT> Code: <input type="text" id="name" name="name" value="Partnership" /> <input type="text" id="category" name="category" value="Partnership" /> I use this code in a form that posts to two different destinations, I use JavaScript to achieve it. Code: <SCRIPT type="text/javascript">
function submitTo(where) {
document.form.action = where;
document.form.submit();
}
</SCRIPT>
<FORM action="" method="post" name="form">
<DIV>
<INPUT onClick="return submitTo('1.html')" type="button" value="1">
<INPUT onClick="return submitTo('2.html')" type="button" value="2">
</DIV>
</FORM>
I am still wanting to do is the same thing, but with drop down menu's (SELECT) instead of INPUT. Is there anyone clever that can think of a solution? I'm still trying to work on it, but haven't thought of anything up yet.. allright, so with this funtion what happens is that the content of the input gets posted on div with a "ul" in it . the only thing is that is actually posting everything, even when it has nothing, it posts the blank value. How could i make it NOT post anything if the input value is blank ? ... I tried to add an iff , but its not working... =[ any Guidance pls? Code: <script type="text/javascript">
$(document).ready(function(){
$("form#postbar_add_post").submit(function() {
var addcontentbox = $('#addcontentbox').attr('value');
$.ajax({
type: "POST",
url: "postear.php",
data:"addcontentbox="+ addcontentbox,
success: function(){
$("ul#wall").prepend("<li>"+addcontentbox+"</li>");
$("ul#wall li:first").fadeIn();
document.postbar_add_post.addcontentbox.value='';
}
});
return false;
});
});
</script>
postbar_add_post = form name addcontentbox = text input name or ... should I try from the php file ? ... Any sugestions/helps/guidance/ideas are kindly appretiated I have an existing form with radio buttons and a text input field: <input type="radio" name="recurringEnd" value="yes"> End after <input type="text" name="numberOccurrences" size="1"> occurrences <input type="radio" name="recurringEnd" value="date"> End on <input type="text" name="endDate" size="8"> My client now wants it setup so that if the text field is filled in, the radiobox is automatically selected. Any help on this would be greatly appreciated as I am not a JS programmer. Hi there, I am a new javascript guy - struggling a bit but marching on - The following code works fine to set a form field - Code: document.getElementById("ZS_Land").value = (empLand.innerHTML);
However, I changed to form field into a select with option list, and I need it to set an option from the select now - the select has the same name/id as the field had, but is not working Any ideas how I do that ? Many thanks in advance Glorifindal Hi Guys i am a complete novice at ajax or javascript. I have been studying php for a while now and i know that, i am now starting php oop and that going well but i have never done anything like this. Anway i am creating a booking system which at the end of the process asks who supplied your voucher which they then select a supplier. The issue i have is my client wants it so if groupon is selected then an input text box should appear so that the user can input a security code from groupon. So basically it is Code: <select name="supplier" id="supplier"> <option value="">please select supplier</option> <option value="Groupon">Groupon</option> <option value="KGB Deals">KGB Deals</option> <option value="Other">Other</option> </select> So if value="Groupon" then Code: <input type="text" name="security" id="security" /> should appear next to it. Could someone please help me as the page cant refresh as it will lose its data which would have taken the user about 10 minutes to fill out Thanks in advance I have a search form and added the "Clear All" Button functionality...but it clears the last part of the search form display preferences....how do I only clear the checkboxes at the top of the form only and not at the bottom of the form between the <DIV> tags? I have attached a copy of the JSP page. Hi, what would be the best way to have a hidden array of possible text directed at a textarea and then if something is not within that array "onfocus", a certain select option is chosen within that form? Thanks Hello all, I have a page which has a form and also one iframe in the same. there is a button on the parent form. when the button is clicked, i am submitting the iframe and parent both. forms are getting submitted. but when i do print_r for iframe values, it is blank below is the code Parent page: Code:
<?
print "<pre>";
print_r($_POST);
print "</pre>";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function validate(){
document.getElementById('mainform').submit();
window.frames['iframe1'].document.forms[0].submit();
}
//-->
</SCRIPT>
<BODY>
<FORM METHOD=POST ACTION="" name='mainform' id='mainform'>
<TABLE>
<TR>
<TD>Name</TD>
<TD><INPUT TYPE="text" NAME="Name_VC"></TD>
</TR>
<TR>
<TD>Address</TD>
<TD><INPUT TYPE="text" NAME="Address_VC"></TD>
</TR>
<TR>
<TD colspan=2><INPUT TYPE="button" name="proceed" value="Save" onClick="validate();"></TD>
</TR>
</TABLE>
</FORM>
<iframe src="test1.php" id='iframe1'></iframe>
</BODY>
</HTML>
iframe page : test1.php Code: <? print "<pre>"; print_r($POST); print "</pre>"; ?> <form name='mainform2' id='mainform2' method='post' action=''> Roll number : <INPUT TYPE="text" NAME="Rollnum" value=''> Age: <INPUT TYPE="text" NAME="Age_IN" value=''> </form> Please tell me what is my mistake or how can i achieve values of all 4 fields Million thanks I've got no knowledge/experience of javascript, but i'm pretty competent with html and css. I've put together a site for my University radio statio, and i'd like to have a section that displays the show name thats broadcasting at the time. Can anyone point me towards a script, or tutorial, that might help me out? Thanks in advance! |
|||||||