I am working through an assignment and I have run into a problem that is weird to me and that I have no idea how to solve.
It is hard to explain but hopefully I'll be able to explain it well enough for someone to understand.
I am working with HTML forms (radio buttons, check boxes, select boxes, text boxes) and my teacher gave us tasks to do with the HTML in javascript.
I have been getting through the tasks but after a certain point, when I try to declare an object and pull some HTML from the forms, it says it is "null". However, if I put it at the top of the page it will work but then it cancels out anything under it. (i know this sounds confusing but maybe seeing some code might help..)
<html>
<body>
<script language="javascript">
<!--
function fred ()
{
option1=document.f1.zooanimal.option1
if(document.f1.game1.checked||document.f1.game2.checked||document.f1.game3.checked||document.f1.game4.checked)
{
return true
}
else
{
alert("Must Select at least ONE Checkbox Value!!!")
}
if (document.f1.zooanimal.selectedIndex=option1);
{
alert("Must Select Option other than default value!");
}
bigtextstr=document.f1.bigtext.value
bigedit=bigtextstr.replace(/ /g,"+")
bigedit2=bigedit.replace(/[\r\n]/g , "")
document.write("Characters in Text Area Before Edits="+"<br>")
biglen=bigtextstr.length
document.write(biglen+"<br>")
document.write("Characters in Text Area After Edits="+"<br>")
newbiglen=bigedit2.length
document.write(newbiglen+"<br>")
}
-->
</script>
<p>
<form name="f1">
<br>
Name <input type="text" name="nametext" size="30" value="First Last"><p>
List your favorite things to do <P><textarea name="bigtext" rows="5" cols="40">default value</textarea>
<p>What is your favorite animal to see at the zoo?
<select name="zooanimal">
<option name= "option1" selected="yes">default value
<option name="option2">elephants
<option name="option3">giraffes
<option name="option4">tigers
<option name="option5">seals
</select>
<p>
What is your favorite color?<br><p>
blue <input name="rb" type="radio" value="blue" checked> green <input name="rb" type="radio" value="green">
pink <input name="rb" type="radio" value="pink"> yellow <input name="rb" type="radio" value="yellow"> red <input name="rb" type="radio" value="red"> black <input name="rb" type="radio" value="black"></p>
Which of these games do you play?<br><p>
Starcraft <input name="game1" value="Starcraft" type="checkbox"> World of Warcraft <input name="game2" value="WorldofWarcraft" type="checkbox">
League of Legends <input name="game3" value="LeagueofLegends" type="checkbox"> none <input name="game4" value="none"
type="checkbox"><P>
<p><input type="button" value="EDIT AND REPORT" onClick="fred()">
<p>
<p>
</form>
</body>
</html>
Now looking at the script part, everything works up until that point but if i try to add any other form referencing after that, it says its null. I am very confused and have been working on this for several, several hours. Can someone please help?
When referencing [singular] objects, you should be fetching them using getElementById('elementid') or getElementsByName('elementname')[0], not attempting to delve through parent 'nodes' through to the desired element.
Also place the JavaScript either in the head of the document or at the bottom of the body. These are the best places for scripts that shouldn't run onload ;)
Additionally, be aware 'document.write' will write over the entire document. You should place a <p> in your page, give it a unique id...
<p id="unique_id_alerts"></p>
And write into it like so:
document.getElementById('unique_id_alerts').innerHTML = 'Output goes here.';
or if you want to get data from HTML element
you can use
jQuery("#ElementId").text();
Related
Hi I have two ratings fields on my page, when the first rating is checked and I check the second one, the first one is unchecked. It's not a problem in back-end because the value of the ratings is already saved but for the visitors it's a problem because the stars disappears.
Is there a way in javascript or jQuery to say : if this field is check it remains check ?
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<fieldset class="rate">
<input id="5-stars-1" type="radio" name="firstRate" value="5" />
<label for="5-stars-1">5</label>
<input id="4-stars-1" type="radio" name="firstRate" value="4" />
<label for="4-stars-1">5</label>
</fieldset>
<fieldset class="rate2">
<input id="5-stars-2" type="radio" name="secondRate" value="5" />
<label for="5-stars-2">5</label>
<input id="4-stars-2" type="radio" name="secondRate" value="4" />
<label for="4-stars-2">5</label>
</fieldset>
Do you have any idea ?
If you need more infos or more extract from my code don't mind to ask !
Alright so thanks to Rory and Sathish, the answer is really simple :
Radio are designed to be checked once at a time so I couldn't do what I wanted, instead I simply need to switch to checkboxes and the problem is solved !
Thanks again !
I am using selenium with python to write the code. I am looking to pull the information from a text box. The box auto fills as other information is being filled out. Inspecting the box gives the following code:
<input type="tel" autocomplete="off" name="amount" step="any" class="form-
control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"
placeholder="" tw-focusable="" show-decimals="$ctrl.showDecimals" tw-number-
input-formatter="" ng-change="$ctrl.changedAmount()" ng-
model="$ctrl.ngModel" ng-disabled="$ctrl.ngDisabled" disabled="disabled"
style="">
The issue is that there is already another input box that has the name "amount", so I can't do a simple selection by name. I am thinking this would require me to use a CSS selector but everything I have tried so far has not worked. Please let me know what I can try.
Looks like you need to use CSS or XPath locators.
Its hard to tell how exactly you can find that element since you haven't provided a source of the entire page but here are some tips.
In the worst case when you cant find any combination of attributes that will uniquely identify the element you need to rely on dom nodes hierarchy, i.e. in order to find first input on the following page:
<!DOCTYPE html>
<html>
<head>
<title>Dummy page</title>
</head>
<body>
<div>
<div>
<input type="text">
</div>
<p>
<input type="text">
</p>
<input type="text">
</div>
</body>
</html>
You can use XPath locator that might look similar to this one:
//div/div/input
But that's the worst case, usually you can use more flexible locators based on element attributes that less likely to be affected by page structure modifications. Let's say each of our inputs from the page above has "name" and "disabled" attributes.
<div>
<div>
<input name="input1" disabled="" type="text">
</div>
<p>
<input name="input1" disabled="disabled" type="text">
</p>
<input name="input2" disabled="" type="text">
</div>
Then we can find first input using the following locator:
//input[#name="input1" and #disabled=""]
Hope that helps.
I'm currently building a table with several cells containing a radio with a series of textboxes.
I want each radio to make a textbox appear when clicked as well as the textbox label. Here is something that's working when knowing id for label or radio (the problem is reduced to what's inside one table cell):
<div data-role="fieldcontain" data-theme="c" id="quests'+id+'">
<fieldset data-role="controlgroup" data-type="horizontal">
<label>Question?</label>
<input type="radio" name="radio1" id="+QuestionID+_1" value="1" />
<label for="'+QuestionID+'_1">Yes</label>
<input type="radio" name="radio1" id="+QuestionID+_0" value="0" />
<label for="'+QuestionID+'_0">No</label>
</fieldset>
<input type="text" name="textarea" style="width:80%; display:none;" id="comment_+QuestionID+"><label for "comment_+QuestionID+" class="labelhide" id="Test1">Test</label>
<input type="text" name="textarea1" style="width:80%; display:none;" id="comment_+QuestionID+"><label for "comment_+QuestionID+" class=labelhide id="Test2">Test</label>
<br />
</div>
and here is the JS
$('input[type="radio"][name="radio1"]').on('change', function() {
$('input[type=text]').toggle($.trim(this.value)=='1');
document.getElementById("Test1").style.display = 'inline';});
http://jsfiddle.net/Onysius/5WF25/2/
I'd like to have the same kind of behavior for the radio except I want it to toggle on only the 1st next textbox with its label without having to enter the corresponding name or id of the radio (table is generated by a python script with many textboxes under many radios so I don't want to create a specific function for each radio), textbox or label. The overall shape as to stay the same also (namely textbox below radio).
Is there a way to do that with a general form JavaScript (additional css is permitted-it currently uses a none display option for label class) ? To be clear my only trouble right now are the last 2 lines in the JS (I could easily set no name for the radio in the first line to apply it to any radio in the table) I don't actually know how to target just the next textbox after the radio with its associated label.
Any help will be greatly apreciated.
I think you need to do something these lines to inject the textarea you want dynamically next to the item and retain the the name for tracking what comments goes to which radio and not having to create a textarea for each radio:
HTML:
<div data-role="fieldcontain" data-theme="c" id="quests'+id+'">
<fieldset data-role="controlgroup" data-type="horizontal">
<label>Question?</label>
<input type="radio" name="radio1" value="1" />
<label for="'+QuestionID+'_1">Yes</label>
<input type="radio" name="radio1" value="0" />
<label for="'+QuestionID+'_0">No</label>
</fieldset>
</div>
Javascript:
$('input[type="radio"]').on('change', function() {
var name=$(this).attr('name')
var html='<input type="text" name="textarea" style="width:80%;" id="comment_'+name+'"><label for "comment_'+name+'">Test</label>';
$('input[name="'+name+'"]:last').next('label').after(html);
});
Demo:
http://jsfiddle.net/SzjL2/
This is probably a stupid way of doing what I want to do, so a more elegant solution to the bigger problem is definitely appreciated! However, the specific problem I am encountering is this:
I am processing a form with javascript. The form structure is as follows:
Name (text, also hidden value)
Preference (checkbox): Green, Purple (user can check both)
Time (Dropdown): AM, PM, Midnight
<FORM>
<SECTION>
Jane Doe:
<INPUT type="hidden" name="user[]" id="user[]" value="Jane_Doe" />
<INPUT type="checkbox" name="preference[]" id="preference[]" value="green" /> <INPUT type="checkbox" name="preference[]" id="preference[]" value="purple" />
<SELECT name="time[]" id="time[]">
<OPTION value="AM">AM</OPTION>
<OPTION value="PM">PM</OPTION>
<OPTION value="Midnight">Midnight</OPTION>
</SELECT>
</SECTION>
<SECTION>
John Jacob:
<INPUT type="hidden" name="user[]" id="user[]" value="John_Jacob" />
<INPUT type="checkbox" name="preference[]" id="preference[]" value="green" /> <INPUT type="checkbox" name="preference" id="preference" value="purple" />
<SELECT name="time[]" id="time[]">
<OPTION value="AM">AM</OPTION>
<OPTION value="PM">PM</OPTION>
<OPTION value="Midnight">Midnight</OPTION>
</SELECT>
</SECTION>
<INPUT type="button" Value="SUBMIT" onclick="function(form_script)"/>
</FORM>
Depending on a prior action by the user, a list of names is generated, with Preference and Time needing to be filled in.
The form is then submitted and a mySQL table will be populated according to the user's response using PHP coding.
I am currently at a loss to how to store the form responses with Javascript. As you can see from the coding, each <SECTION> contains the exact same coding structure.
Ideally, I'd like to store each form element within an array, (e.g. user['Jane_Doe', 'John_Jacob']) when the form is submitted, and pass that to the php script. But, I'm not sure how to create these arrays from the form elements, and would appreciate help.
I hope my question is clear.
Alternatively, if there are better ways of processing this form without using javascript arrays, I would definitely be interested in the solution!
assuming the id of your form is "form", to grab all the data from the form you will need to do this (you will need to include jquery to be able to perform this action) :
var form_data = $("#form").serialize();
I'm trying to use Ryan Fait's custom checkboxes. These are much more readable than the standard checkboxes, but clicking on them does not run the associated onClick functions. Any advice will be appreciated. The relevant portion of my code follows:
<p style="font-family:arial; font-size:large">
<input type="checkbox" class="styled" id="level-0" type="radio" value="0"
onClick="count();"> 0 (ages 5-7)
<input type="checkbox" class="styled" id="level-1" type="radio" value="1"
onClick="count();" checked> 1 (beginner)
<input type="checkbox" class="styled" id="level-2" type="radio" value="2"
onClick="count();" checked> 2 (easy)
<input type="checkbox" class="styled" id="level-3" type="radio" value="3"
onClick="count();" checked> 3 (intermediate)
<input type="checkbox" class="styled" id="level-4" type="radio" value="4"
onClick="count();"> 4 (challenging)
<input type="checkbox" class="styled" id="level-5" type="radio" value="5"
onClick="count();"> 5 (hard)
<input type="checkbox" class="styled" id="level-all" type="radio" value="6"
onClick="all_levels();"> All
<input id="available" type="button" style="background-color:white; border:2px;
font-family:arial; font-size:large" value="??"> </p> <br>
From Styling Checkboxes and Radio Buttons With CSS and JavaScript on Ryan Fait's site:
How does it work?
In a nutshell, the JavaScript looks for every form element with
class="styled" on it; hides the real form element; sticks a span tag
with a CSS class on it next to the element; and, finally, mouse events
are added to the span that handles the visual stages form inputs go
through when they are clicked.
Your inline onClick handlers are not firing because your checkboxes aren't actually being clicked. Ryan explicitly says that it "hides the real form element; sticks a span tag with a CSS class" ... so you are actually clicking on the <span> that Ryan's code inserted; the real checkbox is hidden.
Later in the article, Ryan says outright:
onChange and other JavaScript events
This script utilizes JavaScript's onChange and other events. Because
these events can only be used once, if you want to add more functions
to an event, you will need to call them from inside my script.
You will need to call them from inside my script
Take your onClick= out of the <input> tags; add your code to his code -- you'll have to figure out which bit of your code to call from his code, since I see you're doing different things from your onClicks.
You should also take your style="..." out of your tags and use a stylesheet, but that's a separate issue.