Using a PHP input field to fill another [duplicate] - javascript

I am trying to call a javascript function from the onchange attribute of the select tag ! My issue is that I am passing the name attribute of the select to the function which always go null.
<body>
<form action="" method="post">
<select name="slct" id="name" onchange="rohan('measurement_conversion', '<?php echo isset($_POST["slct"])?$_POST["slct"]:"null" ?>')">
<option value="yes" selected="selected"> yes </option>
<option value="nopes"> nopes </option>
<option value="may be"> May be </option>
<option value="dont know"> dont know </option>
</select>
</form>
<div id="abc">
</div>
</body>
And here my javascript function
<script>
function rohan(var1, var2)
{
document.getElementById("abc").innerHTML=var1 + " " + var2;
}
</script>
It always prints null..
Any help will be appreciated !


HTML:
<body>
<form action="" method="post">
<select name="slct" id="name" onchange="rohan(this.value)">
<option>Select</option>
<option value="yes" selected="selected"> yes </option>
<option value="nopes"> nopes </option>
<option value="may be"> May be </option>
<option value="dont know"> dont know </option>
</select>
</form>
</body>
JS:
<script>
function rohan(value)
{
//you can get the value from arguments itself
alert(value);
}
</script>


PHP is run on the server before JavaScript is ever run in the browser. It doesn't get re-evaluated when the user changes the selected item.


No put in tag HTML attribute javascript, onchange is better in the script:
<script>
var b=document.getElementById('name');
b.onchange=function (){
var a=document.getElementById('name').value;
console.log(a);
}
</script>

Related

Changing an input field with JS not working

I'm stumped as to why when I change the dropdown value, the input field isn't populated with 'testing':
function changeSubject() {
document.getElementByID('cf7-subject').value = 'testing';
}
<form>
<select onchange="changeSubject()">
<option value="">Select an Option</option>
<option value="General Inquiry">General Inquiry</option>
</select>
<input id="cf7-subject" value="">
</form>

There are 2 issues in the jsfiddle above
Replace getElementByID --> getElementById.
Refere MDN docs for more info
In the fiddle, JS is loading after the view is resolved. Hence, the error is thrown in the console that says
Uncaught ReferenceError: changeSubject is not defined
There are 2 options to resolve this error:
Option 1 - Inline JavaScript
<script type="text/javascript">
function changeSubject() {
document.getElementById('cf7-subject').value = 'testing';
}
</script>
<form>
<select id="cf7-selector" onchange="changeSubject()">
<option value="">
Select an Option
</option>
<option value="General Inquiry">
General Inquiry
</option>
</select>
<input id="cf7-subject">
</input>
</form>
Option 2 - Change the value of LOAD TYPE in your jsfiddle as shown below
Hope this helps!

How to change Option one value to selected after a click event or after an onClick function

I am Using this code to change the option value but it doesn't work !
JavaScript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
function changeDefaultSelection(){
$("#selectVehicle").val('1');
}
</script>
HTML
<html>
<select id="selectVehicle">
<option value="0"> Please Select A Vehicle </option>
<option value="1"> Car </option>
<option value="2"> Bus </option>
</select>
<button onclick="changeDefaultSelection()"> Change me</button>
</html>

Use prop to add the selected attribute:
$('body').on('click','button',function(){
$('#selectVehicle option[value="1"]').prop('selected',true);
});
$('body').on('click','button',function(){
$('#selectVehicle option[value="1"]').prop('selected', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectVehicle">
<option value="0"> Please Select A Vehicle </option>
<option value="1"> Car </option>
<option value="2"> Bus </option>
</select>
<button> Change me</button>

Please try this code
function changeDefaultSelection(){
$("#selectVehicle").val('1').change();
}

use
$("#selectVehicle").val("1").addclass('selected');
and use double quotes. This works for me.

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>

jquery form plugin send/get disabled select value

I use the Jquery_Form plugin and i would like to get the value of disabled select box.
HTML form :
<form id="myform" method="post">
<select name="myselect" id="myselect">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<input type="submit" value="send">
</form>
Javascript :
<script>
$('#myselect').val('2').attr('disabled', true);
$(document).ready(function() {
var options = {
target: '#response',
};
$('#myform').ajaxForm(options);
});
</script>
PHP :
if (isset($_POST['myselect']))
echo $_POST['myselect'];
else
echo "Oups nothing :(";
I always "get Oups nothing"

The value of a disabled input/select box is not transmitted. How about disabling all non-selected values instead?
$('#myselect option:not(:selected)').prop('disabled', true);

is method not methode (see the form) soo is not $_POST is Anything
<form id="myform" methode="post"> //NO
<form id="myform" method="post"> //YES

Finaly i think that i have to put a hidden input that contain the value.
example :
<select name="myselect" id="myselect" disabled>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<input type="hidden" name="myselect" value="2">
Or just remove "disabled" before sending :
$('form').bind('submit', function() {
$(this).find(':disabled').removeAttr('disabled');
});

If you want to get a value from a particular selectList's item, can you try with:
$('#myselect option:contains(1)').val();
Cheers.

How to pass the selected value to java script function inside of select tag in html?

<form>
<SELECT NAME="sel" onChange="split(selected value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
Hi i need to pass the selected value immediately on inside of this select tag so pls some one help me

Not that I agree with how you're doing things here (in side the tag), technically it is possible to do what you ask by the following:
<form>
<SELECT NAME="sel" onChange="split(this.value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>

You cannot pass the value directly to the handler but you can get the values in it, I'd recommend to do this in code and not use inline event handlers:
var select = document.forms[0].sel;
select.onchange = function(){
var value = select.options[select.selectedIndex].value; // to get Value
var text = select.options[select.selectedIndex].text; // to get Text
}
Here's a working example:
http://jsfiddle.net/c2SrV/

<html>
<head>
<script>
function split(value)
{
alert(value);
}
</script>
</head>
<body>
<form>
<SELECT NAME="sel" onChange="split(value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
<body>
</html>
use "value". hope this was helpful

this.options[this.selectedIndex].value
*assuming you want to put it inline inside the onchange attribute

Categories