<script type="text/javascript">
var x = document.getElementById("mySelect").value;
</script>
<form action="something?val="+x enctype="multipart/form-data" method="post">
<label>Select the Playlist:</label>
<select name="select" id="mySelect">
<option value="#">----Select-----</option>
<option value="playlist1">Playlist1</option>
<option value="playlist2">Playlist2</option>
</select>
<input type="submit">
</form>
Now i want that when i select playlist1 and press the submit button my page should redirect to something?val=playlist1..But it is redirecting to something?val= ..Value of x is not getting printed there.I cannot find the mistake please help.
assign id to your form so that it is easier to access thru js, like:
...
<form id="myform" action="something" enctype="multipart/form-data" method="post">
...
and use change event handler of select element to change your form's action, such as:
var selectEle = document.getElementById("mySelect");
selectEle.onchange = function(event) {
var selValue = event.target.value,
frm = document.getElementById("myform");
frm.action = (selValue != "#") ? "something?val=" + selValue : "something";
}
var x = document.getElementById("mySelect").value;
//works just like a link
window.location.href = "/somewhere?x=" + x;
I am giving you a little explanation of working flow of your code:
once page load following line will run (i am assuming you write your following js in header).at that time you form is not rendered so value of x is undefined,
<script type="text/javascript">
var x = document.getElementById("mySelect").value;
// this is not going to call automatically , when you change value of select box.
</script>
once your form rendered and you change the value of select box you need to call a function to execute above js code to get new value.
and other issue is the way you are using x in html , x is a javascript variable so it can only use inside a tag.
<form action="something?val="+x enctype="multipart/form-data" method="post">
For your expected result there is no need of javascript simple html form can do this, use get method of form it put your input name with value in url automatically
<form action="something" method="get">
<label>Select the Playlist:</label>
<select name="val" id="mySelect">
<option value="#">----Select-----</option>
<option value="playlist1">Playlist1</option>
<option value="playlist2">Playlist2</option>
</select>
<input type="submit">
</form>
Related
Here is what I want to achieve. I have a requirement in which there is one dropdown for country codes and another input field for mobile number. I want to send country code and mobile input value as combined value so for that I am using a hidden field. When not using a hidden field it is easy to change value of a third tag element but that will not send value when form is submitted. So hidden field has to be used. So I have tried doing this but it is not changing value of hidden field.
<html>
<head>
<script language="javascript">
var dropdown = '';
var mobilenum = '';
function calldropdown()
{
dropdown = document.getElementById("country_code_id").value;
return dropdown;
}
function calltxtfield()
{
mobilenum = document.getElementById("mobileid").value;
return mobilenum;
}
function codemobile()
{
document.getElementById("codemobileid").value = calldropdown() + ' ' + calltxtfield;
alert(document.getElementById("codemobileid").value);
}
</script>
</head>
<body>
<form>
<select name="country_code" id="country_code_id" onchange="calldropdown()">
<option value="">Select</option>
<option value="+975">Bhutan</option>
<option value="+977">Nepal</option>
<option value="+94">Sri Lanka</option>
</select>
<input type="text" name="mobile" id="mobileid" onchange="calltxtfield()" />
<input type="hidden" name="codemobile" id="codemobileid" value="" />
<input type="submit" name="submit" value="Submit" onclick="return codemobile();" />
</form>
</body>
</html>
I can not explain it right now, but name="codemobile" seems to silently shadow function codemobile(). Rename one of the two and it works.
Also note that right now you are concatenating the function body (... + calltxtfield;), it should rather be ... + calltxtfield();
I have a select combo box , I have to catch the value of selected item of combo box and set it for a hidden field so that I can catch it in next page. But I am not able to do it. Can any one help me in this.
My form tag is as follow ,
<form class="well" name="ddm" id="ddm" style="margin-left: 30px;" action="<%=request.getContextPath()%>/controller/SMSManagementController">
<input type="hidden" name="flowName" value="PERSIST_SCHOOLYEAR_INFO" >
<input type="hidden" name="schoolYearId" id="schoolYearId" value="">
next my select tag is ,
<div class="form-group control-group">
<select class="form-control selectpicker" name="schoolYear" id="schoolYear">
<option>--Select Grade--</option>
<c:forEach var="grade" items="${gradeInfo}">
<option value="${grade.getDropDownId()}">${grade.getDropDownName()}</option>
</c:forEach>
</select>
</div>
I used javascript to do this as,
<script language="JavaScript">
var schoolYear = document.form.schoolYea.value;
document.ddm.schoolYearId.value = schoolYear;
document.write (schoolYear);
</script>
What is the mistake I am doing?
Guys I solved it like this. ,
<script type='text/javascript'>
$(function() {
$('#schoolYear').change(function() {
// get value from combobox
var x = $(this).val();
// set it to hidden fields
$('#schoolYearId').val(x);
});
});
</script>
it worked.
I'm new to Javascript and HTML.
I have the following form in HTML:
<div id="form-select">
<form id="date_form" onsubmit="return myFunction();">
<datalist id="dates">
<option value="February 7">February 7</option>
<option value="February 14">February 14</option>
<option value="February 21">February 21</option>
<option value="February 28">February 28</option>
</datalist>
<input type="text" class="input" name="data" id="date" value="" list="dates" placeholder="pick a date"><br>
<input type="submit">
</form>
</div>
Here's the javascript in a file called script.js. The js file is linked in the header as <script type="text/javascript" src="script.js" />:
function myFunction(){
var input = document.getElementById("date").value;
if(input==="February 7"){
document.getElementById('w1').innerHTML = document.getElementById('w1').innerHTML + "<h2> HEADING </h2>";
}
return false;
};
When I fill out the form and hit submit, the javascript correctly executes the function and adds "HEADING." However, when I press submit again, it adds "HEADING" a second time under the first instance of it.
How do I make it so that the page "refreshes" each time submit is pressed?
Thanks!
You can Use
window.location.reload();
In your Submit event code..
use jQuery, bind('submit', function(e){ e.preventDefault; ....; })
$('#date_form').submit(function(e){
e.preventDefault();
var input = document.getElementById("date").value;
if(input==="February 7"){
document.getElementById('w1').innerHTML = "<h2> HEADING </h2>";
}
return false;
});
Found another way around the issue. I added the statement:
document.getElementById('week').innerHTML = "";
at the beginning of each call of the function. That way, every time the user clicks submit, the div is emptied out before it is repopulated.
How can I get this working on my website - not just jsfiddle?
I am trying to make it so users can only submit an entry from the datalist - if they type it wrong then there is an error message and the form will not submit.
I have this working in jsFiddle ( http://jsfiddle.net/9DG5m/1/ ), but can't get it to work on my website ( http://austinsamsel.com/test/vanity/index-form.html ) . I looked for errors with firebug and didn't find anything. Been stuck on this a couple hours. ~noob
the script and form:
<script type="text/javascript">
// Find all inputs on the DOM which are bound to a datalist via their list attribute.
var inputs = document.querySelectorAll('input[list]');
for (var i = 0; i < inputs.length; i++) {
// When the value of the input changes...
inputs[i].addEventListener('change', function() {
var optionFound = false,
datalist = this.list;
// Determine whether an option exists with the current value of the input.
for (var j = 0; j < datalist.options.length; j++) {
if (this.value == datalist.options[j].value) {
optionFound = true;
break;
}
}
// use the setCustomValidity function of the Validation API
// to provide an user feedback if the value does not exist in the datalist
if (optionFound) {
this.setCustomValidity('');
} else {
this.setCustomValidity('Spelling counts.');
}
});
}
</script>
<form id="type_form" method="post" >
<input id="nav" list="optionzzz" maxlength="10" class="mustbe" type="text" autocomplete="off" name="nav" placeholder="TYPE YOUR CHOICE... (spelling counts)" autofocus required>
<datalist id="optionzzz">
<option value="OPTION1">
<option value="OPTION2">
<option value="OPTION3">
<option value="OPTION4">
<option value="OPTION5">
</datalist>
<script type="text/javascript">
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("nav").focus();
}
</script>
<button class="send" type="submit">SEND</button></form>
Another way to enforce choosing from a datalist is to have every item of the datalist appear in the pattern property of the input as well. Example:
<form>
<input required list="datalist" pattern="one|two|three" name="me">
<datalist id="datalist">
<option value="one">
<option value="two">
<option value="three">
</datalist>
<button type="submit">Submit</button>
</form>
The solution is to move your inline script to end of page so it would be
<script type="text/javascript">
// Find all inputs on the DOM which are bound to a datalist via their list attribute.
var inputs = document.querySelectorAll('input[list]');
....
</script>
</body>
</html>
because the script is executing on elements which are not loaded yet, so during this
var inputs = document.querySelectorAll('input[list]');
there are no inputs yet loaded.
You can also include the function in
$(document).ready(function () { .. //your function will come here }
so this will be executed when dom is ready
SO I have a form that look similar to
<form action="test.php" id="checksub" method="post">
<div>
<select name="mydropdown">
<option value="buy">buy</option>
<option value="sell">sell</option>
</select>
</div>
autocomplete text input that triggers "checksub"
<input type="submit" id="checksub" name="checksub" style="visibility:hidden">
<input type="submit" id="newsbutton" name="newsbutton">
</form>
<script type="text/javascript">
$('#newbutton').click(function() {
var newaction = "cantfinditems.php";
$("#checksub").prop("action", newaction);
$('#checksub').submit();
});
</script>
Now the submit button is hidden because the autocomplete triggers it anyway, but if the user cant find what they are looking for I want a button that says "cant find what your'e looking for?"
I want this button to have a different action to the form action, ie window.location = cantfinditems.php
but I also want to carry the POST data from the form ie "mydropdown".
Thank you
Ok, so you need a second button, which calls a JavaScript function. In this function, you do a number of things:
Set the action attribute of the form to your alternate action (e.g. cantfinditems.php)
var newaction = "cantfinditems.php";
$("#form_id").prop("action", newaction);
Submit the form
$('#form_id').submit();
So a full example would be:
<script type="text/javascript">
$('#yourbuttonid').click(function() {
var newaction = "cantfinditems.php";
$("#form_id").prop("action", newaction);
$('#form_id').submit();
});
</script>