So I have this javascript code below. I am trying to make it so whenever the user hits cancel on the confirmation box. The previous selected option they have selected becomes reselected. Another option instead of the previous, is if we could have it select option 2 based on value ' A' instead of my current way of selecting option 2 based on the array of radio names.
<script type="text/javascript">
function confirmUnschedule() {
var checked = false;
var element = "";
var inputs = document.getElementsByName('Acceptance');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = true;
element = inputs[i];
break;
}
}
if(checked==true){
if (!confirm('Scheduling will be undone if you change the rating. Are you Sure?')){
inputs[1].checked=true;
};
};
}
</script>
<input type='radio' name='Acceptance' value=' ' checked='checked' onclick='confirmUnschedule()'>option 1
<br/>
<input type='radio' name='Acceptance' value=' A' onclick='confirmUnschedule()'>option 2
<br/>
<input type='radio' name='Acceptance' value=' R' onclick='confirmUnschedule()'>option 3
<br/>
If you let your function return false, the event is aborted and the radio button group returns to previous state.
Edit: use return in the onclick attribute as well.
Html
<input type='radio' name='Acceptance' value=' ' checked='checked' onclick='return confirmUnschedule();'>option 1
<br/>
<input type='radio' name='Acceptance' value=' A' onclick='return confirmUnschedule();'>option 2
<br/>
<input type='radio' name='Acceptance' value=' R' onclick='return confirmUnschedule();'>option 3
<br/>
Javascript
function confirmUnschedule() {
var checked = false;
var element = "";
var inputs = document.getElementsByName('Acceptance');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = true;
element = inputs[i];
break;
}
}
if (checked === true) {
if (!confirm('Scheduling will be undone if you change the rating. Are you Sure?')) {
return false;
}
}
}
jsFiddle = http://jsfiddle.net/ahsjoe0x/
Related
I made a todolist which is taking value from input and add an item from array so when the given value shown in page i want to remove an item form array whn checkbox checked.
Html part :
<input type="text" id="field" placeholder="Type name" />
<button type="submit" onclick="insertitem()">Submit</button>
<p id="para"></p>
javascript part:
var list = [];
var input;
function insertitem() {
input = document.getElementById('field').value;
list.push(input);
DisplayItem(list);
document.getElementById('field').value='';
}
function DisplayItem(data) {
var contain = document.getElementById('para');
contain.innerHTML='';
for ( var i in data) {
contain.innerHTML +="<div><input id='box' onClick='remove()' type='checkbox' /><label>" + data[i] + "</label></div>";
}
}
function remove() {
var check = document.getElementById('box').value;
for ( var i in list) {
if (list[i]!= check) {
}
}
}
Try this with pure javascript :
Array.splice and Array.indexof()
Add with checkbox inside the label tag.
And click event change with remove(this).Then easly find the label
text and match with list array.
contain.innerHTML +="<div><label><input id='box' onClick='remove(this)' type='checkbox' />" + data[i] +
"</label></div>";
}
var list = [];
var input;
function insertitem() {
input = document.getElementById('field').value;
list.push(input);
DisplayItem(list);
document.getElementById('field').value='';
}
function DisplayItem(data) {
var contain = document.getElementById('para');
contain.innerHTML='';
for ( var i in data) {
contain.innerHTML +="<div><label><input id='box' onClick='remove(this)' type='checkbox' />" + data[i] +
"</label></div>";
}
}
function remove(that) {
var check = that.parentElement.textContent;
//that.remove() if you need remove clicked box
for ( var i in list) {
if (list[i] == check) {
list.splice(list.indexOf(check),1);
}
}
console.log(list)
}
<input type="text" id="field" placeholder="Type name" />
<button type="submit" onclick="insertitem()">Submit</button>
<p id="para"></p>
var list = [];
var input;
function insertitem() {
input = document.getElementById('field').value;
list.push(input);
DisplayItem(list);
document.getElementById('field').value='';
}
function DisplayItem(data) {
var contain = document.getElementById('para');
contain.innerHTML='';
for ( var i in data) {
contain.innerHTML +="<div id='remove" + i + "'><label for='box" + i + "'><input id='box" + i + "' onClick='remove(" + i + ")' type='checkbox' />" + data[i] + "</label></div>";
}
}
function remove(targetId) {
var check = document.getElementById('box' + targetId).checked;
if(check){
console.log('Remove box' + targetId);
document.getElementById('remove' + targetId).innerHTML='';
}
}
<input type="text" id="field" placeholder="Type name" />
<button type="submit" onclick="insertitem()">Submit</button>
<p id="para"></p>
I just modified your JavaScript to pass an ID with a number to set each label apart from each other..
I have the following, which shows upcoming matches and allow users to vote who will win
Team names and fixtures are dynamically pulled from db, it is unlikely that number of matches will be the same for each round, thus nr matches vary for each round.
When user made his selection before he clicks submit, I would like to display something like:
You have selected:
Force (Selected) To Win Crusaders(not selected)
Highlanders (Selected) To Win Cheetahs(not selected)
:
I got this working correctly like so:
But Im stuggling to put the "VS" part team not selected in the string. I.E it is easy enough to put the selected teams value in the string but im struggling to get the name from team not selected.
Perhaps this fiddle will give you a better idea to what im trying to achieve:
https://jsfiddle.net/timcoetzee/L9gna8a0/3/
function handleClick() {
// Get all the inputs.
var inputs = makePicks.elements;
var radios = [];
//Loop and find only the Radios
for (var i = 0; i < inputs.length; ++i) {
if (inputs[i].type == 'radio') {
radios.push(inputs[i]);
}
}
myradiovalue = "";
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
if (myradiovalue == "") myradiovalue = radios[i].value
else myradiovalue = myradiovalue + ", " + radios[i].value
}
}
document.getElementById("dispPicks").innerHTML = "YOU HAVE SELECTED " + myradiovalue;
return false;
}
<form name="makePicks">
<label class="green">
<input type="radio" id="x" onclick="handleClick()" name="picks1" value="Chiefs"><span>Chiefs</span>
</label>
<label class="yellow">
<input type="radio" onclick="handleClick()" name="picks1" value="Hurricanes"><span>'Hurricanes'</span>
</label>
<label class="pink">
<input type="radio" name="picks1" value="draw" onclick="handleClick()"><span>Draw</span>
</label>
<br />
<label class="green">
<input type="radio" id="x" onclick="handleClick()" name="picks2" value="Lions"><span>Lions</span>
</label>
<label class="yellow">
<input type="radio" onclick="handleClick()" name="picks2" value="Stormers"><span>'Stormers'</span>
</label>
<label class="pink">
<input type="radio" name="picks2" value="draw" onclick="handleClick()"><span>Draw</span>
</label>
<br />
</form>
<div id="dispPicks"></div>
Any help or advise very much appreciated
function ff() {
var msg = "you have selected:<br/>" ;
var radios = makePicks.querySelectorAll('input[type=radio]');
for(var i = 0; i < radios.length; i++) {
if(radios[i].checked) {
msg += getMessage(radios[i].getAttribute('name')) + "<br/>";
}
}
document.getElementById("dispPicks").innerHTML = msg;
}
function getMessage(nm) {
var rds = makePicks.querySelectorAll('input[type=radio][name=' + nm + ']');
var checked = 0;
for(var i = 0; i < rds.length; i++) {
if(rds[i].checked)
checked = i;
}
if(checked == 2)
return rds[0].value + " (not selected) to draw " + rds[1].value + " (not selected)";
else if(checked == 1)
return "<b>" + rds[1].value + "</b> (selected) to win " + rds[0].value + " (not selected)";
else
return "<b>" + rds[0].value + "</b> (selected) to win " + rds[1].value + " (not selected)";
}
jsfiddle DEMO
I want to remove array item on each click. Onclick of get_values button, displays array items in front of delete button/link. I need to remove those item on each click of delete button. It deletes whole item, but i want one by one. Plz help me. I am new to jquery.
<html>
<body>
<div id="array_container">
<label>Name</label>
<input type="text" name="name1" value="" />
<label>State</label>
<input type="text" name="name1" value="" />
<label>Color</label>
<input type="text" name="name1" value="" />
<input type="button" name="get_value" id="get_value" value="Get Value"/>
</div>
<div id="myDiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--<script src="../js/jquery.min.js"></script>-->
<script type="text/javascript">
$("#get_value").click(function ()
{ //causing error here removed the array in name value
var ListOfArray = [];
var option = $('input:text[name=name1]').map(function()
{
return $(this).val();
}).get().join();
$("input:text[name=name1]").val("");
ListOfArray.push(option);
for (var i= 0; i < ListOfArray.length; i++)
{
alert(i); //alert(ListOfArray.length);
var newList = "<a href='#' onClick='removeArray(" + i + ");'return false;> DELETE </a> " + option + " <br>";
alert(newList); //alert(i);
};
document.getElementById('myDiv').innerHTML += newList;
return true;
});
function removeArray(i)
{
var ListOfArray = [];
alert('after removed array.'+i);
ListOfArray.splice(i,1);
var newList = "";
//console.log(ListOfArray);
for (var i = 0; i < ListOfArray.length; i++)
{ //You refer to option here for element, which should be replaced by proper index of array
alert(ListOfArray.length); alert(i);
newList += "<a href='#' onClick='removeArray(" + i + ");'return false;> DELETE </a> " + ListOfArray[i] + " <br>";
alert(i);
};
document.getElementById('myDiv').innerHTML = newList;
return true;
}
</script>
</body>
</html>
Currently ListofArray is local variable to the onclick handler function and removeArray function cant access it from the outer scope. In addition you have declared a new variable inside removeArray . What you need to do is to keep the ListofArray variable as a single instance which is shared by both the functions.
Like
var ListOfArray = [];
$("#get_value").click(function ()
{ //causing error here removed the array in name value
var option = $('input:text[name=name1]').map(function()
{
return $(this).val();
}).get().join();
$("input:text[name=name1]").val("");
ListOfArray.push(option);
for (var i= 0; i < ListOfArray.length; i++)
{
alert(i); //alert(ListOfArray.length);
var newList = "<a href='#' onClick='removeArray(" + i + ");'return false;> DELETE </a> " + option + " <br>";
alert(newList); //alert(i);
};
document.getElementById('myDiv').innerHTML += newList;
return true;
});
function removeArray(i)
{
alert('after removed array.'+i);
ListOfArray.splice(i,1);
var newList = "";
//console.log(ListOfArray);
for (var i = 0; i < ListOfArray.length; i++)
{ //You refer to option here for element, which should be replaced by proper index of array
alert(ListOfArray.length); alert(i);
newList += "<a href='#' onClick='removeArray(" + i + ");'return false;> DELETE </a> " + ListOfArray[i] + " <br>";
alert(i);
};
document.getElementById('myDiv').innerHTML = newList;
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="array_container">
<label>Name</label>
<input type="text" name="name1" value="" />
<label>State</label>
<input type="text" name="name1" value="" />
<label>Color</label>
<input type="text" name="name1" value="" />
<input type="button" name="get_value" id="get_value" value="Get Value"/>
</div>
<div id="myDiv"></div>
I have this code for multi check-box
HTML:
<fieldset data-role="collapsible">
<legend>Pick one</legend>
<div data-role="controlgroup" id="ZIBI" align="right" >
</div>
</fieldset>
jQuery/JavaScript:
myArray1 = new Array(
"1","2","3","4","5","6"
);
$("#ZIBI").html('');
for (var i = 0; i < myArray1.length; i++) {
row = myArray1[i];
$("#ZIBI").append(
'<label for=' + row + '>' + row + '</label>' +
'<input type="checkbox" name="favcolor" id=' + row + ' value=' + row + '>');
}
$('#ZIBI').trigger('create');
how to check all or uncheck all by pressing any button ?
thanks
In this JsFiddle you'll find a method to check/uncheck all checkboxes within a given div, using a checkbox with id _main:
function checkAll(e){
e = e || event;
var from = e.target || e.srcElement
,cbs = this.querySelectorAll('input'), i=1;
if (/^_main$/i.test(from.id)){
for (;i<cbs.length;i+=1){
cbs[i].checked = from.checked;
}
} else {
var main = document.querySelector('#_main')
,j = cbs.length;
for (;i<cbs.length;i+=1){
j -= cbs[i].checked ? 0 : 1;
}
main.checked = j === cbs.length ? true : false;
}
}
Update
New elements should be added to $(".selector").controlgroup("container") not $(".selector") directly. If you add them to main div, elements won't be styled as a _controlgroup`.
You need to refresh .checkboxradio("refresh") checkbox or radio to apply jQM styles. Another point, .trigger("create") is deprecated as of jQM 1.4 and replaced with .enhanceWithin().
myArray1 = new Array(
"1", "2", "3", "4", "5", "6");
/* remove previous elements */
$("#ZIBI").controlgroup("container").html('');
for (var i = 0; i < myArray1.length; i++) {
row = myArray1[i];
/* add new ones to container */
$("#ZIBI").controlgroup("container").append(
'<label for=' + row + '>' + row + '</label>' +
'<input type="checkbox" name="favcolor" id=' + row + ' value=' + row + '>');
}
/* refresh controlgroup and enhance elements within */
$("#ZIBI").controlgroup().enhanceWithin();
/* check/uncheck on button click */
$("#foo").on("click", function () {
var status = $("#ZIBI [type=checkbox]").eq(0).prop("checked") ? false : true;
$("#ZIBI [type=checkbox]").prop("checked", status).checkboxradio("refresh");
});
Demo
You can try this:
HTML:
<fieldset data-role="collapsible">
<legend>Pick one</legend>
<div data-role="controlgroup" id="ZIBI" align="right" >
</div>
</fieldset>
<input type="checkbox" id="all" value="Toggle" />
jQuery:
$('#all').on('click', function() {
if(this.checked) {
$('#ZIBI').find('input[type=checkbox]').prop('checked', true);
} else {
$('#ZIBI').find('input[type=checkbox]').prop('checked', false);
}
});
Working Fiddle.
I have a form. The user clicks the add button to add another state + text box for that state. When people select a state in the first box, I want it removed from any other select box that may be added so it can not be selected again.
<form action=state.php method=post>
<a href="javascript:addElement();" style='color:blue; text-decoration:underline;'>Add a State </a>
<a href='javascript:removeElement();' style='color:blue; text-decoration:underline;' >Remove </a><br /><br />
<script type="text/javascript">
var intTextBox=0;
//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement() {
intTextBox = intTextBox + 1;
var contentID = document.getElementById('addresscontent');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML = "<select id='u" + intTextBox + "' name=b_state[" + intTextBox + "][statename]/><option value=''>Select a State</option><option value='AK'>AK</option><option value='AL'>AL</option><option value='AR'>AR</option><option value='AS'>AS</option><option value='AZ'>AZ</option><option value='CA'>CA</option></select> <span style='font-size:12px;'>URL (if different) </span><input style='border:1px solid black; ' size=60 type='text' id='u" + intTextBox + "' name=b__state[" +intTextBox + "][url] /><br>";
contentID.appendChild(newTBDiv);
}
//FUNCTION TO REMOVE TEXT BOX ELEMENT
function removeElement() {
if(intTextBox != 0) {
var contentID = document.getElementById('addresscontent');
contentID.removeChild(document.getElementById('strText'+intTextBox));
intTextBox = intTextBox-1;
}
}
</script>
<div id="addresscontent"></div>
</div>
<input type=submit value='go'>
Here are the steps you need:
1) Gather all of the relevant select fields into a node list:
document.getElementById("myBigForm").getElementsByTagName("select");
2) Now you need to loop through these select fields. For each select field you need to loop through the option elements
3) Perform a remove child if the option contains a certain value.
var removeState = function (x) {
"use strict";
var a = document.getElementById("myBigForm").getElementsByTagName("select"),
b = a.length,
c = 0,
d = [],
e = 0,
f = 0;
for (c = 0; c < b; c += 1) {
d = a[b].getElementsByTagName("option");
e = d.length;
for (f = 0; f < e; f += 1) {
if (d[f].value === x) {
a[b].removeChild(d[f]);
break;
}
}
}
};