ok well this is everything but my problem is very small..
the page is setup, the point system is correct all i need to do is have the inputs show match up to the point system and show the alert associated with it.
the issue is when a user enters commands in the text box's it should alert what there rank is (pro,novice,beginner,noob)
<HTML>
<HEAD>
<script>
function system(){
var point=document.world.system.txt_points.value
var tourn=document.world.system.txt_tourn.value
var level=document.world.system.txt_level.value
var check=document.world.system.txt_check.value
var results=document.world.system.txt_results.value
if ((point>=100000)&&(level>10)&&(tourn>25))
{
results=alert("pro status")
}
if((points>=100000)&&(level>10))
{
alert("Novice")
}
if (point>=100000)
{
alert("beginner")
}
if (points<100000)
{
alert("noob")
}
if (check=true)
{
alert("pro")
}
}
</script>
</HEAD>
<BODY>
<form name="world">
<center>
<table border=3>
</center>
<b>
<th><font size='16'>defined</font></th>
</b>
<th><font size='16'>user input</font></th>
</center>
<tr>
<td>How many points have you earned?</td>
<td>
<input type="textbox" name="txt_points" size='50'id='point'>
</td>
</tr>
<tr>
<td>How many tournaments have you played in?</td>
<td>
<input type="text box" size='50'id='tourn' name='txt_tourn'>
</td>
</tr>
<tr>
<td>highest level</td>
<td>
<input type="text box" size='50'id='level' name ='txt_level'>
</td>
</tr>
<tr>
<td>Have you won atleast 1 tournement</td>
<td
><center>
<input type="checkbox"id='check' name=txt_check>
</center>
</td>
</tr>
<tr>
<td>your world of wizards ranking is </td>
<td><center>
<input type="submit"value ="submit">
<br>
<input type ="text box" name ="txt_results">
</center>
</td>
</tr>
</table>
</center>
</form>
Your HTML is riddled with invalid markup. I've cleaned it up a little bit (it still has issues), and added an onsubmit to the form to call your system function. I modified your system function a bit too. You weren't referring to your variables with the right names all the time. (points instead of point, etc.). Next time, do some typo checking before you post a question or code. Generally one or two typos is accepted as just being overlooked, but yours had a lot. Just a few minutes of looking it over on your part would have gotten you tons closer to begin with.
HTML
<form name="world" method="post" onsubmit="system(); return false;">
<table border=3>
<th><font size='16'>defined</font></th>
<th><font size='16'>user input</font></th>
<tr>
<td>How many points have you earned?</td>
<td>
<input type="text" name="txt_points" size='50' id='point'>
</td>
</tr>
<tr>
<td>How many tournaments have you played in?</td>
<td>
<input type="text" size='50' id='tourn' name='txt_tourn'>
</td>
</tr>
<tr>
<td>highest level</td>
<td>
<input type="text" size='50' id='level' name ='txt_level'>
</td>
</tr>
<tr>
<td>Have you won atleast 1 tournement</td>
<td
>
<input type="checkbox"id='check' name=txt_check>
</td>
</tr>
<tr>
<td>your world of wizards ranking is </td>
<td>
<input type="submit"value ="submit">
<br>
<input type ="text box" name ="txt_results">
</td>
</tr>
</table>
</form>
JAVASCRIPT
function system(){
var point=document.world.txt_points.value;
var tourn=document.world.txt_tourn.value;
var level=document.world.txt_level.value;
var check=document.world.txt_check.value;
var results=document.world.txt_results.value
if ((point>=100000)&&(level>10)&&(tourn>25))
{
alert("pro status")
}
if((point>=100000)&&(level>10))
{
alert("Novice")
}
if (point>=100000)
{
alert("beginner")
}
if (point<100000)
{
alert("noob")
}
if (check==true)
{
alert("pro")
}
}
Related
My previous question is here but it seems that using only window and document cannot get it done. What I want is that when the text from the first row is selected, the first input will be filled. Same for the second row.
javascript - select text in table cell and autofill the input on the same row
https://jsfiddle.net/nrdq71pz/6/
<table>
<tr>
<td>Test code 1</td>
<td>
<input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
</table>
This is jQuery solution. (Actually easier than i thought, i've thought that selection text inside elements can't be reached so easily, but...):
$('td').on('mouseup',function() {
if (window.getSelection){
s = window.getSelection().toString()
}
$(this).next().find('input').val(s);
});
Demo:
$('td').on('mouseup',function() {
if (window.getSelection){
s = window.getSelection().toString()
}
$(this).next().find('input').val(s);
});
td {
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Test code 1</td>
<td>
<input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
<tr>
<td>Test code 3</td>
<td>
<input type='text' id='input3' class="selection" />
</td>
</tr>
</table>
So, point is to put event on cell, and then reach closest input (in your current hTML structure, this works, if you change something, you can modify it, easily, i guess)
I'm having trouble figuring out what you are asking but does this get the job done? When you click "Test code 1" it will fill in the input value to "Hello".
https://jsfiddle.net/nrdq71pz/8/
Html:
<table>
<tr>
<td class="select">Test code 1</td>
<td>
<input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
</table>
jQuery:
$('.select').click(function(){
$('#input1').val("hello")
})
I just noticed your comment on a post above. I think what I did was wrong so take a look at what I did here and tell me which one is closer to what you need. https://jsfiddle.net/nrdq71pz/9/
Problem I have a form that the user fills out (basic things like your name, phone number, email, etc). It has a question that asks the user if you want your suggestion to remain anonymous and the user either selects yes or no.
The following image is what I am talking about:
If the user does not select either of the selections and submits the form, a alert box appears notifying the user to select one.
I am able to color a single radio selection red if the user has not selected either of them. I am able to color both radio selections red like the following:
And here is the function that checks whether or not either of those radio buttons have been selected:
myOption = -1;
for ( i=0; i < SubmitIdea.Anonymous.length; i++ ) {
if ( SubmitIdea.Anonymous[i].checked ) {
myOption = i;
}
}
if ( myOption == -1 ) {
alert( "Do you wish to remain anonymous?" );
SubmitIdea.Anonymous[0].focus();
SubmitIdea.Anonymous[0].style.backgroundColor = "red";
SubmitIdea.Anonymous[1].focus();
SubmitIdea.Anonymous[1].style.backgroundColor = "red";
return false;
}
However, I would like the rectangular background border surrounding both the Yes and No radio selection, not individually. This rectangular border will only occur if neither radio selection has been choosen when the user has submitted their results.
The following is the html:
<form name="SubmitIdea" method="POST" class="h">
<table Border="0" align="center">
<tr>
<td colspan="5"> </td>
</tr>
<cfoutput>
<tr>
<td class="m">Name: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Name" value="" class="a" maxlength="32">
</td>
<td width="50"> </td>
<td class="mm">Today's Date: </font></td>
<td class="mm">#TodaysDt#</td></tr>
</tr>
<tr>
<td class="mm">Department: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Department" value="" class="a" maxlength="32">
</td>
<td width="50"> </td>
<td class="mm">Supervisor Name: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Supervisor" value="" class="a" maxlength="32">
</tr>
<tr>
<td class="mm">Email: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="NomEmail" value="" class="a" maxlength="32" size="25"> <br />
</td>
<td width="50"> </td>
<td class="mm">Phone: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Phone" value="" class="a" maxlength="32">
</tr>
</table>
<table border="0" width="500" align="center">
<tr>
<td class="c" align="center">
Your name will be shared and published along with your suggestion unless you want to remain anonymous. Do you wish to remain anonymous? <input type="radio" name="Anonymous" value="Yes"> <strong>Yes</strong> <input type="radio" value="No" name="Anonymous"> <strong>No</strong>
</td>
</tr>
</table>
</cfoutput>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>Please provide a brief summary of your idea:</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5"></td>
</tr>
<tr>
<td colspan="5">
<textarea name="reason" id="textarea1" cols="6" maxlength="500" class="c"
style="background-color: transparent; color:##000000; font-size:14px;"
onFocus="clearTxt(this)" onkeydown="limitTxtArea(this); cntTxt(this, 500, 'cnt');" onkeyup="limitTxtArea(this); cntTxt(this, 500, 'cnt');"></textarea>
<span id="cnt" style="color:##FF0000">500</span> character(s) remaining.<br /></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>I believe this suggestion will: (check all that apply)</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td class="e"><input type="checkbox" name="Sugg1" value="Improve Productivity/Quality">Improve Productivity/Quality </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg2" value="Improve Process">Improve Process </font></td>
</tr>
<tr>
<td class="e"><input type="checkbox" name="Sugg3" value="Increase Revenue">Increase Revenue </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg4" value="Decrease Expenses/Costs">Decrease Expenses/Costs </font></td>
</tr>
<tr>
<td class="e"><input type="checkbox" name="Sugg5" value="Improve safety in the workplace">Improve safety in the workplace </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg6" value="Improve Customer Service">Improve Customer Service </font></td>
</tr>
<tr>
<td class="e"><input type="checkbox" name="Sugg7" value="Enhance employee satisfaction / corporate culture">Enhance employee satisfaction/<br>corporate culture </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg0" value="Other">Other <input type="text" name="OtherSuggest" value="" class="a" maxlength="32"></font></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>Possible challenges to implementation:</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5">
<textarea name="reasontwo" id="textarea2" cols="6" maxlength="500" class="c"
style="background-color: transparent; color:##000000; font-size:14px;"
onFocus="clearTxtTwo(this)" onkeydown="limitTxtAreaTwo(this); cntTxtTwo(this, 500, 'cnttwo');" onkeyup="limitTxtAreaTwo(this); cntTxtTwo(this, 500, 'cnttwo');"></textarea>
<span id="cnttwo" style="color:##FF0000">500</span> character(s) remaining.<br /></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>What metrics could be used to track results?</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5">
<textarea name="reasonthree" id="textarea3" cols="6" maxlength="500" class="c"
style="background-color: transparent; color:##000000; font-size:14px;"
onFocus="clearTxtThree(this)" onkeydown="limitTxtAreaThree(this); cntTxtThree(this, 500, 'cntthree');" onkeyup="limitTxtAreaThree(this); cntTxtThree(this, 500, 'cntthree');"></textarea>
<span id="cntthree" style="color:##FF0000">500</span> character(s) remaining.<br /><br /></td>
</tr>
</table>
<br />
<table align="center">
<TR>
<TD align="center"><input type="button" value=" Submit " onClick="SubmitMe()" name="SubmitIdeaBtn" style="font-size:14px; font-family:Arial, Helvetica, sans-serif">
</td>
</tr>
</table>
</form>
Thank You
UPDATE
The following is what I did:
document.addEventListener("DOMContentLoaded", function(event) {
document.addEventListener("click", function(clickEvent) {
if (clickEvent.target.id == 'check') {
var anonymousInputs = document.getElementsByName('Anonymous');
var anonymousContainer = document.getElementById('anonymousContainer');
var anonymousSelected = Array.prototype.find.call(anonymousInputs,function(radioInput) {return radioInput.checked;});
if (anonymousSelected) {
anonymousContainer.className = '';
}
else {
if (anonymousContainer) {
alert( "Do you wish to remain anonymous?" );
anonymousContainer.className += 'borderedContainer';
}
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="0" width="500" align="center">
<tr>
<td class="c" align="center">
<div>
Your name will be shared and published along with your suggestion unless you want to remain anonymous. Do you wish to remain anonymous? <span id="anonymousContainer"><input type="radio" name="Anonymous" value="Yes"> <strong>Yes</strong>
<input type="radio" value="No" name="Anonymous">
<strong>No</strong>
</span>
</div>
</td>
</tr>
</table>
<table align="center">
<TR>
<TD align="center"><input id="check" type="button" value=" Submit " onClick="SubmitMe()" name="SubmitIdeaBtn" style="font-size:14px; font-family:Arial, Helvetica, sans-serif">
</td>
</tr>
</table>
So I am not sure what I am doing wrong.
You can put the radio buttons in a container (e.g. a span) and then set the border on the container. See the example below, after clicking the button labeled check.
The snippet uses the hex value for red but feel free to adjust to a different value. Using 'red' as the value may produce varying results across browsers/Operating systems. For more information, refer to the MDN color page.
The snippet also uses Array.find() to determine if any of the radio inputs are checked.
Note:
I originally utilized document.addEventListener() for event delegation and to wait until the DOM was loaded but the OP is using IE 8 or earlier and had issues with that, so I removed that code.
function checkAnonymousSelected(clickEvent) {
var anonymousInputs = document.getElementsByName('Anonymous');
var anonymousContainer = document.getElementById('anonymousContainer');
var anonymousSelected = Array.prototype.find.call(anonymousInputs, function(radioInput) {
return radioInput.checked;
});
if (anonymousSelected) {
anonymousContainer.className = '';
} else {
if (anonymousContainer) {
anonymousContainer.className += 'borderedContainer';
}
}
}
//support IE 8- for OP so do this instead of using document.attachEventListener
//to wait until the DOM is ready and attach event listeners to the buttons...
document.getElementById('check').onclick = checkAnonymousSelected;
document.getElementById('anonymousYes').onclick = checkAnonymousSelected;
document.getElementById('anonymousNo').onclick = checkAnonymousSelected;
.borderedContainer {
border: 3px solid #ff0000;
}
<div>
Your name will be shared and published along with your suggestion unless you want to remain anonymous. Do you wish to remain anonymous? <span id="anonymousContainer"><input type="radio" name="Anonymous" value="Yes" id="anonymousYes" > <strong>Yes</strong>
<input type="radio" value="No" name="Anonymous" id="anonymousNo" >
<strong>No</strong>
</span>
</div>
<button id="check">check</button>
Been trying to do this for days now, and have failed and have searched for examples but not found one yet that has helped.
I want to navigate through a web page by filling in the details and clicking submit programmatically.
the page is as follows:
<form method='post' action='login.php'>
<table>
<tr>
<td>Email Address: </td>
<td ><input type='Text' size='30' name='email'></td>
</tr><tr>
<td>Password: </td>
<td ><input type='password' size='30' name='password'></td>
</tr><tr>
<td colspan=2> </td>
</tr><tr>
<td> </td>
<td align='left'><input type='Submit' value='Log in'></td>
</tr>
<td colspan=2> </td>
<tr><td colspan=2><hr></td></tr>
</table>
</form>
I cant change the above existing web page, So want to include code in a chrome extension written in JavaScript to save me heaps of time at the moment I cant get passed the login page!
I have been a programmer in the distant past but am not fully versed with JavaScript syntax yet..
One of my problems is the form does not seem to have an ID.
Could anyone help?
Thanks for the help so far but I am still struggling so have added more detail.
I have managed to do this submit in IE using VB in the past (from an Excel macro) using:
Sub PressSubmit(IE)
With IE.Document
Set elems = .getElementsByTagName("input")
For Each e In elems
If (e.getAttribute("value") = "Log in") Then
e.Click
Exit For
End If
Next e
IE.Document.all("email").Value = "me#email.address"
IE.Document.all("password").Value = "myPassword"
Call PressSubmit(IE)
But now I need to do the same on Chrome and I am struggling with JavaScript syntax which is new to me is there anyone that could give me a JavaScript version of this, or a better version, that I can learn from by example?
You can use document.querySelector(), Element.querySelector(), attribute selectors to set values atelements, call.click()onelement to submit`
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form method='post' action='login.php'>
<table>
<tr>
<td>Email Address: </td>
<td>
<input type='Text' size='30' name='email'>
</td>
</tr>
<tr>
<td>Password: </td>
<td>
<input type='password' size='30' name='password'>
</td>
</tr>
<tr>
<td colspan=2> </td>
</tr>
<tr>
<td> </td>
<td align='left'>
<input type='submit' value='Log in'>
</td>
</tr>
<tr>
<td colspan=2> </td>
</tr>
<tr>
<td colspan=2>
<hr>
</td>
</tr>
</table>
</form>
<script>
var form = document.querySelector("form[action='login.php']");
var submit = form.querySelector("input[type='submit'][value='Log in']");
if (submit.length) {
form.querySelector("input[name='email']").value = "me#email.address";
form.querySelector("input[type='password']").value = "myPassword";
submit.click();
}
</script>
</body>
</html>
I currently have a table that contains a few values, 2 input fields and a button for each row in that table. What I want to happen is that when I press the button in the third row, the input fields in the third row become disabled. The other rows should remain unaffected. Unfortunately, due to the nature of the program, adding ID's to the inputs and buttons is not possible.
Does anyone know of a good way to go about this?
<tr>
<td>Text A</td>
<td>Text B</td>
<td><input class="editable"></td>
<td>Text C</td>
<td><input class="editable></td>
<td>Text D</td>
<td><button class="disableInput">OK</button></td>
<tr>
I have ~40 rows like this
Also, due to the table constantly autosaving to a database (for the input) the table gets refreshed every ~0.5 seconds
$(tableId).on("click", "button", function(){
$(this).closest("tr").find("input").attr("disabled", true);
})
Since you are using jQuery, you can do something like this:
$(document).ready(function() {
$("table td .btn").click(function() {
if ($(this).closest("tr").find("input").attr("disabled") === "disabled"){
$(this).closest("tr").find("input").removeAttr("disabled", "disabled");
$(this).closest("tr").find("button").text("Disbale");
}
else{
$(this).closest("tr").find("input").attr("disabled", "disabled");
$(this).closest("tr").find("button").text("Enable");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
</tbody>
</table>
You can do this via traversing the DOM.
$('.disableInput').on('click',function(){
var input = $(this).closest('tr').find('input');
var currstatus = input.prop('disabled');
input.prop('disabled',!currstatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
</table>
I need to create a table with two rows and three columns.
<table border="1">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Here I need the second row table data's as a input field like a form. I need to fill them by my own and submit it. How can this be done.
Thank You
if your sending your form to serverside then there is no need to take hidden field. Instead give name attribute to your fields. It will be available on the serverside page.
<form id="FormName" action="server.php">
<table border = "1">
<tr>
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> <input type="text" id="name" name="name" /></td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="button" value="Submit Data" onclick="submitForm()" />
</form>
function submitForm(){
if(false)//check for errors
{
}else{
$('#FormName').submit();
}
}
Create a form
<form name="myform" action="xxx.php">
//create 3 hidden fields here
</form>
HTML
<table border = "1" id="mytable">
<tr>
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="button" value="Submit Data" onclick="submitTableData()" />
On your button click, get the values of each td and assign it to the hidden fields and then call submit
function submitTableData()
{
$('#hidden1').val('value of td1'); //$('#mytable tr:nth-child(2)').find('td:nth-child(1)').text()
$('#hidden2').val('value of td2'); //$('#mytable tr:nth-child(2)').find('td:nth-child(2)').text()
$('#hidden3').val('value of td3'); //$('#mytable tr:nth-child(2)').find('td:nth-child(3)').text()
$('#myform').submit();
}
<form action="submit.php" method="post">
<table width="100%">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
</tr>
</table>
<input type="submit" value="submit" />
</form>
function addForm {
if{
somecodes here if true
}else{
$('variablenamehere') .submit();
}
}
In the cells of the second row just put some inputs:
<tr>
<td><input type="text" name="male"></td>
<td><input type="text" name="female"></td>
<td><input type="text" name="total"></td>
</tr>
When submitting the form, you will have 3 additional parameters: male, female and total in your request which will contain the values.
You can go on even further and - if i understood it right - since you have only numbers, you can specify the input type as being number and, with a small javascript function, you can make the total be calculated automatically.