Develop Reference

Redirect to a URL with a value at end of the javascript automatically

I am new to javascript and I want a code for wordpress. I have three select options. City, Area and House/flat. Earlier I used same name for two select options and the result was mydomain/s=mycity&s=house but I want it to be like mydomain/?s=firstoptionvalue+secondoptionvalue+thirdoptionvalue
<form method="get" id="searchform">
<select id="text-one">
<option selected value="base">Select City</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
</select>
<select name="a" id="text-two">
<option>Select Your City First</option>
</select>
For second I have used script
$(function() {
$("#text-one").change(function() {
$("#text-two").load("mydomain/textdata/" +
$(this).val() + ".txt");
<h2>Property Type: </h2> <select name="c" id="text-three">
<option value="house">House</option>
<option value="flat">Flats</option>
<option value="plot">Plots</option>
</select>
<input type="submit" id="searchsubmit" value="Search" class="btn2" />
</form>
<span id="s"></span>
Id is coming correctly in span. So I want something like when this javascript ends it automatically redirects to the mydomain/s=(thevalue of s concatinated in javascript)
<script>
$(function() {
$("#text-three").change(function() {
document.getElementById('z').innerText =
document.getElementById('text-one').value + '+' +
document.getElementById('text-two').value + '+'
document.getElementById('text-three').value;
});
});
function myFunction() {
window.open("mydomain/s=z");
}
</script>
I need this url mydomain/?s=firstoptionvalue+secondoptionvalue+thirdoptionva‌​lue . At the end i tried to use mydomains/s=s but it's not working. I know nothing about javascript but the value is coming correctly in span id="s" but i don't want it in span. I want it in window.open("mydomain/s=z");

I am not sure i am understanding your question but i believe this is what you are looking for the snippet below will obviously not load mydomain.com or run the window.open but you can modify those lines for your implementation
$(function() {
$("#text-one").change(function() {
$("#text-two").load("mydomain/textdata/" + $(this).val() + ".txt");
})
$("#text-three").change(function() {
$('#s').text(
$('#text-one').val() +
$('#text-two').val() +
$('#text-three').val())
var theLink = $('#s').text();
console.log(' window.open(mydomain.com/?s='+theLink+')');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="get" id="searchform">
<select id="text-one">
<option selected value="base">Select City</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
</select>
<select name="a" id="text-two">
<option>Select Your City First</option>
</select>
<h2>Property Type: </h2>
<select name="c" id="text-three">
<option value="house">House</option>
<option value="flat">Flats</option>
<option value="plot">Plots</option>
</select>
<input type="submit" id="searchsubmit" value="Search" class="btn2" />
</form>
<span id="s"></span>

window.open(); accepts a string that represents the URL that you want the browser to be directed to.
In this case, window.open("mydomain/s=s"), will redirect to "mydomain/s=s". I'm assuming that when the script is executed that's the URL that you're getting.
With document.getElementById('s').innerText you are setting the contents of the element with id of "s" to the value of "text-one", "text-two", and "text-three".
What you need to do in order to have the page redirect as you would like is either set the value of "text-one", "text-two", and "text-three" to a variable and then use that variable in the URL or use the values directly.
For example:
function myFunction() {
window.open("mydomain/?a=" + document.getElementById('text-one').value + '&b=' + document.getElementById('text-two').value + '&c=' + document.getElementById('text-three').value;
}
OR:
function myFunction() {
var a = document.getElementById('text-one').value;
var b = document.getElementById('text-two').value;
var c = document.getElementById('text-three').value;
window.open("mydomain/?a=" a + '&b=' + b + '&c=' + c);
}
Finally, you need to call myFunction() somewhere, most likely in an on click event.

HTML javascript not working

I have this html with javascript, but I don't know why it's not working. It's right now supposed to calculate the values of the two textboxes when the button is pressed. However nothing is happening.
Code:
<!DOCTYPE html>
<html>
<body>
<h1>HTML Räpellys 2</h1>
<select id="mathType">
<option value="0">Addition</option>
<option value="1">Subtraction</option>
<option value="2">Multiplication</option>
<option value="3">Division</option>
<option value="4">Shift Left</option>
<option value="5">Shift Right</option>
<option value="6">Increment</option>
<option value="7">Decrement</option>
<option value="8">AND</option>
<option value="9">OR</option>
<option value="A">XOR</option>
</select>
<p></p>
<form>
Value 1: <input type="text" id="val1" value=""></input>
<p></p>
Value 2: <input type="text" id="val2" value=""></input>
</form>
<p></p>
<button onclick="mathFunc">Calculate!</button>
<p></p>
<script>
function mathFunc() {
var box1 = document.getElementById("val1").value;
var box2 = document.getElementById("val2").value;
if (document.getElementById("mathType").value == 0) {
document.write(box1 + box2);
}
}
</script>
<noscript>Java is required to display this element!</noscript>
</body>
</html>

The issue is that the function should be called on click: onclick="mathFunc()".
Generally, I would recommend you not to use document.write in the code but for debugging purposes use browser console and console.log function.
MDN: https://developer.mozilla.org/en/docs/Debugging_JavaScript#Console.log_in_Browser_Console

the <form> tag should contain the form elements...
eg
<form>
<select...
then I'd also make sure I don't get the string value of the input fields byt wrapping them with parseFloat(). eg:
var box1 = parseFloat( document.getElementById("val1").value ) ;
you also need to call the function as a function, basically what VisioN said above:
onclick="mathFunc()"

Run Javascript if Select values =

I make a script to calculate number.
But i want this script to be work only when user select dropdown to text2 (value=5)
But this script is not working (nothing happened when run the script) :(
Can anyone help or suggest me getting started with this script Please.
<select id="stt" onchange="copy()">
<option value="">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select><br>
Calculate<br>
<input type="text" id="input">
<input type="text" disabled="disabled" id="result">
<script>
function copy() {
if (document.getElementById("stt").value == "5") {
$(document).ready(function(){
$("#input").keyup(function(){
var val1 = +$("#input").val();
$("#result").val(val1*79);
});
});
}
}
</script>

**EDIT**: Changed $("#input").on("change" with $("#input").on("keypress".
New working JSFiddle: http://jsfiddle.net/L69dp/1/
HTML Code:
<select id="stt">
<option value="">
Select
</option>
<option value="8">
text1
</option>
<option value="5">
text2
</option>
<option value="4">
text3
</option>
</select><br>
Calculate<br>
<form>
<input id="input" type="text"> <input disabled="true" id="result" type=
"text">
</form>
JS Code:
$(function() {
function calculate() {
var sttval = $("#stt").val();
if (sttval == "5") {
var val1 = $("#input").val();
$("#result").val(val1 * 79);
} else {
$("#result").val("");
}
}
$("#stt").on("change", function() {
calculate();
});
$("#input").on("keypress", function() {
calculate();
});}());

You need to add a reference to the jquery library:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
Put this before your existing script block.
Also, you do not need $(document).ready(function(){} inside the copy() function.

<head>
<script>
var value;
function copy() {
value=document.getElementById("stt").value; //get the value of select everytime it change the value
}
function dd()
{
if(value=="5")//if the value is 5 do the code below
{
var val1= document.getElementById('input');
document.getElementById('result').value=val1.value*79;
}
}
</script>
</head>
<body >
<select id="stt" onchange="copy()">
<option value="">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select><br>
<input type="text" id="input" oninput="dd()" >
<input type="text" disabled="disabled" id="result">
</body>
</html>

assign a javascript variable value depends on html drop down list section

I have a drop html list. If I select an option from dropdown, I have to assign dropdown value to the javascript variable and display it on html
Here is my code
HTML:
<form method="post">
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
<button onclick="changeHiddenInput (objDropDown)">Try it</button>
</form>
<div id="result"> </div>
Javascript:
function changeHiddenInput (objDropDown)
{
var objHidden = document.getElementById("hiddenInput");
objHidden.value = objDropDown.value;
var a = objHidden.value;
result.innerHTML = a || "";
}
But whenever I am submitting the values,it giving error. anything wrong here ?
DEMO

On your demo, you've selected the default onLoad option in jsfiddle.
This causes the site to wrap your entire code within a callback function, meaning that your showit function is not a global function as required by DOM0 inline event handlers.
Change this option to no wrap(head) and it will work.
The code you have will work good on a page, assuming you have the <script> tags for the javascript.
Fiddle here
About your <button onclick="changeHiddenInput (objDropDown)">Try it</button>, objDropDown is not defined... and also add type="button" otherwise the default is a submit button.
I made some changes for the demo, so my code is:
html
<form method="post">
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
<button onclick="changeHiddenInput (objDropDown)">Try it</button>
</form>
<div id="result"> </div>
javascript
var select;
window.onload = function () {
select = document.getElementById('dropdown');
console.log(select);
}
function changeHiddenInput(objDropDown) {
console.log(objDropDown);
var objHidden = document.getElementById("hiddenInput");
objHidden.value = objDropDown.value;
var a = objHidden.value;
result.innerHTML = a || "";
}

JavaScript Populating an input Field Using an Html combo Box

i am trying to find a way to allow a user to click items in a combo box and have its value populate an input field and also alert "work stop" or "work start" message when appropriate option is selected. But my code is not working. Please Help!
Here is my code:
<html>
<head>
</head>
<body>
<form>
<select name="sel1" onChange="populateField(this.form)" >
<option value="">---Select---</option>
<option value="stop" >Stop</option>
<option value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script type="text/javascript">
function populateField(frm){
test = frm.stop.value;
alert('work' test);
frm.eStop.value = test;
}
</script>
</body>
</html>
Thanks in Advance

http://jsfiddle.net/snHQY/
<form>
<select name="sel1" id="select" onchange="populateField();" >
<option value="">---Select---</option>
<option name="stop" value="stop" >Stop</option>
<option name="start" value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script>
function populateField() {
test = document.getElementById('select').value;
alert(test);
document.getElementById('eStop').value = test;
}
</script>

You can do it using the selectedIndex if you want as well,
<form>
<select name="sel1" id="select" onchange="populateField(this);" >
<option value="">---Select---</option>
<option name="stop" value="stop" >Stop</option>
<option name="start" value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script>
function populateField(sel) {
sel.form.eStop.value = 'work ' + (sel.selectedIndex == 1 ? 'Stop' : 'Start');
}
</script>
http://jsfiddle.net/cnpuM/

Your code has two errors. You can not reference an element by its value like this test = frm.stop.value; instead use test = frm.sel1.value; . Another error is in this line alert('work' test);. Here you are joining a string "work" with a variable "test". In java script where ever you join two or more variables or strings and variables you alway have to join them with + sign like this:alert('work ' + test);. Remaining code is ok:
<html>
<head>
</head>
<body>
<form>
<select name="sel1" onChange="populateField(this.form)" >
<option value="">---Select---</option>
<option value="stop" >Stop</option>
<option value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script type="text/javascript">
function populateField(frm){
var test = frm.sel1.value;
alert('work '+ test);
frm.eStop.value = test;
}
</script>
</body>
</html>
You can also use selectedIndex property of "sel1" to do the same.

in your select you can add to onchange's and onkeypress to the populateField's function this as the objects reference.
<select name="sel1" onchange="populateField(this)" onkeypress="populateField(this)">
Now you can reference the select from o. to pass the selected value to the alert dialog and the input field.
function populateField(o){
alert("work " + o.value);
// use regular W3C DOM syntax for element referencing the input and populate it with the select objects selected options value
document.getElementById("eStop").value = o.value;
}