How would I .click this button? - javascript

I'm trying to press this button, this is the information from the inspect
<form action="?p=casino" method="post">
<input type="hidden" name="game" value="6">
<input type="submit" value="Play" class="button">
</form>
In other button presses I could simply do
var missionButton = document.getElementById(CrimeID); //CrimeID is the ButtonID from the /crimes page/ variables at the top of this script.
missionButton.click();
CrimeID is "Form1" so I was able to just select form1 and .click but I'm not able to do that with this one because there isn't a form id or anything and it's specific to the value (I need it to be 6) that's shown in the snippit.

There are many ways to select the <input type="hidden" name="game" value="6"> tag in JavaScript (is that what you want, right?).
If you want to use vanilla (ie pure) JavaScript, without JQuery, you can do:
var inputs = document.getElementsByTagName('input');
for(var i=0; i<inputs.length; i++) {
if(inputs[i].getAttribute('name') === 'game' && inputs[i].getAttribute('value') === '6') {
var buttonYouWant = inputs[i];
}
}
buttonYouWant.click();
However, I would advise you to use JQuery if you can, because the implementation is far easier. Please check https://jquery.com/ for more.

Related

Disabling a Form using Javascript under condition of "yes or no"

I have this form with Yes or No question in a radio button style to indicate whether such form has been filled out and submitted before. I want to disable this form using Javascript if the answer is "yes", per user's answer.
The "yes" would indicate that the form has already been submitted before and therefore re-filling out of the form is not allowed. This is to attempt to stop double or multiple submission.
Any advise will be greatly appreciated.
Dawn26
I might use an onchange function attached to the "Yes" radio button to either hide the form or remove it from the page altogether. Your markup might look similar to this:
<form id="formId">
<input type="radio" value="Yes" onchange="YourClass.disableForm()"/>
...
</form>
And the javascript:
var YourClass = function() {
return {
disableForm : function() {
document.getElementById("formId").setAttribute("style", "display: none;");
}
};
}();
You can create a function that disables all form controls other than the checkbox based on whether it's selected or not. This doesn't stop duplicate submission, so you will still need to handle that at the server. You can also hide the controls if you like, but just disabling them is probably sufficient.
You may also want to put up a message to explain why the form controls are disabled.
function checkDisabled(target) {
var form = target.form;
var elements = form.elements;
var disable = target.checked;
// Check every control in the form
for (var i=0, iLen=elements.length; i<iLen; i++) {
// Don't disable the checkbox
if (elements[i] != target) {
// Disable (or not) based on whether checkbox is checked
elements[i].disabled = disable;
}
}
}
Some test markup:
<label for="dateTime">Date and time<input id="dateTime" name="dateTime">
<br>
<span class="screenTip">YYYY-MM-DD hh:mm:ss</span>
</label>
<form>
Have you submitted this form before?
<input type="checkbox" name="hasBeenSubmitted" value="1" onclick="checkDisabled(this)">
<br>
Foo: <input type="text" name="foo">
<br>
Bar: <input type="text" name="bar">
<br>
<input type="submit">
</form>

selection multiple radio button by java script using button id

all the radio button names are to be same. so i want to call using their using id. is it valid to call them by id? if it is please help me about it.
function selectAll( prefix, set ) {
var form = document.forms[0], //Get the appropriate form
i = 0,
radio;
while( radio = form[prefix + ++i] ) //Loop through all named radio# elements
for( var j = 0; j < radio.length; j++ ) //Loop through each set of named radio buttons
if( radio[j].value == (set ? "yes" : "no") ) //Selector based on value of set
radio[j].checked = true; //Check that radio button!
while($row=mysqli_fetch_assoc($result))
{
echo"<tr><td>{$row['roll']}</td>
</td><td></td><td></td><td></td><td>
<td><input id='file' type='radio' name='radio[$i]' value='Yes'>YES</td>
</td><td></td><td></td><td>
<td><input type='radio' name='radio[$i]' value='No'>NO</td></tr>";
$i++;
}
Try something like this: give each "Yes" radio button unique id, loop through them and set checked property to true:
`function selectAll()
{
for(i = 1; i < 10; i++)
{
var id = "file" + i;
var element = document.getElementById(id);
element.checked = true;
}
}`
And your php code:
`echo "<tr><td>$row</td>
</td><td></td><td></td><td></td><td>
<td><input type='radio' name='radio$i' id='file$i' value='Yes'>YES</td>
</td><td></td><td></td><td>
<td><input type='radio' name='radio$i' value='No'>NO</td>`</tr>";`
Of course as others suggested the best/quicekst is to use jquery.
If your Main focus is to select all the radio button you can give a class name for the radio button and make it get checked on button click event.
we will sugesst to use jquery instead of javascript.
You just have to include one jquery library and can jquery code at any place of your javascript code.
As jquery is advanced form of javascript and is easy to use. so all the task will better perform in jquery by selecting simply radio button class and than checked them.
<div id="radioList">
<input type="radio" class="check" />
<input type="radio" class="check" />
<input type="radio" class="check" />
<input type="radio" class="check" />
<input type="radio" class="check" />
</div>
below jquery wll help
$('.check').prop("checked", true)
or
$('#radioList input:radio').prop("checked", true)

get button value javascript expression language

I have a sumbit button gets his value from an expression language in foreach jstl as showin below ,I want when click three buttons get their values to the three hidden input respectively,but when run this code returns the first value in expression language
<script>
function myfunction()
{
if(document.getElementById('demo1').value=""){
document.getElementById('demo1').value=document.getElementById('btn').value;
}else if(document.getElementById('demo2').value=""){
document.getElementById('demo2').value=document.getElementById('btn').value;
}else
{
document.getElementById('demo3').value=document.getElementById('btn').value;
}
}
</script>
<html>
<form:form action="Search" method="post">
<input type="hidden" name="answer1" id="demo1">
<input type="hidden" name="answer2" id="demo2">
<input type="hidden" name="answer3" id="demo3">
<c:forEach var="item" items="${group.subGroups}">
<input id="btn" type="submit"
value="${item.subGroupName}" onclick="myfunction()">
</c:forEach>
<form:form>
</html>
First of all, testing for equality is made using ==not = which is used for assigning values. So
if(document.getElementById('demo1').value=""){
[...]
}
becomes
if (document.getElementById('demo1').value == "") {
[...]
}
And then, if you have multiples buttons output by your JSTL forEach (the <input id="btn"...> ones), you must provide multiple ids or use another way of referring to them; otherwise, how can the browser know which button you are trying to access ?
The other way would be something like :
function myfunction(element)
{
if (document.getElementById('demo1').value == ""){
document.getElementById('demo1').value = element.value;
} else if (document.getElementById('demo2').value == ""){
document.getElementById('demo2').value = element.value;
} else {
document.getElementById('demo3').value = element.value;
}
}
[...]
<input type="submit" value="${item.subGroupName}" onclick="myfunction(this)">

How to know which radio is checked from a fieldset

I have the following code:
<fieldset id="dificuldade">
<legend>Dificuldade:</legend>
<input type="radio" name="dificuldade" value="facil"> Fácil </input>
<input type="radio" name="dificuldade" value="medio"> Médio </input>
<input type="radio" name="dificuldade" value="dificil"> Difícil </input>
</fieldset>
<fieldset id="tipo">
<legend>Tipo de jogo:</legend>
<input type="radio" name="Tipodejogo" value="somar"> Somar </input>
<input type="radio" name="Tipodejogo" value="subtrair"> Subtrair </input>
<input type="radio" name="Tipodejogo" value="dividir"> Dividir </input>
<input type="radio" name="Tipodejogo" value="multiplicar"> Multiplicar </input>
</fieldset>
<input type="button" value="Começa" id="button" ></input>
</form>
and here is the jsfiddle with both the html and the js http://jsfiddle.net/3bc9m/15/ . I need to store the values of the 2 fieldset so I, depending on the values picked can generate a game, but my javascript isn't returning any of them. What is wrong? I've been told that JQuery is much easier but i can't use it.
Your code on jsFiddle seems to be working fine for the most part. The only thing was that the elements output and output2 don't exist on the page.
So this code that was supposed to display the selected values wasn't working:
document.getElementById('output').innerHTML = curr.value;
document.getElementById('output2').innerHTML = tdj.value;
The part that actually retrieves the selected values is working fine.
Just add those two elements to the page, like this:
<p>Selected Values:</p>
<div id="output"></div>
<div id="output2"></div>
An updated jsFiddle can be found here.
EDIT
If a radio button from only one of the sets is selected, the code fails. You could use this code to find the selected values instead:
document.getElementById('button').onclick = function() {
var dif = document.getElementsByName('dificuldade');
var tip = document.getElementsByName('Tipodejogo');
var difValue;
for (var i = 0; i < dif.length; i++) {
if (dif[i].type === "radio" && dif[i].checked) {
difValue = dif[i].value;
}
}
var tipValue;
for (var i = 0; i < tip.length; i++) {
if (tip[i].type === "radio" && tip[i].checked) {
tipValue = tip[i].value;
}
}
document.getElementById('output').innerHTML = difValue;
document.getElementById('output2').innerHTML = tipValue;
};​
An updated jsFiddle is here.
Consider this post that adresses the issue. It shows a few javascript methods as well as how you would use it in jQuery.
How can I check whether a radio button is selected with JavaScript?
Is there a specific reason you want to break it down by fieldset instead of directly accessing the radio buttons by name?

Validate form with checkboxes using Javascript

I have a set of checkboxes in a form as follows:
<form name="form1" onsubmit="return window.Validate()" method="post" action="myprog.cgi">
<div id="filters">
<input name="One_f" type="checkbox"> No. 1<br>
<input name="Two_f" type="checkbox"> No. 2<br>
<input name="Three_f" type="checkbox"> No. 3<br>
</div>
<div id="Colors">
<input name="Red" type="checkbox"> Red<br>
<input name="Blue" type="checkbox"> Blue<br>
<input name="Green" type="checkbox"> Green<br>
</div>
<div id="Button">
<input name="Submit" value="Submit" type="submit">
</div>
</form>
I want to write a function Validate in Javascript that would see whether any of the checkboxes in the div id
filters is checked. If none of them is checked, it should show an alert box and prevent the cgi from
getting executed. The checkboxes in the div filters all have their names ending in _f, if that helps.
How do I write such a function?
Here's a jQuery solution, I'll add a plain JS one in a few moments.
$('form[name="form1"]').on('submit', function(e) {
if(!$('#filters input:checkbox:checked').length) {
e.preventDefault();
alert('Please select at least one filter.');
}
});
This codes does not require the onsubmit inline event.
Since you are not familiar with jQuery I'll explain it more thoroughly:
$('form[name="form1"]') creates a jQuery object containing all elements matching the selector. It would be faster if you gave your form id="form1" and used $('#form1')
.on() binds an event handler. The first argument passed to the callback function is a wrapped event object which we'll need to prevent the form from being submitted if necessary.
$('#filters input:checkbox:checked') selects all checked checkboxes that are children of #filters. :checkbox and :checked are pseudo-selectors which will only match checkboxes that are currently checked)
.length is the number of elements in the jQuery object - if nothing is checked it's zero
e.preventDefault(); prevents the default action of the event from being executed, i.e. the form will not be submitted.
Usually you would wrap the whole code with $(document).ready(function() { ... }); to make it execute as soon as the DOM is ready - if you put the <script> tag containing the code after the </form> tag of your form, it's not necessary though.
If you really want a plain JS solution, try this:
function Validate() {
var container = document.getElementById('filters');
var checked = 0;
for(var i = 0; i < container.childNodes.length; i++) {
var elem = container.childNodes[i];
if(elem.tagName == 'INPUT' && elem.type == 'checkbox' && elem.checked) {
checked++;
}
};
if(checked) {
return true;
}
alert('Please select at least one filter.');
return false;
}

Categories

Resources