Hi I have an ajax script which validates the users information put into textboxes. This is working fine in Internet Explorer, but in FireFox I get an error in getting the gender from a listbox. I have got the gender to be placed into a hidden textbox, for easier processing. The error I get in FF is
dd is null
[Break on this error] theindex = dd.options[dd.selectedIndex].value;
My function in javascript is below, this is loaded on body load or once the gender selected is changed,
function get_gender()
{
{
var dd = document.getElementById("gender_select");
theindex = dd.options[dd.selectedIndex].value;
thevalue = dd.options[dd.selectedIndex].text;
}
document.getElementById("gender_text").value = thevalue;
}
One other problem I am having is hidding a div box, this works fine in every other browser but not IE. It should only show the div box once an error is given, but in IE the div box is always shown.
I am using this line to do this:
document.getElementById("username_div").style.visibility = "hidden";
Rather than pasting all my code the live page can be viewed at
http://elliottstocks.com/assignment/sign_up/
Ignore the login box, this works fine.
Any comments/help will be appreciated. Thanks alot =)
getElementByID requires the HTML element to have an ID, just a name isn't good enough.
<select name="gender_select" id="gender_select" onChange="get_gender()">
<option>Male</option> <option>Female</option>
</select>
For the null error change:
<select onchange="get_gender()" name="gender_select">
to
<select onchange="get_gender()" name="gender_select" id="gender_select">
document.getElementById is looking for an element in the DOM that has a given id attribute. The reason it works in IE is because it allows selecting by name attribute as well.
For your second problem, you may want to try display = 'none'; for your element. Be aware that this behavior is different from visibility = hidden.
Related
I'm limited to one line because of a Chrome Extension and it's the only one that fits my needs.
The <td> needs to be gone through to the attribute "UserName" to determine if a blocked user needs to be invisible.
I cannot figure this out and I'm really a noob when it comes to Javascript (not my language)
I've tried display:none hidden and style.visibility="hidden".
I've tried w3Schools and searched through Javascript and HTML pages for how to this and while I've got code that does work, it's a script that takes about 8 lines which doesn't work. I may have to ditch it but I figured I've give it one last shot.
document.getElementsByTagName("td")[0].getAttribute("theUserName").value("madmax").style.visible = "hidden";
Expected - The <td> should not show up
Results - It shows up
One line to hide the content:
[...document.querySelectorAll("td[theUserName=madmax]")].forEach(e=>e.style.display = 'none');
To remove the <td>:
[...document.querySelectorAll("td[theUserName=madmax]")].forEach(e=>e.remove());
I am assuming that you to iterate through all <td> elements to search for one with theUserName attribute with value madmax, then make that element invisible. That can be achieved with:
for(TdElement of document.getElementsByTagName("td")) {
if (TdElement.getAttribute("theUserName") == "madmax") {
TdElement.style.visiblity = "hidden";
}
}
Condensed to a single line, this is:
for(TdElement of document.getElementsByTagName("td")) if TdElement.getAttribute("theUserName") == "madmax") TdElement.style.visiblity = "hidden"
This is the source code :
<select name="backgroundcolor" onchange="backgroundColor();">
<option value="200">Red</option>
....
</select>
I tried below code in order to select the "Red" option but it didn't work.
Select dropDown = new Select(driver.findElement(By.name("backgroundcolor")));
dropDown.selectByValue("200");
I'm getting NoSuchElementException Exception
Unable to locate element //*[name='backgroundcolor']
try this
Select select = new Select(driver.findElement(By.name("backgroundcolor")));
select.deselectAll();
select.selectByVisibleText("Red");
perhaps the By.name is the problem, i am used to using something like :
By.xpath("//path_to_drop_down"))
try this, you need to convert the below code to the language you are using
from selenium.webdriver.support.select import Select as WebDriverSelect
element = WebDriverSelect(driver.find_element_by_name('backgroundcolor'))
element.select_by_value('200')
You note that it's possibly a timing issue. If so, you'll need to wait until the element appears on the page. Try this:
By locator = By.name("backgroundcolor");
WebDriverWait wait = new WebDriverWait(driver, 30);
wait.until(ExpectedConditions.presenceOfElementLocated(locator));
Select dropDown = new Select(driver.findElement(locator));
dropDown.selectByValue("200");
I got " Unable to locate element *[name='backgroundcolor'] " error.I solved that problem when firstly I try to reach the iframe which contain that dropdown.It's a timing issue by the way.
wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(theindexofframe));
wait.until(ExpectedConditions.visibilityOfElementLocated(By.name("backgroundcolor")));
You should wait for the iframe to be loaded after that you should wait for the "backgroundcolor" element to be loaded also.After that you can select the value from dropdown like this:
Select dropDown = new Select(driver.findElement(By.name("backgroundcolor")));
dropDown.selectByValue("200");
The title is a little bland but my problem is explained below.
At the moment I currently have a live search:
This does what I want it to do, but of course, that's only possible with a little bit of JS.
Now when you click one of the options it gives you from your search it'd usually take you to a link, but I added the below JS so that it removes all HTML code from it and it appends the selected username from the drop down into a text box.
<script type="text/javascript">
$(document).ready(function(){
$("#livesearch").click(function(){
var value = $(this).html();
var input = $('#append_value');
var content = value;
var text = $(content).text(); //removes all HTML
input.val(text);
});
});
</script>
Now, this is all perfect and everything but there's a problem. When you select one option from the drop down it appends both options to the text box:
Now, this may have something to do with the code above, but I just want whichever option the user has selected to be appended to the text box.
So, for example, I search for the battlefield and I get a result of battlefield1 and battlefield2. If the user selected battlefield2 I want battlefield2 to be placed in the textbox, and vice versa.
I've been trying to do this since 1pm EST so you can trust me when I say I've looked plenty of times for a solution.
Thank you in advance for your help. :)
Edit:
What I'm doing the search with (yes I realize SQL is deprecated):
index.html
<script type="text/javascript">
function lightbg_clr() {
$('#qu').val("");
$('#textbox-clr').text("");
$('#search-layer').css({"width":"auto","height":"auto"});
$('#livesearch').css({"display":"none"});
$("#qu").focus();
};
function fx(str) {
var s1=document.getElementById("qu").value;
var xmlhttps;
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
document.getElementById("livesearch").style.display="block";
$('#textbox-clr').text("");
return;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttps=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttps=new ActiveXObject("Microsoft.XMLHTTPS");
}
xmlhttps.onreadystatechange=function() {
if (xmlhttps.readyState==4 && xmlhttps.status==200) {
document.getElementById("livesearch").innerHTML=xmlhttps.responseText;
document.getElementById("livesearch").style.display="block";
$('#textbox-clr').text("X");
}
}
xmlhttps.open("GET","scripts/search_friends.php?n="+s1,true);
xmlhttps.send();
}
</script>
<input type="text" onKeyUp="fx(this.value)" autocomplete="off" name="qu" id="qu" class="form-control" placeholder="Name of the person or group">
<div class="list-group" id="livesearch"></div>
<input type="text" id="append_valueq">
<script type="text/javascript">
$(document).ready(function(){
$("#livesearch").click(function(){
var value = $(this).val();
var input = $('#append_valueq');
var content = value;
var text = $(content).text();
input.val(text);
});
});
</script>
search_friends.php
<?php
include('../Connections/ls.php'); //script to connect to DB
$s1=$_REQUEST["n"];
$select_query="SELECT * FROM users WHERE Username LIKE '%".$s1."%'";
$sql=mysql_query($select_query) or die (mysql_error());
$s="";
while($row=mysql_fetch_array($sql))
{
$s=$s."
<a href='javascript:void(0)'>".$row['Username']."</a>
" ;
}
echo $s;
?>
This ultimately gives me the result you see in the first image.
I'm realizing now that the problem I'm having is the fact that div has an id of livesearch (<div class="list-group" id="livesearch"></div>), so it's selecting the whole div instead of the actual options in the dropdown...
Try using .val() instead of html() while fetching the value.
There is actually a really simple way to do this.
Since you haven't provided your HTML code, I'll show what I would have done.
You can get the value of the click with:
document.getElementById("dropdown").value();
Make sure you don't include the hashtag/pound sign in the id.
Then, you can apply this value, let's say you call it val, this way:
document.getElementById("textbox").value = val
I've created a JSFiddle that kind-of shows the concept. See if you can get it to work with your own code: https://jsfiddle.net/1j4m1ekc/7/
If the problem persists, just let me know. I'd also like to see your html.
I don't need a solution right away for this as I've found another alternative to do what I want to do, but it would be greatly appreciated in case someone else from the Stackoverflow community has a question similar to this and need a solution. The solution I found is below.
This is still considered a live search but, I created a scrollable container and listed all of the users in that container, so it now looks like this.
Now from that container I found a script online that will filter out any and all users that do not match the input from the search box. The script I found is from here: Live Search and if you want to take a look at a demo as to how the script works, View Demo. So now when I enter a search term into the text box it looks like this
This may not be the greatest solution but it works for me and does what I want it to do. Maybe it'll work for you as well :)
We have the following script which runs on a change to a drop-down - updates the price based on the currency code chosen. This basically gets the value of the drop-down and updates the priceamm and preicecurr fields within the text on the page.
<script>
function run() {
var f = document.getElementById("dropPrice");
priceamm.innerHTML = f.options[f.selectedIndex].value;
var e = document.getElementById("dropPrice");
pricecurr.innerHTML = e.options[e.selectedIndex].text;
}
HTML
<select id="dropPrice" onchange="run()" class="fa-select">
<option value = "a">aaa</option>
<option value = "b">bbb</option>
Question
Now, we would also like to load the drop-down to one of the options (selected) when loading the page (onload). We are able to populate the variables in the text but not the drop-down to show option bbb. In php this is quite easy but we are a bit lost with javascript. We tried something on these lines onload but does not work:
document.getElementById("dropPrice").value = "<?php echo $geo_price ;?>";
With jQuery this is probably easier but once again no luck:
window.onload = function() {
jQuery(document).ready(function($){
document.getElementById('dropPrice').find('option[value=<?php echo $geo_price ;?>]').attr('selected','selected');
});
}
Any help is appreciated. Thanks
The jQuery selector part is incorrect. You are mixing plain JS with jQuery. When you call document.getElementById('dropPrice') a regular DOM element is returned, but then you call find which is a jQuery method to be used on a jQuery element. So, you either need to wrap the first part to return a jQuery element like so:
$(document.getElementById('dropPrice'))
.find('option[value="b"]').attr('selected', true);
Or, select it via jQuery in the first place like:
$('#dropPrice [value="b"]');
However, your first example:
document.getElementById("dropPrice").value = "b";
should work. That makes me wonder if the value that is being echoed by PHP is correct and/or if there are other JS errors being thrown that would cause that code not to run.
I am using simple html code to display a select box when ever i use id attribute for select tag it does not display any item in the list but when ever i remove id attribute it works. but surprisingly the same code works fine in Firefox and Google chrome.
<select id="class_renew" name="class_renew" onchange="class_check()" style="width:310px; height:35px; padding:8px; margin-left:95px;">
<option value="0">Select Your Class</option>
</select>
Help from any one will be appreciated.
Java Script Code
function classInput(data){
var category_vals = document.getElementById("class_renew");
for(var i=0;i<data.length;i++){
category_vals.innerHTML+="<option value='"+data[i].cat+"'>PK-"+data[i].cat+"</option>"
}
}
IDs must match. "class_renew" and "categroy_renew" [sic] are not the same, so of course it won't work ;)
EDIT:
Rather than using .innerHTML, why not do things properly?
category_vals.appendChild(new Option("PK-"+data[i].cat,data[i].cat));
This ensures that you won't have any problems if, for example, any of the items have an apostrophe in them.