Simple javascript form action direction - javascript

I am trying to use Jquery to re-form a target url for a form - see below. Any ideas where I am going wrong? many thanks ...
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script>
// Needs to point at search page with eg: test.htm?s=SearchTerm&cat=3,7
// but I keep getting - test.htm?s=hh&cat1=3&cat2=0
$("#aSearch").click(function () {
$('form').attr('action', './test.htm?s=' + this.s + '&cat=' . this.cat1 + ',' + this.cat2);
});
</script>
<form name="advancedSearch" action="" method="get">
<input id="s" type="text" name="s" size="40" />
<select name="cat1">
<option value="0"> - - - </option>
<option value="3">Chardonnay (6)</option>
<option value="23">Gewurztraminer (1)</option>
<option value="24">Pinot Gris (1)</option>
<option value="4">Sauvignon Blanc (3)</option>
</select>
<select name="cat2">
<option value="0"> - - - </option>
<option value="2">Burgandy (6)</option>
<option value="7">Shiraz (1)</option>
</select>
<div><input id="aSearch" type="submit" value="Search" /></div
</form>
</body>
</html>


In your original code, you were trying to access properties of this. The this keyword in the callback referred to the aSearch DOM object, and so it wasn't providing the right values.
$('form').attr('action', './test.htm?s=' + this.s + '&cat=' . this.cat1 + ',' + this.cat2);
You'll need to select each element with jQuery and fetch its value with .val() instead:
<script>
$(document).ready(function() {
var s = $('#s');
var cat1 = $('#cat1');
var cat2 = $('#cat2');
$("#aSearch").click(function () {
$('form').attr('action', './test.htm?s=' + s.val() + '&cat=' . cat1.val() + ',' + cat2.val());
});
});
</script>

Related

javascript code doesn't display the answer of future value after I click the calculate button

I'm working on the fv calculator. However, I don't know why my JavaScript code doesn't display the answer of future value after I click the calculate button.
How could I solve this problem?
I will be appreciated if someone could offer me help, thanks.
Below is my HTML and JavaScript code.
<html>
<head>
<title>401K Future Value Calculator</title>
<script type="text/javascript" src="mpg.js"></script>
</head>
<body>
<h2>401K Future Value Calculator</h2>
<form id="calculationForm" >
<label for="periodicPayment">Yearly Investment($): </label>
<select id="yearlyInvest" name="Investment”">
<option value="1000: ">1000</option>
<option value="2000: ">2000</option>
<option value="3000: ">3000</option>
<option value="4000: ">4000</option>
<option value="5000: ">5000</option>
<option value="6000: ">6000</option>
<option value="7000: ">7000</option>
<option value="8000: ">8000</option>
<option value="9000: ">9000</option>
<option value="10000: ">10000</option>
</select><br><br>
<label for="annunalInterest">Annual Interest Rate(%) </label>
<input type="text" id="annunalInterestRate"><br><br>
<label for="years">Number of Years(#) </label>
<input type="text" id="numOfYears"><br><br>
<label for="future">Future Value($) </label>
<p id="futureValue">
</p>
<input type="button" id="calculate" value="Calculate">
<input type="button" onclick="clearButton()" id="clear" value="Clear">
</form>
</body>
</html>
function processForm() {
var r, n, p;
r = parseFloat(document.getElementById("annunalInterestRate").value);
n = parseInt(document.getElementById("numOfYears").value);
p = document.getElementById("yearlyInvest").value;
if (isNaN(r)) {
alert("Pleas enter a valid number.");
} else if (isNaN(n)) {
alert("Pleas enter a valid number.");
} else {
var fv = P * ((Math.pow((1 + r), n) - 1) / r);
}
document.getElementById("calculate").value;
document.getElementById("futureValue").innerHTML = fv.toFixed(2);
};
window.onload = function() {
document.getElementById("calculate").onclick = processForm;
};
function clearButton() {
document.getElementById("calculationForm").reset();
}

The way you've written your <option> nodes in the <select> contain an unnecessary : in the value= param. This is causing p to compute as NaN. Instead, rewrite as:
<select id="yearlyInvest" name="Investment”">
<option value="1000">1000</option>
<option value="2000">2000</option>
...
</select>

Html select using select to change the link of a button with Javascript

I tried to find a solution with the stackoverflow search but I did not understand what I found.
Basically I want to have a List from which I can choose a value, which changes a link from the button. I think I need Javascript for it, so I want to ask you, how the code would look like?
EDIT:
So basically i want choose one option of the select, and every option has an own link to another html page. If i click on a button the html page of the chosen option opens. How do I do it with Java Script?
<form action="select.html">
<select name="Bundesländer" size="16">
<option selected>Baden-Würtemberg</option>
<option>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>

Just check it. Hope this is what you want.
function selectFunction() {
var x = document.getElementById("selectopt").value;
document.getElementById("mylink").innerHTML = x;
document.getElementById("mylink").href = "http://www." + x + ".com";
}
<form action="select.html">
<select id="selectopt" onchange="selectFunction(this);" name="Bundesländer" size="16">
<option selected>Baden-Würtemberg</option>
<option>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>
<a id="mylink" style="position:absolute;top:0;right:0;" href="http://google.com">Link</a>

You can use this code:
<script type="text/javascript">
function redirect(select) {
window.location = select.options[select.selectedIndex].getAttribute('data-link');
}
</script>
<form action="select.html">
<select name="Bundesländer" size="16" onChange="redirect(this)">
<option data-link="http://www.google.fr/" selected>Baden-Würtemberg</option>
<option data-link="http://www.google.com/">Bayern</option>
<option data-link="http://www.google.de/">Berlin</option>
<option data-link="http://www.google.it/">Brandenburg</option>
<option data-link="http://www.google.be/">Bremen</option>
<option data-link="http://www.google.be/">Hamburg</option>
<option data-link="http://www.google.be/">Hessen</option>
<option data-link="http://www.google.be/">Mecklenburg Vorpoomern</option>
<option data-link="http://www.google.be/">Niedersachsen</option>
<option data-link="http://www.google.be/">NRW</option>
<option data-link="http://www.google.be/">Rheinland</option>
<option data-link="http://www.google.be/">Saarland</option>
<option data-link="http://www.google.be/">Sachsen</option>
<option data-link="http://www.google.be/">Sachsen-Anhalt</option>
<option data-link="http://www.google.be/">Schleswig-Holstein</option>
<option data-link="http://www.google.be/">Thüringen</option>
</select>
</form>

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('select').change(function () {
$('#btn').attr('url_value', $(this).val());
});
$('#btn').click(function () {
window.open($(this).attr('url_value'));
// alert($(this).attr('url_value'))
});
});
</script>
<body>
<form >
<input type="button" value="Open Selected" id="btn" url_value=""/>
<select name="Bundes" >
<option selected>Baden-</option>
<option>http://www.w3schools.com</option>
<option>http://www.gmail.com</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg </option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>test</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>
</body>
</html>

I think you want to change the action in the form based on selected option.
Use the code bellow:
<!DOCTYPE html>
<html>
<body>
<form action="Bayern.html" id="form" name="form" accept-charset="UTF-8">
<input type="submit">
</form>
<select id="dropwdown" name="dropwdown" onchange="chgAction();">
<option selected>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
<script>
function chgAction()
{
var selectedOption = document.getElementById("dropwdown").value;
if(selectedOption == "Hessen" ) {
document.getElementById('form').action = "Hessen.html";
}
else if(selectedOption == "NRW" ) {
document.getElementById('form').action = "NRW.html";
}
//Apply the same logic for each option ...
}
</script>
</body>
</html>

dynamic form with input and select

I need an form with possibility to add new row consisting SELECT and INPUT. This works for me, but when I submit form no variable from SELECT is posted.
My HTML code:
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<button id='add'>Add</button>
<form action="test.php" method="get">
<div class='container'>
<select>
<option name='service[]' value=1>HDD Recovery</option>
<option name='service[]' value=2>PC Clean</option>
<option name='service[]' value=3>Other</option>
</select>
Description<input type='text' name='desc[]'>
Price<input type='text' name='price[]'>
</div>
<input type="submit" value="Send">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var removeButton = "<button id='remove'>Remove</button>";
$('#add').click(function() {
$('div.container:last').after($('div.container:first').clone());
$('div.container:last').append(removeButton);
$('div.container:last input').each(function(){
this.value = '';
});
});
$('#remove').live('click', function() {
$(this).closest('div.container').remove();
});
});
</script>
<br>
</html>
How can i fix this ?

you have to name the select, not the options it holds.
<select name="service[]">
<option value="1">HDD Recovery</option>
<option value=2>PC Clean</option>
<option value=3>Other</option>
</select>

use
<select name='service[]'>
instead of giving name to option
<option name='service[]' value=1>HDD Recovery</option>

concatenate two dropdown values into another dropdown

i'm looking for a way to concatenate two dropdown values into another dropdown using jquery and php, i want to do the same i did on with the textbox
<script type="text/javascript">
$(document).ready(function() {
$('#drop2').change(function() {
var currentVal = $('textarea').val();
var one = $('#drop1').val();
var two = $('#drop2').val() + "\n";
two.replace("\n","<br/>");
$('textarea').html(currentVal + one + " em " + two) ;
});
});
</script>
HTML part
<form id="inserirtextarea" action="#" method="post">
<p>
<select name="drop1" id="drop1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="drop2" id="drop2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<textarea name="txta" id="txta" cols="20" rows="5"></textarea>
<input name="btinsert" type="submit" />
</form>
Any help is appreciated if anyone tried similar please point me on the right direction

Try this,
$('<select>').html($('#drop1').html()+$('#drop1').html()).appendTo('#inserirtextarea');
Fiddle Demo

Combine form input value with selected option

I want to combine values from option and input fields in realtime by using jQuery.
<input name="recipe" id="recipe" value="tablespoons" />
<select id="spoon_value" name="spoon_value">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Maybe something like this would work, but I'm getting error.
Uncaught SyntaxError: Unexpected identifier
$('select#spoon_value').each(function(i) {
$(select[name=spoon_value] option[value=" + this.data.spoon_value + "]").html() + this.data.recipe);
The output I want is 2tablespoons or 3tablespoons and so on.

<!doctype>
<html>
<head>
<script>
function _(x){
return document.getElementById(x);
}
function update() {
var tbsVal = _("spoon_value").value;
var output = tbsVal + " tablespoons";
_("realtimeTbsVal").innerHTML = output;
}
</script>
</head>
<body>
<form action="yourFileName" method="post">
<select id="spoon_value" name="spoon_value" onblur="update()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Submit">
</form>
<div id="realtimeTbsVal">yo</div>
</body>
</html>

You're missing quotes around your selector inside your each function -- you also have an each function targeting an ID, which is bad because it most likely means you're repeating ID's. Here's a syntax correct version of your code:
$('select#spoon_value').each(function(i) {
var someData = $("select[name=spoon_value] option[value=" + this.data.spoon_value + "]").html() + this.data.recipe;
});

Categories