|
JavaScript - Indexof And Textrange.select()
Hi,
I'm trying to match a text string within a textarea node and then use a text range to set the users cursor highlighting over the word.My code for this is as follows: Code:
function doHighlight(theWord, textAreaElement)
{
var text = textAreaElement.value;
var theIndex = text.indexOf(theWord);
setCaretPos(textAreaElement, theIndex, theIndex+theWord.length);
}
function setCaretPos(obj, start, end)
{
var range = obj.createTextRange();
range.moveStart('character', start);
range.moveEnd('character', end - obj.value.length);
range.select();
}
I have a text area with the following html: Code: <TEXTAREA>blah blah sausage Frank Jones</TEXTAREA> (ie there are four lines visible to the user, the 3rd is blank). And I call the doHighlight method with 'blah blah', 'sausage' and 'frank jones' respectively. However the highlighting isnt working quite right - when I try to highlight 'blah blah', it highlights 'blah bl', when I try to highlight 'sausage' it highlights 'ausa' (the 2nd-5th characters) and when I try to highlight 'frank jones', it highlights 'nk jones'. This code seems to work fine when there is only a single line of text in the text area though - so I'm guess it's something to do with newline characters. Can anybody point me in the right direction as to how to fix this bug please? Thanks. Similar TutorialsThis is a snippet from a project I'm working on involving XML DOM, but the question is really about javascript. This is the problematic code. Code:
else if (nodeOccurance.IndexOf('each:') == 0) {
. . .
}
I want the if statement to be true if the value of the variable "nodeOccurance" begins with "each:" For some reason, it's just stopping my whole script and doing nothing. Any help? Thanks, Julian Hi, I am trying to build a bookmarklet to use on the swiss legislation website. All the pages are available in several languages and I want to be able to switch with one button from french to german and from german to french. As an example, the URLs are as follow for the same page: in French: http://www.admin.ch/ch/f/rs/311_0/index2.html in German: http://www.admin.ch/ch/d/sr/311_0/index2.html So I built quite easily two bookmarklets to switch FR-DE and DE-FR: Code: javascript: var str = window.location.pathname;str = str.replace("f/rs", "d/sr");window.location = str;
Code: javascript: var str = window.location.pathname;str = str.replace("d/sr", "f/rs");window.location = str;
But when I try to get a single script by using if/else, I cannot manage to have the "else" part working: Code: javascript: var str = window.location.pathname;
if (location.pathname.indexOf("d/rs") < 0) {
str = str.replace("f/rs", "d/sr");
window.location = str;
} else {
str = str.replace("d/sr", "f/rs");
window.location = str;
}
Thinking it might have to do with str.replace, I tried an easier variant, but even this one does not work, the "else" part is never called: Code: javascript: var str = window.location.pathname;
if (location.pathname.indexOf("d/rs") < 0) {
str = str.replace("f/rs", "d/sr");
window.location = str;
} else {
alert('no');
};
I would appreciate any help on the matter... thanks in advance, RJ Hello there I'm trying to build a simple little bot that you can ask questions. I'm using the indexOf method but I'm not sure if this is the best option for what I'm trying to do. If you type 'hello' or 'how are you' it answers. Any other input results in 'Dreadfully sorry but I didn't catch that. Say again?'. Is there a way that I can search input for certain words or combinations of words and trigger a single answer? Any help appreciated. <!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>Bot</title> <script type="text/javascript"> function bot(go){var a = go.getElementsByTagName('input');var q = a[0];var t = q.value.toLowerCase();document.go.reset();if(t.indexOf('hello')!=-1){document.getElementById('bot').innerHTML = "Hello to you.";return false;}if(t.indexOf('how are you')!=-1){document.getElementById('bot').innerHTML = "I am functioning within acceptable parameters, thank you.";return false;};go.action=document.getElementById('bot').innerHTML = "Dreadfully sorry but I didn't catch that. Say again?"; return false;}; </SCRIPT> </head> <body onLoad="document.go.q.focus()"> <div align="center"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <form name="go" onsubmit='return bot(go)' id="go" action=""><input name='q' type='text' /><input name='' type='hidden' /></form> <p> </p><div id="bot" align="center"></div> </div> </body> 0 down vote favorite share [g+] share [fb] share [tw] I have a fairly large program that I have simplified to show the problem that I am having. I have 2 div's under which I have an image and some text. When I hover on the image, the jQuery hover over image event fires. Through all this, I am able to get the Id's of both the images & their parent div's. However, when I try to get the index value of the Id's in an array, it always returns -1 ie... not found. Can you please help. The code is enclosed below. I am new to javascript & jQuery and hence the need of some help. Maybe the solution is very trivial. Thanks in advance. Regards, sbguy <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> var input_array = new Array("input1_Id", "input2_Id"); var div_array = new Array("div1_Id", "div2_Id"); window.onload=function(){ jQuery.ready(); img_hover_event_handler(); } //________________________________________________ function img_hover_event_handler() { var input_id = ""; var div_id = ""; var input_index, div_index; $("input.Lrollover").hover( function() { input_id = new String(this.id); input_index = new String(input_array.indexOf(div_id)); div_id = new String($(this).closest('div').attr('id')); // id of the parent div div_index = new String(div_array.indexOf(div_id)); alert(input_id + ", " + input_index + ", " + div_id + ", " + div_index); }, function() { }); } </script> </head> <body> <div id="div1_Id"> <input class="Lrollover" id="input1_Id" type="image" src="images/LGbtn_off.png" alt="Image1" /> <p id="myp1_Id">"Hello World 1"</p> </div> <br><br><br> <div id="div2_Id"> <input class="Lrollover" id="input2_Id" type="image" src="images/LGbtn_off.png" alt="Image2"/> <p id="myp2_Id">Hello World 2"</p> </div> </body> </html> hi all, my indexof() function is not being recognized when I enter an email address for an unsubscribe form I have on one of my pages. Additionally, the confirmation message is also not showing up when the email address IS valid. Here is my code that I am using on a PHP page: PHP Code: function Unsubscribe() { var IsValid = document.getElementById("email").value; alert(IsValid.indexOf("@")); exit; if (document.getElementById("email").value.length == 0 || IsValid.indexOf("@")) == -1) { alert("Enter a valid email address"); exit; } else { <?php $handle = @fopen("../logs/unsubscribes.txt", "a"); fputs($handle, $_POST["email"] . " " . "\r\n"); fclose ($handle); ?> alert(IsValid &&" has been unsubscribed."); <?php if (! $_POST["email"]) { //DO NOTHING } else { header("Location: http://www.google.com/"); } ?> } } //--> </script> </head> <body> <form action="" method="post" name="frm" onsubmit="Unsubscribe()"> <center><br /> Enter Your Email Address:<br /> <input type="text" id="email" name="email" /> </center> <p> <label> <center><input type="submit" id="unsubscribe" value="Unsubscribe Me" /></center> </label> </p> </form> </body> </html> to those PHP experts, I am aware of the RegEx function for validation, but I don't understand it, which is why I don't use it (in case anyone points that out). The other thing that is problematic is that the PHP code is automatically using HEADER() regardless of "email"'s value Hi there! OK I need a little help as I'm not sure how to integrate this function into my form. First of all I should explain that my form doubles as a Google Search box. If you select the Google Search radio button it submits the input text to Google. It also defaults to Google if anything else other than "red", "green" or "blue" are entered. Now what I'd like to do is add a function so that if someone enters "purple is my favorite color" it recognizes the "purple" part of the string using something like .indexOf('purple'); and calls something like if(function==-1) { theForm.action = "Other choice "+ q.value; . How can I add this to my form? Thank you for any help. My form code: Code: <script>
function convert(theForm){
var els = theForm.getElementsByTagName('input');// store inputs
var q = els[0], color = els[1];
if(els[4].checked){// submit to google
theForm.action = 'http://www.google.com/search';
return true;
};
color.value = "Chosen "+ q.value +" color";
switch(q.value){// check the query
case 'red':
case 'green':
case 'blue':
location.href = color.value;
return false;
break;
default:
theForm.action="http://www.google.com/search";
break;
};
return true;
};
</script>
<form name= "myform" onsubmit='return convert(this)'> <input name='q' type='text' />
<input name='color' type='hidden' /> <input type='submit' value=" Enter " />
<br />
<input name="searchType" type="radio" value="" checked="checked" > <label for="all"> My Form </label>
<input name="searchType" type="radio" value="google" onclick="document.myform.action='http://www.google.com/search';" />
<label for="google"> Google Search </label></form>
I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code:
function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}
function valChange(){
var firstList = document.getElementById("emailaddress");
var secondList = document.getElementById("subject");
while(secondList.hasChildNodes())
secondList.removeChild(secondList.childNodes[0]);
switch(firstList.value){
case "1":{
secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
secondList.appendChild(createOption("Other", Other));
break;
}
case "2":{
secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
secondList.appendChild(createOption("Report Spam", Report Spam));
secondList.appendChild(createOption("Report Harassment", Report Harassment));
secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
break;
}
// ....
default:{
secondList.appendChild(createOption("Please select from the first list", ""));
break;
}
}
}
window.onload = valChange;
this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ Hey chaps, hope someone can help with this: I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables: // tbl_main_colour: Code: ID, NAME 1, Red 2, Blue 3, Green // tbl_shade_colour: Code: ID, NAME, FK_MAIN_COLOUR_ID 1, Light Red, 1 2, Dark Red, 1 3, Light Blue, 2 4, Dark Blue, 2 5, Light Green, 3 6, Dark Green, 3 What I'm after is something to filter the second select option, after the first select option has been chosen // Select 1: Code: Red // Select 2: Code: Light Red Dark Red I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated. Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear). I need some advice on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <form name = "form1"> <fieldset> <legend>Fruit or Veggie</legend> <select name = "S1"> <option name = "fruit">Fruit </option> <option name = "veggie">Veggie</option> </select> <select name = "S2" </select> </fieldset> </form> <script language="JavaScript" type="text/javascript"> ??? </script> </body> </html> Hi JS Experts, I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data 1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table) 2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103). How can I accomplish the above? Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2. For Example: If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100. If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200 Any help would be really appreciated. Thanks Vinny Hey Guys When a user changes the select list called "reason_code_master" I need the uodatecodes() function to update all the other select list with the id of "reason_codes" with the same . How can I do this. <select size='1' onchange="updatecodes()" name='reason_code_master'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> Ok so I'm making this form which when a selection is made in one box it will run through the javascript(function getMgmtHours), and update the div(mgmthours). Then another box shows up allowing another selection to be made which runs through the javascript(function getDays) and updates another div(mgmtdate). My problem is that when I use the second box to run through javascript, it overwrites what shows up in the first div (mgmthours) when it should be updating a different div (mgmtdate). Any ideas what I can do to get it update the relevant div and not overwrite the other one? Here is part of the javascript I have in my page head: Code: function getMgmtHours(str)
{
if (str=="")
{
document.getElementById("mgmthours").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("mgmthours").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getmgmthours.php?dist="+str,true);
xmlhttp.send();
}
function getDays(str)
{
if (str=="")
{
document.getElementById("mgmtdate").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("mgmtdate").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdates.php?sunday="+str,true);
xmlhttp.send();
}
Here is the HTML/PHP portion being used: PHP Code: echo "<p>"; echo "Submit hours:"; echo "<form>"; echo "<select name='district' onchange='getMgmtHours(this.value)'>"; echo "<option value=''>Select a district:</option> <option value='1'>1</option> <option value='3'>3</option> <option value='4'>4</option>"; echo "</select>"; echo "</form>"; echo "</p>" echo "<p>"; echo "<form action='./hours.php' method='post' onSubmit='return checkMgmtHours'>"; echo "Weekending Day: "; echo "<select name='weekending' onchange='getDays(this.value)'>"; echo "<option value=''>Choose a Date:</option>"; while ($week < 32) { $nextsunday = strtotime("next Sunday"); if ($week > 0) { $timestamp = strtotime("-" . $week . " week", $nextsunday); } else { $timestamp = $nextsunday;} $weekending = date('M. d, Y', $timestamp); echo "<option value='" . $weekending . "'>" . $weekending . "</option>"; $week = $week + 1; } echo "</select>"; echo "<div id='mgmtdate' />"; echo "<div id='mgmthours' />"; echo "</p>"; Edit: Also, after getMgmtHours() runs, I can still use both getDays and getMgmtHours, howeer once I used getDays, I am no longer able to use getMgmtHours w/o refreshing the page. I have a select box that has ~7000 options, that based on a different dropdown select & input field, gets filtered to 0 - 300 entries. I have another select dropdown that has 13000+ options in total for all the ~7000 entries, but each entry may have 1 to 5 options of these 13000. Is there a way to change the options of the last select dropdown based on what the user chooses in the filtered select box? Currently the idea I'm having is to have the browser load all 13000+ items and filter out the ones that don't apply to the currently selected item, but I'm not sure what kind of lag the user would experience while the browser loads & filters through all these items. Any help would be appreciated. Thanks. I've got some directory list boxes on the site I'm working on. I made them big and fixed rather than drop-down so they're easier to use in this context. But I had to enable the "multiple" attribute to make that work. The site has no provision for multiple selections so it's a tad annoying when the search function selects more than one name in the list. It doesn't really affect the site's operation but it could be confusing to some people. Is there a way to make the listbox show multiple selections without allowing multiple selections? Thanks for any help. <select onchange="display.apply(this, this.value.split(','))" multiple="multiple" id="People" name="People" style="border-style: none; height:244px; width:220px; margin-bottom: 15px;"> <option>Loading</option> </select> Hi, I have a select option inside a span, how do i get the select id. Code: <span id="getSelect"> <select id="myselect" name="mySelect" option../> </span> document.getElementById("getSelect").innerHTML; this will give me the whole select object...now how do i get the select id from that. Thanks Hi All, First time user of this forum and need some help please. I have a webpage where I am displaying checkboxes next to rows. I would like to have one checkbox which will select everything. I have written this code but it does'nt seem to work. Can someone advice as to whats wrong here. The HTML code for checkAll checkbox is: Code: <thead> <tr> <th>Select All <input type='checkbox' name='checkall' onclick='checkedAll(frm1);'> </th> The HTML code for each checbox is : Code: <form id="frm1" />
<tbody>
<?php
foreach ($consignment_array as $ct_idx => $consignment)
{
$status = $consignment->getStatus();
$id= $consignment->getId();
?>
<tr class="<?php echo "cls" . $status; ?>">
<td id="c"> <input type=checkbox id= "1" name="deleteConsignments" onclick="row_color(this)" value= <?php echo $consignment->getId(); ?> /> </td>
The javascript is : Code: function checkedAll (frm1) {
alert("in check all");
var aa= document.getElementById('frm1');
if (checked == false)
{
checked = true
}
else
{
checked = false
}
for (var i =0; i < aa.elements.length; i++)
{
aa.elements[i].checked = checked;
}
}
The problem is that its not even going into the Javacript because I dont get the alert. Appreciate the help guys. Thanks. hello, how can I set a selected item of a drop down menu (select in html) knowing its value and given a variable "dropdown" that points to the select ? Thanks Code: <select name="selectme" onChange=""> <option value="layer1name">1</option> <option value="layer2name">2</option> <option value="layer3name">3</option> </select> how can you make a onclick for this to work. So if you cliked the seconde one it would change somthing(i dont care what). 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?
Hi Guys, A bit stuck here and was wondering what you guys think. I have an HTML Select Option with a list of countries. A user saves that page and when he wants to return to the same page later at some point, i would like to populate the countries drop down list with what he entered initially. Is there an easy way to do this? Thanks. |
|||||||