I want to be able to read the text which is submitted in a drop down box with jQuery, as I then want to post it to php. I've been following a tutorial but I have the issue when it does not read the value from the drop down box.
An alert with the name selected should appear when the refresh button is pressed. (The submit button in the script below is for something different and links to a different js file. Not relevant)
function update() {
var p1 = $("#playerOne").text();
alert('youre name is ' + p1);
}
<div class="inputForm">
<form id="frm1" onsubmit="return formSubmit()">
<h3>Update League Table!</h3>
<section class="playerOne">
<label for="playerOne">Player One Name:</label>
<select name="playerOne" id="playerOne">
<option value="player1">Player 1</option>
<option value="player2">Player 2</option>
<option value="player3">Player 3</option>
<option value="player4">Player 4</option>
</select>
</section>
<section class="submission">
<input type="submit" value="Submit">
</section>
<input class="refreshButton" type="button" value="Refresh" onclick="update()">
</form>
</div>
In the jquery file, if I remove var p1 = $("#playerOne").text(); then the alert will work. With that in the alert does not appear at all.
I have tried having the refresh button at different points in the HTML, didn't work. I have moved where <script type="text/javascript" src="jquery.js"></script> is within the HTML, didn't work.
I have also tried .val instead of .text. And var p1 = $("#playerOne option:selected").text();. Neither of these worked.
Any help is appreciated.
You can do this by using simple JavaScript code replace your jQuery with
var _val = document.getElementById('playerOne').value;
alert(_val); // it will work for you
$('#playerOne').val() will give you the selected value of the drop down element. Use this to get the selected options text.
$('#playerOne option:selected').text();
function update() {
var p1 = $( "#playerOne option:selected" ).text(); // for getting value in element
alert ('youre name is ' +p1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body background="mkimage.png">
<div class="inputForm">
<form id="frm1" onsubmit="return formSubmit()">
<h3>Update League Table!</h3>
<section class="playerOne">
<label for="playerOne">Player One Name:</label>
<select name="playerOne" id="playerOne">
<option value="player1">Player 1</option>
<option value="player2">Player 2</option>
<option value="player3">Player 3</option>
<option value="player4">Player 4</option>
</select>
</section>
<section class="submission">
<input type="submit" value="Submit">
</section>
<input class="refreshButton" type="button" value="Refresh" onclick="update()">
</form>
</div>
</body>
</html>
Here is your solution
use val() for getting value for the selected list.
if your using text() jquery .it will give all text in the element.
function update() {
var p1 = $("#playerOne").val(); // for getting value in value attribute
alert ('youre name is ' +p1);
}
function update() {
var p1 = $( "#playerOne option:selected" ).text(); // for getting value in element
alert ('youre name is ' +p1);
}
Try changing your selector in your jQuery sentence:
function update() {
var p1 = $("#playerOne option:selected").text();
alert ('youre name is ' + p1);
}
Try this, to get the selected option:
$( "#playerOne option:selected" ).text()
Related
I currently have a add button that adds some text and also a remove button that removes the added text. The issue I'm having is once I click the remove button, the add button no longer works. I know i can only bind events to things that are in the original DOM so I've tried binding the click event to the document DOM but that hasn't worked. Any help would be much appreciated.
JS Fiddle
HTML:
<!DOCTYPE html>
<html lang="en">
<div class="background">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="testjavascript.js"></script>
<button id='hideshow'>Hide/Show Methodology</button>
<div id="methodology" class="methodology">
<label for="constr_method">Choose a Renewal Methodology:</label>
<select name="constr_method" id="constr_method">
<option value="Pipe_crack">Pipe Crack</option>
<option value="Slip Lining">Slip Lining</option>
<option value="Directional_drill">Directional Drill</option>
<option value="open_cut">Open Cut</option>
<option value="lift_relay">Lift & Relay</option>
<option value="other_meth">Other</option>
</select>
<br>
<label for="constr_method">Renewal Location:</label>
<select name="location" id="location">
<option value="Nature Strip">Nature Strip</option>
<option value="Road">Road</option>
<option value="n/s_rd">Nature Strip & Road</option>
</select>
<form>
<label for="meters">Number of Meters:</label>
<input type="number" id="ren_meter" name="ren_meter">
</form>
</div>
<button id="save_meth" onclick="append_methodology()">Add Methodology</button>
<div id="meth_append">
</div>
</div>
</html>
Javascript:
$(document).ready(function(){
$('#hideshow').click(function(){
$('#methodology').toggle();
});
});
function append_methodology() {
var ren_met=document.getElementById("ren_meter").value
var ren_loc=document.getElementById("location").value
var ren_meth=document.getElementById("constr_method").value
$(document).on('click','#save_meth',function(){
$("#meth_append").append('<div>'+ren_meth,ren_loc,'<br>'+ren_met,'<button id="removeButton" onclick="remove()">Remove</button></div>')
})
}
function remove() {
$("#meth_append").on('click','#removeButton',function(){
$(this).closest('div').remove();
})
}
You appended wrong data, my friend. Here is the result.
https://jsfiddle.net/3fx6n4o8/1/
$(document).ready(function() {
$('#hideshow').click(function() {
$('#methodology').toggle();
});
$('#save_meth').on('click', function() {
var ren_met = document.getElementById("ren_meter").value;
var ren_loc = document.getElementById("location").value;
var ren_meth = document.getElementById("constr_method").value;
$("#meth_append").append('<div>' + ren_meth + '<br>' + ren_loc + '<br>' + ren_met + '<button class="removeButton" onclick="remove()">Remove</button></div>');
});
});
Hope to help :))
I have a situation, ie, I wanted the selected data from the dropdown box to be displayed inside a form (of type text) below it and which should be readonly.(using html/javascript). I am not able to do that as i am a pioneer in that
Hope responses
The below is a rough sketch of a non-jquery method of dynamically changing one form box using input from a dropdown menu.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function optionCallBack (arg) {
var currentOption = arg.options[arg.selectedIndex].text;
document.getElementById('changeForm').value = currentOption;
}
</script>
</head>
<body>
<select onclick="optionCallBack(this)" id='getForm'>
<option>asia</option>
<option>africa</option>
<option>america</option>
<option>europe</option>
</select>
<form>
<input value='europe' name='changeForm' id='changeForm'></input>
</form>
</body>
</html>
First of all, you need a select list like below (notice the onchange event handler)
<select onchange="fillTextBox(this)" id='mySelectList'>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
You will also need a text box (lets give it an Id myTextBox)
<input value='' name='' id='myTextBox'></input>
You'll need the following script for fillTextBox function
function fillTextBox(obj) {
var sel = obj.value;
document.getElementById('myTextBox').value = sel;
}
I'm running a django web app, when I first submit a form it fails, I need to refresh and submit it again to send the data within, or doing back forward on the web browser.
I'm using a javascript program (editarea) for auto-coloration code on a textarea
Here is my HTML file:
<html>
<head>
<title>Test</title>
<script language="javascript" type="text/javascript" src="/static/edit_area/edit_area_full.js"></script>
<script type="text/javascript">
function load() {
var combo = document.getElementById('selSeaShells1').value;
editAreaLoader.init({
id: "textarea_1" // textarea id
, syntax: combo // syntax to be uses for highgliting
, start_highlight: true // to display with highlight mode on start-up
});
}
</script>
</head>
<body onload="load();">
<form id="codeid" method="post" enctype="application/x-www-form-urlencoded" name="code" action="DestinationAddress/function">
<h3>Choose a language</h3>
<select name="sellang1" id="selSeaShells1" onchange="load();">
<option value="python">Python</option>
<option value="perl">Perl</option>
<option value="sql">SQL</option>
<option value="cpp">C++</option>
<option value="c">C</option>
<option value="java">Java</option>
<option value="css">Css</option>
</select>
<br>
<textarea id="textarea_1" name="content" cols="80" rows="15" type="text"></textarea>
<input id="thebutton" type="button" value="Submit" onclick="document.forms.codeid.submit();" />
</form>
</body>
</html>
and here the views.py:
def function(request):
encoded_data = urllib.urlencode(request.POST)
url=urllib2.urlopen('http://webappAddress:8000/function/?' + encoded_data)
tml= url.read()
return HttpResponse(tml)
Your javascript failing.
var combo = document.getElementById('selSeaShells1').value;
Combo is going to be undefined because you are calling load() before the page finishes loading.
I would use jquery and do this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> //download and get a local copy of jquery don't use googles.***<script>
$(document).ready(function() {
load();
});
function load()
{
var combo = $('#selSeaShells1 option:selected).val();
editAreaLoader.init({
id : "textarea_1" // textarea id
,syntax: combo // syntax to be uses for highgliting
,start_highlight: true // to display with highlight mode on start-up
});
}
</script>
Remove onload="load();" on body tag
This will get the selection after the page loads.
I have this code, it is quite simple but why isn't it working?
<html>
<head>
<script type=”text/javascript“>
function Expedisi()
{
var x=document.getElementById("cmb");//this the script for get data combo box
var y = document.getElementById("txt");
getCmb = x.value;
y.value = getCmb;
alert(x);
}
</head>
<body>
<select name="JENIS" id="cmb" data-role="slider" onChange="Expedisi()">
<option value="Suplier">Sup</option>
<option value="Expedisi">Exp</option>//if i pick one of this the value will be input on text box
</select>
<input type="text" name="BKIRIM" id="txt" value=""> //this the destination value
</body>
</html>
Can anyone Helpme? because this script is not run?
Thanks
You don't need getCmb, and you don't need to declare an extra element.
Use this instead:
<html>
<head>
<script type="text/javascript">
function Expedisi(t)
{
var y=document.getElementById("txt");
y.value = t.value;
}
</script>
</head>
<body>
<select name="JENIS" id="cmb" data-role="slider" onChange="Expedisi(this);">
<option value="Suplier">Sup</option>
<option value="Expedisi">Exp</option>
</select>
<input type="text" name="BKIRIM" id="txt" value=""/>
</body>
</html>
Your code is working for me. Try it here. http://jsfiddle.net/DLs7j/
That is the same exact code as yours. Copy, pasted.
Best
You need to change the quotes around the script type tag.
You are current using the ”” instead of ""; so change ”text/javascript” to "text/javascript".
Im fairly new to javascript but have some experience in HTML. I am trying to create a form which allows me to select an option from the drop down menu, which further expands the form (showing new fields on the same page) depending on the option selected from the drop down menu. I figured I need some sort of if statement to achieve this but I can't seem to figure out the right way to do so. I already have the drop down menu working. I would put the code I already have on here, but for some reason its not letting me
Thanks for your help
EDIT - Ran the code from comments through HTML tidy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<title>Ipod Inventory</title>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
function submitSelect(form) { alert (form.reason.selectedIndex); document.body.innerHTML() = "<h3>NEW STUFF<h3>"; }
//]]>
</script>
</head>
<body>
<h3>General</h3>Employee Requesting:
<form>
<input type="text" name="employee" value="" />
</form>
<form name="myform" action="" method="get" id="myform">
Reason: <select name="reason">
<option>
Conference/Meeting
</option>
<option>
Loaner
</option>
</select> <input type="button" name="submit" value="Submit" onclick=
"submitSelect(this.form)" /><br />
</form>
</body>
</html>
What you could do is split your page in different div sections, one for each case in your dropdown. You would then alter the display property of those divs using
element.style.display = 'none'
or
element.style.display = 'block'
If your setup is more complex, you might want to create a list of fields that should be visible for each item in your combo box, and then show/hide using the same technique.
For example, you would have a dropdown with male, and female. You would then have to div elements, whose id would be male or female. Then you would use
function toggle() {
if (document.getElementById('selector').value == 'male') {
document.getElementById('male').style.display = 'block';
document.getElementById('female').style.display = 'none';
}
else {
document.getElementById('male').style.display = 'none';
document.getElementById('female').style.display = 'block';
}
}
var selectmenu=document.getElementById("mymenu")
selectmenu.onchange=function(){ //run some code when "onchange" event fires
var chosenoption=this.options[this.selectedIndex] //this refers to "selectmenu"
if (chosenoption.value!="nothing"){
window.open(chosenoption.value, "", "") //open target site (based on option's value attr) in new window
}
}
Thats the if condition you need to use and the example also shows how to bind change event too..(code snippet extracted from javascript kit)
What you want to do is start with the onchange event of your reason select box:
<select name="reason" id="reason" onchange="myFunc();">
myFunc() (excuse the name, I'm not very creative) will be where you do your showing/hiding of the other inputs - probably not a different form, as usually inputs are collected into a single form on a page. Each input (or set of inputs) should be in it's own <div> tag, and you can then use the element.style.display property of the tag to show/hide the inputs, as described in the other answers. For example, you might have the following in your form:
<form name="myform" action="" method="get" id="myform">
Reason: <select name="reason" id="reason" onchange="myFunc()">
<option>
Conference/Meeting
</option>
<option>
Loaner
</option>
</select>
<div id="conferenceInputs">
Conference:
<select name="conferenceSelectBox" id="conferenceSelectBox">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div id="loanerInputs">
Loaner:
<select name="loanerSelectBox" id="loanerSelectBox">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<input type="button" name="submit" value="Submit" onclick="submitSelect(this.form)" />
</form>
The myFunc() javascript would look something like this:
function myFunc() {
var selectElem = document.getElementById('reason');
var optionText = selectElem.options[selectElem.selectedIndex].text;
switch(optionText) {
case "Conference/Meeting":
document.getElementById('conferenceInputs').style.display = 'block';
document.getElementById('loanerInputs').style.display = 'none';
break;
case "Loaner":
document.getElementById('loanerInputs').style.display = 'block';
document.getElementById('conferenceInputs').style.display = 'none';
break;
default:
}
}
Finally, you would want to have a javascript function that loads with the HTML page - <body onload="anotherFunc()"> that sets both div's style.display properties to 'none' so that they don't appear before the user selects anything.