change redirect location onClick. - javascript

I'm trying to change a redirect link using check boxes that append to the URL and a button that uses the changed URL. Im still a beginner to JavaScript and am a little lost as to where i'm going wrong.
My code:
<html>
<form>
<div class="element1">"
<input type="checkbox" name="name1" id="id1" value="val1" class="hidden" ></label></div>
<div class="element2">"
<input type="checkbox" name="name2" id="id2" value="val2" class="hidden" ></label></div>
<div class="element3">"
<input type="checkbox" name="name3" id="id3" value="val3" class="hidden" ></div>
<div class="element00">
<input type="button"onclick="myFunction(calculatedUrl());" name="button1" id="itemA" value="valA" ></label></div>
</form>
<script>
function calculatedUrl(){
var totalString=""
var link1="some text"
var link2="more text"
var link3="something else"
if(document.getElementById("id1").checked == true){
var totalString = totalString.concat(link1);
}
if(document.getElementById("id2").checked == true){
var totalString = totalString.concat(link2);
}
if(document.getElementById("id3").checked == true){
var totalString = totalString.concat(link3);
}
return totalString
}
function myFunction(id){
var original="http://myoriginalurl"
var addition=id
var new=original.concat(addition)
//for testing
window.alert(new)
document.getElementById("test1").innerHTML= new;
//for the real redirecting not active for now
//window.location=new
}
</script>
</html>

<html>
<form>
<div class="element1">"
<input type="checkbox" name="name1" id="id1" value="val1" class="hidden" ></label></div>
<div class="element2">"
<input type="checkbox" name="name2" id="id2" value="val2" class="hidden" ></label></div>
<div class="element3">"
<input type="checkbox" name="name3" id="id3" value="val3" class="hidden" ></div>
<div class="element00">
<input type="button"onclick="myFunction(calculatedUrl());" name="button1" id="itemA" value="valA" ></label></div>
</form>
<script>
function calculatedUrl(){
var totalString=""
var link1="some text"
var link2="more text"
var link3="something else"
if(document.getElementById("id1").checked == true){
var totalString = totalString.concat(link1);
}
if(document.getElementById("id2").checked == true){
var totalString = totalString.concat(link2);
}
if(document.getElementById("id3").checked == true){
var totalString = totalString.concat(link3);
}
return totalString
}
function myFunction(id){
var original="http://myoriginalurl"
var addition=id
console.log(id);
var n =original.concat(addition)
//for testing
window.alert(n)
document.getElementById("test1").innerHTML= n;
//for the real redirecting not active for now
//window.location=new
}
</script>
</html>
Currently in your code change the below, new to newurl - new is a reserved word.
function myFunction(id){
var original="http://myoriginalurl"
var addition=id
var newurl =original.concat(addition)
//for testing
window.alert(newurl)
document.getElementById("test1").innerHTML= newurl;
//for the real redirecting not active for now
//window.location=new
}
I dont see a tag with id=test1, so you will get null exception in the console browser. Add a tag based on that and test.
I have added a snippet, please check.

<html>
<form>
<div class="element1">"
<input type="checkbox" name="name1" id="id1" value="val1" class="hidden" ></label></div>
<div class="element2">"
<input type="checkbox" name="name2" id="id2" value="val2" class="hidden" ></label></div>
<div class="element3">"
<input type="checkbox" name="name3" id="id3" value="val3" class="hidden" ></div>
<div class="element00">
<input type="button"onclick="myFunction(calculatedUrl());" name="button1" id="itemA" value="valA" ></label></div>
</form>
<script>
function calculatedUrl(){
var totalString=""
var link1="some text"
var link2="more text"
var link3="something else"
if(document.getElementById("id1").checked == true){
var totalString = totalString.concat(link1);
}
if(document.getElementById("id2").checked == true){
var totalString = totalString.concat(link2);
}
if(document.getElementById("id3").checked == true){
var totalString = totalString.concat(link3);
}
return totalString
}
function myFunction(id){
var original="http://myoriginalurl"
var addition=id
console.log(id);
var n =original.concat(addition)
//for testing
window.alert(n)
document.getElementById("test1").innerHTML= n;
//for the real redirecting not active for now
//window.location=new
}
</script>
</html>

Related

Can't get button to change color based on information in the next page

I'm trying to get the background color of the button to change based on if a sessionStorage item is marked true. On the next page, the Kitchen page, when all the buttons are checked, the sessionStorage item becomes true so when you go back to the "home page",the kitchen is now marked green instead of red. This is the show completion. I think you can use jQuery but I don't really know how to use it.
Home
function loader(){
var form = document.getElementById("myForm");
//error somewhere in here
for(var i=0;i<form.length;i++){
if(sessionStorage.getItem(form.elements[i].value) == "true"){
document.getElementById(form.elements[i].value).style.backgroundColor = "green";
return true;
}else{
document.getElementById(form.elements[i].value).style.backgroundColor = "red";
return false;
}
}
}
function initial(){
if (localStorage.getItem("hasCodeRunBefore") === null) {
var form = document.forms[0];
var tot = document.forms[0].length;
var i;
for(var i = 0; i < tot ; ++i){
document.getElementById(form.elements[i].value).style.backgroundColor = "red";
}
localStorage.setItem("hasCodeRunBefore", true);
}
}
function start(){
initial();
loader();
}
Home HTML
<body onload="start()">
<header align=center>Home Screen</header>
<p align=center id="result"></p>
<script>
document.getElementById("result").innerHTML = sessionStorage.getItem("currentAddress");
</script>
<ul align=center>
<form id="myForm">
<li>
<input type="button" name="area" id="livingroom" value="Living Room" ><br><br>
<script type="text/javascript">
sessionStorage.setItem("livingroom","false");
document.getElementById("livingroom").onclick = function () {
location.href = "url";
};
</script>
</li>
<li>
<input type="button" name="area" id="kitchen" value="Kitchen"><br><br>
<script type="text/javascript">
sessionStorage.setItem("kitchen","false");
document.getElementById("kitchen").onclick = function () {
location.href = "url";
};
</script>
</li>
<li>
<input type="button" name="area" id="bathroom" value="Bathroom" ><br><br>
<script type="text/javascript">
sessionStorage.setItem("bathroom","false");
document.getElementById("bathroom").onclick = function () {
location.href = "url";
};
</script>
</li>
<li>
<input type="button" name="area" id="dining" value="Dining" ><br><br>
<script type="text/javascript">
sessionStorage.setItem("dining","false");
document.getElementById("dining").onclick = function () {
location.href = "url";
};
</script>
</li>
<li>
<input type="button" name="area" id="bedroom1" value="Bedroom 1" ><br><br>
<script type="text/javascript">
sessionStorage.setItem("bedroom1","false");
document.getElementById("bedroom1").onclick = function () {
location.href = "url";
};
</script>
</li>
</form>
</ul>
Kitchen
function checkTasks(form){
var count = 0;
for(var i=0;i<form.task.length;i++){
if(form.task[i].checked){
count++;
}
}
if(count == form.task.length){
sessionStorage.setItem("kitchen","true");
window.open("url");
}else{
alert("You have not completed all the tasks! Please check all the boxes to indicate you have completed the tasks. If there is an issue, write it in the other box.");
}
}
Kitchen HTML
<body>
<header align=center>Kitchen To Do List</header>
<form name="todolist" >
<div id="button">
<label>
<input type="checkbox" name="task" value="1" ><p>Microwave</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Coffee Maker</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Oven</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Dishwasher</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Stove Top</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Other</p>
</label>
</div>
<textarea id="other"></textarea><br><br>
<p align=center>
<input type="submit" name="box" id="box" value="Complete" onclick="checkTasks(this.form)">
</p>
</form>
<div class="close">
<form align=center action="url" target="_self">
<input type="submit" name="back" value="Back">
</form>
</div>
Every time you load the home page you are setting the value to false with those inline scripts. Remove the sessionStorage.setItem("livingroom","false"); calls in home.html and it looks like everything will work.

Add checkbox values to a link using javascript

I would like to add checked checkbox values as url parameter to my link.
This is what I have amongst others:
<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1"></label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1"></label>
<script>
$(".checkbox").on("change", function() {
var values = [];
$('.checkbox:checked').each(function() {
var result = $(this).val();
values.push(result);
});
var key = $(".link").html(values.join("&"));
document.write('Open here');
});
</script>
The expected result is "http://www.example.com/test.html?bx1=1&bx2=1".
I hope someone can help me with this.
Thanks for these lines:
<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1"></label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1"></label>
<a class="link" href="http://www.example.com/test.html">Open here</a>
<script>
$(".checkbox").on("change", function() {
console.log('fzef');
var values = [];
$('.checkbox:checked').each(function() {
var result = $(this).val();
values.push(result);
});
$(".link").attr('href', 'http://www.example.com/test.html?' + values.join("&"));
});
// Init link on page load
$(".checkbox").trigger("change");
</script>
I get a &on& between my values and it does not work on IE. Any idea? Thanks!
You can do like this:
<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1"></label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1"></label>
<a class="link" href="http://www.example.com/test.html">Open here</a>
<script>
$(".checkbox").on("change", function() {console.log('fzef');
var values = [];
$('.checkbox:checked').each(function() {
var result = $(this).val();
values.push(result);
});
$(".link").attr('href', 'http://www.example.com/test.html?' + values.join("&"));
});
// Init link on page load
$(".checkbox").trigger("change");
</script>
Wrap the checkboxes in a form, give them names and let jQuery do the work with .serialize():
$(function() {
$("form").on("change", function() {
var href = "http://www.example.com/test.html",
params = $(this).serialize();
if (params.length > 0) {
href += "?" + params;
}
console.log(href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="box1" name="bx1" type="checkbox" class="checkbox" value="1" />bx1
<input id="box2" name="bx2" type="checkbox" class="checkbox" value="1" />bx2
</form>
The correction you need to do is in the line
var key = $(".link").html(values.join("&"));
You need to change it to
var key = values.join("&");
Why?
Because there is no .link selector in your code.
try like this:
you need with document.write()
document.write('http://www.example.com/test.html?' + values.join('&')+'');
OR
$("button").on("click", function() {
var values = [];
$('.checkbox:checked').each(function() {
var result = $(this).val();
values.push(result);
});
$('#url').attr('href','http://www.example.com/test.html?' + values.join('&') );
$('#url').html('http://www.example.com/test.html?' + values.join('&'))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1">first</label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1">second</label>
<button >Go</button>
<a id="url"></a>

Output a radio button in a webpage

I'm trying to input the value of the checked radio button as one of a functions parameres (here sign). This is my code:
<!DOCTYPE html>
<html>
<head>
<script src="proj4js/lib/proj4js/lib/proj4js-compressed.js"></script>
</head>
<body>
<script>
function func1 (x,y, sign){
var z=(x+y)*sign
document.getElementById("Z").innerHTML = z;
}
</script>
<form >
first input:<br>
<input id="Y" type="text" y="Y" value=85>
<br>
second input:<br>
<input id="X" type="text" x="X" value=15>
<br>
<input type="radio" name="hem" value=1 id = "N" >north
<input type="radio" name="hem" value=-1 id = "S" >south
The Answer:<br>
<input id="Z" type="text" z="Z" >
<br><br>
</form>
<button type="button" onclick="func1(Number(document.getElementById('X').value),Number(document.getElementById('Y').value), ?? )"> try it </button>
I don't know what to put instead of ?? ? The sign determines if sign is positive or negative.
make input elements as
<form id="demoForm">
first input:<br>
<input id="Y" type="text" value=85>
<br>
second input:<br>
<input id="X" type="text" value=15>
<input type="radio" name="hem" value="1" id="N" >north
<input type="radio" name="hem" value="-1" id ="S" >south
The Answer:<br>
<input id="Z" type="text" z="Z" >
</form>
<script>
function getRadioVal(form, name) {
var val;
// get list of radio buttons with specified name
var radios = form.elements[name];
// loop through list of radio buttons
for (var i=0, len=radios.length; i<len; i++) {
if ( radios[i].checked ) { // radio checked?
val = radios[i].value; // if so, hold its value in val
break; // and break out of for loop
}
}
return val; // return value of checked radio or undefined if none checked
}
var val = getRadioVal( document.getElementById('demoForm'), 'hem' );
alert(val); //you can pass this value as parameter
</script>
The simple way would be to write a helper function to collect your paramters and then call your function from this function.
You could use jQuery to get the value of the checked
$('input[name=hem]:checked').val()
Just need to make sure that the form you're using has an id. Then you wouldn't have to pass to the function just get the value directly from the form in your function.
<script>
function func1 (x,y){
var sign = $('input[name=hem]:checked').val();
var z=(x+y)*sign;
document.getElementById("Z").innerHTML = z;
}
</script>
<!DOCTYPE html>
<html>
<head>
<!--
<script src="proj4js/lib/proj4js/lib/proj4js-compressed.js"></script>
-->
</head>
<body>
<form >
first input:<br>
<input id="Y" type="text" y="Y" value=85>
<br>
second input:<br>
<input id="X" type="text" x="X" value=15>
<br>
<input type="radio" name="hem" value="1" id="N" >north</input>
<input type="radio" name="hem" value="-1" id="S" >south </input>
The Answer:<br>
<input id="Z" type="text" z="Z" >
<br><br>
</form>
<button type="button" onclick="func1(Number(document.getElementById('X').value),Number(document.getElementById('Y').value), getAppropriateValue() )"> try it </button>
<script>
function func1 (x,y, sign){
var z=(x+y)*sign
document.getElementById("Z").value = z;
}
function getAppropriateValue(){
var result = 0;
var checkboxN = document.getElementById('N');
var checkboxS = document.getElementById('S');
if(checkboxN && checkboxN.checked) result = 1;
if(checkboxS && checkboxS.checked) result = -1;
return result;
}
</script>
You can entirely take off third param and can output sign based on radio checked property.
<script>
function func1 (x,y) {
var z=(x+y);
if(document.getElementById("N").checked) {
z= z*1;
}elseif(document.getElementById("N").checked) {
z=z*-1;
}
document.getElementById("Z").value = z;
}
</script>

getElementsByClassName and innerHTML

Can someone explain how to appendChild to a parent <div class="...">
and solve this ?
The innerHTML should set the variable str after every <div class='categories'> </div>
it created dynamically when you set a value to the texts and press the button "press"
function addField() {
var categoryValue = document.getElementById("newCateg").value;
var fieldValue = document.getElementById("newField").value;
// var selOption = document.option[selectedIndex.text];
var newCategoryNode = document.getElementsByClassName('categories');
var categoryPart1 = [
' <div class="categories">',
'<input type="checkbox" class="check"/> <a class="titles">'].join('');
var categoryPart2 = [
'</a>',
' <hr/>',
' <input type="checkbox" class="check"/> ' ].join('');
var categoryPart3 = [
' <input type="text" />',
' <br> </br>',
'<hr/>',
'</div>'].join('');
var str=categoryPart1 + categoryValue + categoryPart2 + "" + fieldValue + "" + categoryPart3;
for (var i = 0; i < newCategoryNode.length; i++) {
newCategoryNode[i].innerHTML=str;
}
}
<!DOCTYPE html>
<html>
<body>
<input type="text" id="newCateg" />
<input type="text" id="newField" />
<div class="categories">
<p class="titles">
<input type="checkbox" class="check" onchange="checkAll('divID',true,elem)" />FUN</p>
<hr/>
<div class="field">
<input type="checkbox" class="check" />D
<input type="text" />
</br>
</div>
<input type="checkbox" class="check" />
<label>S</label>
<input type="text" id="c1" />
</br>
<input type="checkbox" class="check" />
<label>A</label>
<input type="text" />
<hr/>
</div>
<input type="button" onclick="addField()" value="Press">
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<input type="text" id="newCateg" />
<input type="text" id="newField" />
<div class="categories">
<p class="titles">
<input type="checkbox" class="check" onchange="checkAll('divID',true,elem)" />FUN</p>
<hr/>
<div class="field">
<input type="checkbox" class="check" />D
<input type="text" />
</br>
</div>
<input type="checkbox" class="check" />
<label>S</label>
<input type="text" id="c1" />
</br>
<input type="checkbox" class="check" />
<label>A</label>
<input type="text" />
<hr/>
</div>
<input type="button" onclick="addField()" value="Press">
</body>
<script>
function addField() {
var categoryValue = document.getElementById("newCateg").value;
var fieldValue = document.getElementById("newField").value;
// var selOption = document.option[selectedIndex.text];
var newCategory = document.getElementsByClassName('categories');
var div = document.createElement('div');
div.setAttribute('class', 'categories');
var a = document.createElement('a');
a.setAttribute('class', 'titles');
var hr = document.createElement('hr');
var input_check = document.createElement('input');
input_check.setAttribute('type', 'checkbox');
input_check.setAttribute('class', 'check');
var input = document.createElement('input');
input.setAttribute('type', 'text');
var br = document.createElement('br');
var textnode = document.createTextNode(fieldValue);
div.appendChild(input);
div.appendChild(a);
div.appendChild(hr);
div.appendChild(input_check);
div.appendChild(textnode);
div.appendChild(input);
div.appendChild(br);
div.appendChild(br);
console.log(div);
var node = document.getElementsByClassName('categories');
for (var i = 0; i < node.length; i++) {
node[i].appendChild(div);
}
}
</script>
</html>
hope this could give you idea on how to do it.
you cannot use appendChild to a node using a string it shoud also be a DOM element
you can check on document.createElement and document.createTextNode function
hope it would help you more on your understanding
According to MDN, Node.appendChild() wants a Node object as its argument. It won't create one from a string of markup, so you'll have to create it yourself.
You can use document.createElement() to create a Node object, then you can set its innerHTML as you like. Once the Node is all set how you want, you can add it to the DOM using appendChild().
If you want to use appendChild() mehtod it doesn't work this way.First you have to create a child using element.createElement() method.Now concentrating on your code i encountered some problem. your getElementsByClassName is returning a nodelist containing all the elements having same class.So if you want to grab it provide it an index.As you have only one it's better to provide [0] index to it.
var newCategoryNode = document.getElementsByClassName('categories')[0];
if you don't provide index in getElementsByClassName() you can also access it
newCategoryNode[0].innerHTMM=str
i removed for loop from you code.If you want to use loop use for...in loop instead as it is a list of object.
var newCategoryNode = document.getElementsByClassName('categories');
for(key in newCategoryNode){
newCategoryNode[key].innerHTML=str;
}
you haven't defined checkAll() function related to one of your input tag.That surely get you an error.I've modified your code and it might give you the result you want
function addField() {
console.log('logged');
var categoryValue = document.getElementById("newCateg").value;
var fieldValue = document.getElementById("newField").value;
// var selOption = document.option[selectedIndex.text];
var newCategoryNode = document.getElementsByClassName('categories')[0];
var categoryPart1 = [
' <div class="categories">',
'<input type="checkbox" class="check"/> <a class="titles">'].join('');
console.log(categoryPart1);
var categoryPart2 = [
'</a>',
' <hr/>',
' <input type="checkbox" class="check"/> ' ].join('');
var categoryPart3 = [
' <input type="text" />',
' <br> </br>',
'<hr/>',
'</div>'].join('');
var str=categoryPart1 + categoryValue + categoryPart2 + fieldValue + "" + categoryPart3;
console.log(str);
newCategoryNode.innerHTML =str;
}
<input type="text" id="newCateg" />
<input type="text" id="newField" />
<div class="categories">
<p class="titles">
<input type="checkbox" class="check" />FUN</p>
<hr/>
<div class="field">
<input type="checkbox" class="check" />D
<input type="text" />
</br>
</div>
<input type="checkbox" class="check" />
<label>S</label>
<input type="text" id="c1" />
</br>
<input type="checkbox" class="check" />
<label>A</label>
<input type="text" />
<hr/>
</div>
<input type="button" onClick="addField();" value="Press">

Pass jQuery array value on submit as hidden input

On button press the following code will display a message with values collected from all checkboxes. But I want to pass these values (returned by function) as hidden input on submit.
<form action="script.php" method="post">
<input type="checkbox" name="chb1" value="html" />HTML<br/>
<input type="checkbox" name="chb2" value="css" />CSS<br/>
<input type="checkbox" name="chb3" value="javascript" />JavaScript<br/>
<input type="checkbox" name="chb4" value="php" />php<br/>
<input type="checkbox" name="chb5" value="python" />Python<br/>
<input type="checkbox" name="chb6" value="net" />Net<br/>
<input type="button" value="Click" id="btntest" />
</form>
<script type="text/javascript"><!--
function getSelectedChbox(frm) {
var selchbox = [];
var inpfields = frm.getElementsByTagName('input');
var nr_inpfields = inpfields.length;
for(var i=0; i<nr_inpfields; i++) {
if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
}
return selchbox;
}
document.getElementById('btntest').onclick = function(){
var selchb = getSelectedChbox(this.form);
alert(selchb);
}
//-->
</script>
I've seen guys like you trying to code my router interface, so I'll help out.
give your form an id cause you'll need it later
<form action="script.php" method="post" id="the_form">
add the hidden input in the form
<input type="hidden" name="values" id="values" value="" />
the button in the form matures to a real submit (amazing)
<input type="submit" ...
your "getSelectedChbox()" function is amazing; don't change anything there, just wanted to give you congratulations for it, it's a great function
now, where it says document.getElementById('btntest').onclick - get rid of all that and add this code instead; this code will do the rest.
document.getElementById('the_form').onsubmit = function(){
var selchb = getSelectedChbox(this);
var values = selchb.join(', ');
if(!values.length){
alert('There was an error. You have to select some checkboxes. ');
return false;
}
document.getElementById('values').value = values;
if(!confirm(" Are you interested in submitting this form now? If not, click accordingly. "))
return false;
}
Or simply copy-paste this whole thing in a file called script.php:
<?php echo var_dump(isset($_POST['values']) ? $_POST['values'] : 'Submit first.'); ?>
<form action="script.php" method="post" id="the_form">
<input type="checkbox" name="chb1" value="html" />HTML<br/>
<input type="checkbox" name="chb2" value="css" />CSS<br/>
<input type="checkbox" name="chb3" value="javascript" />JavaScript<br/>
<input type="checkbox" name="chb4" value="php" />php<br/>
<input type="checkbox" name="chb5" value="python" />Python<br/>
<input type="checkbox" name="chb6" value="net" />Net<br/>
<input type="hidden" name="values" id="values" value="" />
<input type="submit" value="Click" id="btntest" />
</form>
<script type="text/javascript"><!--
function getSelectedChbox(frm) {
var selchbox = [];
var inpfields = frm.getElementsByTagName('input');
var nr_inpfields = inpfields.length;
for(var i=0; i<nr_inpfields; i++) {
if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true)
selchbox.push(inpfields[i].value);
}
return selchbox;
}
document.getElementById('the_form').onsubmit = function(){
var selchb = getSelectedChbox(this);
var values = selchb.join(', ');
if(!values.length){
alert('There was an error. You have to select some checkboxes. ');
return false;
}
document.getElementById('values').value = values;
if(!confirm(" Are you interested in submitting this form now? If not, click accordingly. "))
return false;
}
//-->
</script>
Have fun.

Categories

Resources