I try to use two checkboxs with a value = "on". The other one is for rember after submit a form. Every time i click on this checkbox, they will always send "on".
What i do wrong ?
Here is my code
var rdt = {
updateScroll: function() {
alert('klick scroll:' + gbi('scrollit').value);
gbi('main').removeChild(gbi('icontent'));
var ifr = document.createElement('iframe');
ifr.id = 'icontent';
ifr.src = gbi('urlinput').value;
ifr.scrolling = (gbi('scrollit').value == 'on') ? 'yes' : 'no';
gbi('scroll_hid').value = (gbi('scrollit').value == 'on') ? 'on' : 'off';
gbi('main').appendChild(ifr);
rdt.resizeView();
}
}
function gbi(iD) {
return document.getElementById(iD);
}
<input type="checkbox" id="scrollit" onclick="rdt.updateScroll()" checked>
<input type="hidden" name="scroll" id="scroll_hid" value="<?php echo $scroll ?>">
The parameter $scroll can predifine over URL, but the result was the same if i use it or if i dont use it.
This is because you are getting its value and its value is on. You have to get the value when it is checked like:
var value = null;
$('#scrollit').click(function(){
if($(this).is('checked'))
{
value = $(this).val();
}
});
In this case you will get its value when it is checked otherwise null
The primary intention of checkbox is to make user that the option to be checked or unchecked it is not intended to send values
You can refer this link for more details
Here is the main thing
The HTML input element allows you to select a
single value for submission in a form (or not).
A solution for your problem is as follows you can check checkbox's current status ie checked or not by using following
based on your code
gbi('scrollit').checked
var rdt = {
updateScroll: function() {
alert('klick scroll:' + gbn('scrollit').value);
gbi('main').removeChild(gbi('icontent'));
var ifr = document.createElement('iframe');
ifr.id = 'icontent';
ifr.src = gbi('urlinput').value;
ifr.scrolling = (gbi('scrollit').value == 'on') ? 'yes' : 'no';
gbi('scroll_hid').value = (gbi('scrollit').value == 'on') ? 'on' : 'off';
gbi('main').appendChild(ifr);
rdt.resizeView();
}
}
function gbi(iD) {
return document.getElementById(iD);
}
function gbn(name) {
var x = document.getElementsByName(name);
var i;
var element;
for (i = 0; i < x.length; i++) {
if (x[i].type == "checkbox") {
element = x[i];
}
}
return element;
}
<input type="checkbox" name="scroll" id="scrollit" onclick="rdt.updateScroll()" checked>
<input type="hidden" name="scroll" id="scroll_hid" value="<?php echo $scroll ?>">
add a small loop make the code more clear for me and works already
updateScroll:
function() {
gbi('main').removeChild(gbi('icontent'));
var ifr = document.createElement('iframe');
ifr.id='icontent';
ifr.src=gbi('urlinput').value;
if (gbi('scrollit').value=='on' && gbi('scroll_hid').value!='on')
{ ifr.scrolling='yes'; gbi('scroll_hid').value='on';}
else
{ ifr.scrolling='no'; gbi('scroll_hid').value='';}
//ifr.scrolling=(gbi('scrollit').value=='on')?'yes':'no';
//gbi('scroll_hid').value=(gbi('scrollit').value=='on')?'on':'off';
gbi('main').appendChild(ifr);
rdt.resizeView();
},
rotate: function() {
rdt.w = parseInt(gbi('icontent').style.width);
rdt.h = parseInt(gbi('icontent').style.height);
gbi('icontent').style.width=gbi('icontentfoot').style.width = rdt.h+'px';
gbi('icontent').style.height = rdt.w+'px';
}
Related
I am trying to get values Y and N on change switchery button, but with the following piece of codes whatever I've written, I am getting 'Y' all the time. please help
var lang_dis_button = document.querySelector('.lang-disable');
var lang_disable = new Switchery(lang_dis_button, { color: '#ED5565' });
var changeStatus = document.querySelector('.lang-disable')
, changeField = document.querySelector('#disabled_status');
changeStatus.onchange = function() {
if (changeStatus.checked) {
changeField.innerHTML = 'Disabled';
} else {
changeField.innerHTML = 'Active';
}
};
<input type="checkbox" class="lang-disable" name="disabled" id="disabled" value="Y"
<?php IF ($disabled == 'Y') { ?> checked><label id="disabled_status">Disabled</label><?php }
else { ?><label id="disabled_status">Active<?php } ?></label>
I have the following script. After a user clicks submits I want to redirect the user to the same page and populate the drop down and input box with parameter values from the url. Unfortunately they are not populating once the redirect completes. I also need to strip off * from the FilterMultiValue parameter so that the textbox has the orginal value entered?
I've checked the parameter values using an alert function and that works?
<script type="text/javascript">
function getUrlParams() {
var paramMap = {};
if (location.search.length == 0) {
return paramMap;
}
var parts = location.search.substring(1).split("&");
for (var i = 0; i < parts.length; i ++) {
var component = parts[i].split("=");
paramMap [decodeURIComponent(component[0])] = decodeURIComponent(component[1]);
}
return paramMap;
}
function RedirectUrl() {
var tb = document.getElementById("tbSearch").value;
var cs = document.getElementById("sfield").value;
var url = "";
if (tb != "") {
url = "FilterName=" + cs + "&FilterMultiValue=*" + tb + "*";
window.location.href = "mypage.aspx?" + url;
var params = getUrlParams();
alert(params.FilterName);
document.getElementById("sfield").value = params.FilterName;
document.getElementById('tbSearch').value = params.FilterMultiValue;
}
else {
return false;
}
}
function ClearUrl() {
window.location.href = "mypage.aspx";
document.getElementById("sfield").value = "";
document.getElementById('tbSearch').value = "";
}
</script>
Search Field:
<select id="sfield">
<option selected value="Title" >Title</option>
<option value="Body">Body</option>
</select>
Search Text:
<input type="text" id="tbSearch" />
<input type="button" id="btnSearch" value="Search" onclick="return RedirectUrl();" />
<input type="button" id="btnClear" value="Clear" onclick="return ClearUrl();" />
window.location.href = "mypage.aspx?" + url;
reloads the page, which will result in all code after that not beeing executed.
What you want to do is to add code for pageload and check if the parameters are given, then populate the textbox.
Something like:
window.addEventListener('load', function(){
var params = getUrlParams();
if(typeof params.FilterName !== 'undefined'){
// removes the first and the last char from the string
var t = params.FilterMultiValue.substr(1, params.FilterMultiValue.length-2);
document.getElementById("sfield").value = params.FilterName;
document.getElementById('tbSearch').value = t;
}
});
I am making a text based game for school and I am stuck with trying to set a variable as an text input. What I would like to happen is the player type start into the input and it do what is inside of the if statement. However from there I would like the player to enter a username and then it set the variable of "name" to what they input but with out it saving the name as "start".
//js
var name = "";
var beginBeenTo = false;
if (beginBeenTo == false) {
if (input == "START") {
beginBeenTo = true;
page = page + 1;
healthPoints = 25;
soundEveningBreeze.play();
$("#welcome_message").show().insertBefore("#placeholder").delay(3000).fadeOut(3000);
$("<br><p class='text'>You there, what is your name?</p>").hide().insertBefore("#placeholder").delay(7000).fadeIn(3000);
if (input != "" || namingBeenTo == false) {
name = input;
}
}
}
document.getElementById("print_name").innerHTML = name;
Quite simply, watch for some event (keyup in my case), check if the input value is START, if so ask for a username.
var started = false;
var username = '';
$('input').on('keyup', function(){
var tmpValue = $(this).val();
if(started){
username = tmpValue
}
if(tmpValue === 'START') {
started = true;
$(this).val('')
$(this).attr('placeholder','Username')
}
$('#username').text(username)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="username"></span>
<br>
<input type="text" placeholder="Type START to play">
it could be done with use of function like this :
var name = "";
$("form").submit(function() {
var input = $("#command_input").val().toUpperCase();
if (input == "START") {
name = $("#input_form").val();
}
}
document.getElementById("print_name").innerHTML = name;
you were missing one of #(hashtag)
And this code would work
Thanks & Cheers
Guys I Need Help I have the Code what can Empty the Value of Single Input by ID i have 2 Input lets say Start time and End time When i Click on All Day it should be Empty Start Time and End Time When i Check this Button...
Here is my Code....
<Input type="text" id="startime" />
<input type="text" id="endtime" />
<input type="check" id="remove" />
<script type="text/javascript">
var imgInput = document.getElementById('startime'),
remove = document.getElementById('remove'),
val = imgInput.value;
remove.onchange = function() {
if (this.checked) {
imgInput.value = "";
} else {
imgInput.value = val;
}
}
</script>
Help Appreciated...
For a checkbox, you should not use the onchange event handler, onclick will do what you need:
remove.onclick = function() {
if (this.checked) {
imgInput.value = "";
} else {
imgInput.value = val;
}
}
However it looks like you might be trying to save the value if it gets cleared so it can be repopulated, if this is the case then you also need to update val before you clear the text box:
remove.onclick = function() {
if (this.checked) {
val = imgInput.value;
imgInput.value = "";
} else {
imgInput.value = val;
}
}
I've looked through many posts to no avail. I have the following in a simple form where one of the products changes based on the number of checkboxes checked. It works in every browser except IE. What am I doing wrong?
<body>
<script type="text/javascript">
function check(){
"use strict";
var count = 0, x=0, checkboxes=document.signup.getElementsByClassName("styled");
for(;x<checkboxes.length; x++){
if(checkboxes[x].checked){
count++;
}
}
if(count<3) {
document.getElementById("variable").value = "1";
}
else if (count == 3){
document.getElementById("variable").value = "74";
}
else if (count == 4){
document.getElementById("variable").value = "75";
}
else if (count == 5){
document.getElementById("variable").value = "76";
}
}
</script>
<form name="signup" id="signup" method="post" action="/subscribers/signup.php">
<input type="checkbox" id="variable" name="product_id[]" value="" class="styled"></input>product 1 - variable</div>
<input type="checkbox" id="same" name="product_id[]" value="3" class="styled"></input>product 2
<input type="checkbox" id="same2" name="product_id[]" value="2" class="styled"></input>product 3
<input type="checkbox" id="same3" name="product_id[]" value="4" class="styled"></input><div class="check-title">product 4
<input type="checkbox" id="same4" name="product_id[]" value="44" class="styled"></input><div class="check-title">product 5
Continue</td></tr>
</form>
</body>
All versions of IE prior to IE9 do not support getElementsByClassName(). You will need to use some sort of substitute.
Instead of this piece of your code:
checkboxes = document.signup.getElementsByClassName("styled");
I would suggest using this:
checkboxes = document.getElementById("signup").getElementsByTagName("input")
getElementsByTagName() is widely support in all versions of IE. This will obviously get all input tags, but only the checkboxes will have checked set so you should be OK.
If you need to filter by class, then you could do the whole thing this way:
function check() {
"use strict";
// initialize checkbox count to 0
var count = 0, item;
// get all input tags in the form
var inputs = document.getElementById("signup").getElementsByTagName("input");
// loop through all input tags in the form
for (var i = 0; i < inputs.length; i++) {
// get this one into the local variable item
item = inputs[i];
// if this input tag has the right classname and is checked, increment the count
if ((item.className.indexOf("styled") != -1) && item.checked) {
count++;
}
}
// get object for result
var obj = document.getElementById("variable");
// check count and set result based on the count
if(count < 3) {
obj.value = "1";
} else if (count == 3) {
obj.value = "74";
} else if (count == 4) {
obj.value = "75";
} else if (count == 5) {
obj.value = "76";
}
}
IE doesnt have method getElementsByClassName... you can try to define it:
if(document.getElementsByClassName == undefined) {
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) {
retnode.push(elem[i]);
}
}
return retnode;
}
};