Develop Reference

How to enable disable text input while making my function modular

Here is my script, what my goal is if other is selected in select, the other text input beside it will be enabled, this is what i've got so far, any approach will be really appreciated, I have 4 questions like this and I want it to be modular, best approach for doing my function to be reuseable.. How do I properly do this without any problem posting my data as 2 name inputs will generate 2 post variables in php.. T_T
<script type="text/javascript" charset="utf-8">
function validate()
{
var ddl = document.getElementById("cause_pain");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "OTHER")
{
document.getElementsByClassName("causepain")[0].removeAttribute("name");
document.getElementsByClassName("causepain1")[0].removeAttribute("disabled");
}
}
</script>
<form action="test.php" method="GET">
<select class="select causepain" id="cause_pain" name="cause_pain" onchange="validate()">
<option value="" selected="selected">Select Cause of Pain</option>
<option value="ARTHRITIS">ARTHRITIS</option>
<option value="RHEUMATISM">RHEUMATISM</option>
<option value="OLD AGE">OLD AGE</option>
<option value="ACTIVE LIFESTYLE WHEN YOUNGER">ACTIVE LIFESTYLE WHEN YOUNGER</option>
<option value="OTHER">OTHER</option>
</select>
<input class="causepain1" type="text" id="cause_pain" name="cause_pain" size="40" onkeyup="clean('this.id')" disabled>
<input type="submit" id="submit"/>
</form>

This method is reusable and pretty straight forward. Using data attributes, you could specify the element that needs to be shown on the specific option element. Also before showing any input element hide the elements that were attributed to the previous selection.
Example:
<form action="test.php" method="GET">
<select class="select causepain" id="cause_pain" name="cause_pain">
<option value="" selected="selected">Select Cause of Pain</option>
<option value="ARTHRITIS">ARTHRITIS</option>
<option value="RHEUMATISM">RHEUMATISM</option>
<option value="OLD AGE">OLD AGE</option>
<option value="ACTIVE LIFESTYLE WHEN YOUNGER">ACTIVE LIFESTYLE WHEN YOUNGER</option>
<option value="OTHER" data-show="cause_pain_other">OTHER</option>
</select>
<input class="causepain1" type="text" id="cause_pain_other" name="cause_pain" size="40"
onkeyup="clean('this.id')" disabled style="display: none;">
<input type="submit" id="submit"/>
</form>
<script type="text/javascript" charset="utf-8">
var selectedOpt;
function selectionChanged(e) {
if (selectedOpt && selectedOpt.dataset.show) {
var showEl = document.getElementById(selectedOpt.dataset.show);
showEl.disabled = true;
showEl.style.display = 'none';
}
selectedOpt = this.querySelector('[value="'+e.target.value+'"]');
if (selectedOpt.dataset.show) {
var showEl = document.getElementById(selectedOpt.dataset.show);
showEl.disabled = false;
showEl.style.display = 'block';
}
}
document.querySelector('select').addEventListener('change', selectionChanged);
</script>
Your selectedOpt should be an object if you're using multiple selects on the same page and then just add the element to the object with the id as an index:
var selectedOpt = {};
...
selectedOpt[this.id] = this.querySelector('[value="'+e.target.value+'"]');

How to submit textbox value instead of "Other" to database

The following html code is part of a form, which sends the information to a java servlet and updates sql database. It is a dropdown menu. When the user selects "Other", javascript makes a textbox appear so that the user can specify more detail. However, when user presses submit button, in the database, it simply says "Other" instead of what the user entered in the text box. Help is appreciated, thanks!
<script type="text/javascript">
function showfield(name){
if (name == 'Other')
document.getElementById('div1').innerHTML = 'Please Specify: <input type="text" name="other" />';
else
document.getElementById('div1').innerHTML = '';
}
</script>
<select id="description" name="description" onchange="showfield(this.options[this.selectedIndex].value)" required>
<option disabled selected value> ---Select--- </option>
<option value="Accommodation">Accommodation</option>
<option value="Travel">Travel</option>
<option value="Meal Allowanced">Meal Allowances</option>
<option value="Flat Rate">Flat Rate Expenses</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>

I think the field you're checking on the server is "description" which is the name of your select. Which is indeed set to "Other" (this is the value of the selected option).
I would have written it a bit differently but with the current code you need to name the input with some other name and check that one on your server, or change the selected option value.
Example change for client code:
<select id="description" name="description" required>
<option disabled selected value> ---Select--- </option>
<option value="Accommodation">Accommodation</option>
<option value="Travel">Travel</option>
<option value="Meal Allowanced">Meal Allowances</option>
<option value="Flat Rate">Flat Rate Expenses</option>
<option value="Other">Other</option>
</select>
<div id="div1">
Please Specify: <input type="text" name="otherDescription" />
</div>
<script>
document.querySelector('#description').addEventListener('change', function (evt) {
var inputWrapper = document.getElementById('div1'),
input = inputWrapper.querySelector('input);
if (evt.target.value == 'Other') {
document.getElementById('div1').style.display = '';
} else {
document.getElementById('div1').style.display = 'none';
input.value = '';
}
});
</script>
The you need to check 'otherDescription' on the server.
Hope it helps

Assuming that all of this markup is contained within a <form> element that will be submitted to the server, you should be able to simply check to see if the value posted for description is "Other" and then read the posted value for other.
The code will vary depending on your server-side implementation.

How to change the Input Name based on the dropdown selection in html form?

I have a HTML form which changes its form action based on the drop down selection but input name remains same.
Here is my HTML:
<form action="car.php" method="GET">
Select Your Option :
<select onChange="this.form.action=this.options[this.selectedIndex].value;">
<option value='car.php'>Car Name</option>
<option value='bike.php'>Bike Name</option>
<option value='laptop.php'>Laptop Name</option>
<option value='place.php'>Place Name</option>
<option value='mobile.php'>Mobile Name</option>
</select>
Enter your query // I want to change this also
<input id="Value" name="Value" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>
If I select Car Name and enter Maruti then value is passed like this:
http://www.mywebsite.com/car.php?Value=Maruti
If I select Bike Name and enter Honda then value is passed like this :
http://www.mywebsite.com/bike.php?Value=Honda
My problem is I have to name the column as "Value" in all the 5 database which stores all the information regarding all this, which I want to avoid.
I want, If I select Car Name and enter Maruti then value should pass like this
http://www.mywebsite.com/car.php?car=Maruti
If I select Bike Name and enter Honda then value should pass like this
http://www.mywebsite.com/bike.php?bike=Honda
What changes should be made in the code to achieve this goal?
If this can also happen then its very nice otherwise no problem.
In the form it is written Enter your query. I want the same change to happen here. If I select Car Name then it should be Enter you car. If I select Bike Name then it should be Enter your bike... and so on.
UPDATE
Little modification I need. When selecting car, the input name is changing to car, the form action is changing to car.php and query to Enter your car. But If I want to change the name like this then what should I do? When I will select anything say bike then form action will be changed to bike.php, But I want input name to be different say USY and Enter your bike to Enter your Serial No. What should I do ?

I have updated the code now and got ur exact requirement now and i hope this will help you
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
var str=$(this).val(); // On Change get the option value
$("form").attr("action",str);
var res=str.split(".");
$("#input1").attr("name",res[0]);
$(".title").html("Enter your "+res[0]+" Name."); // Add this below $("input").attr("name",res[0]);
if(res[0]=='bike')
{
var title2="XYZ";
var title3="Serial No";
}
else if(res[0]=='laptop')
{
var title2="ABC";
var title3="Model No";
}
else if(res[0]=='place')
{
var title2="KLM";
var title3="Area";
}
else if(res[0]=='mobile')
{
var title2="FGH";
var title3="Brand";
}
$("#input2").attr("name",title2);
$("#input3").attr("name",title3);
$(".title2").html("Enter your "+title3);
});
});
</script>
<form action="car.php" method="GET">
Select Your Option :
<select value="car.php">
<option value='car.php'>Car Name</option>
<option value='bike.php'>Bike Name</option>
<option value='laptop.php'>Laptop Name</option>
<option value='place.php'>Place Name</option>
<option value='mobile.php'>Mobile Name</option>
</select>
<span class="title2">Enter your Color</span>
<input name="WER" id="input2" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>
</form>

I advise you to not use JavaScript embedded into HTML attributes. Other than that, you can change the name attribute in the same change handler where you're modifying the action.
document.getElementById('Type').addEventListener('change', function(evt) {
var type = this.selectedOptions[0].value;
console.dir(this);
document.getElementById('Value').setAttribute('name', type);
document.getElementById('QueryName').textContent = type;
this.form.action = type + ".php";
});
<form action="car.php" method="GET">
Select Your Option :
<select id="Type">
<option value='car' selected>Car Name</option>
<option value='bike'>Bike Name</option>
<option value='laptop'>Laptop Name</option>
<option value='place'>Place Name</option>
<option value='mobile'>Mobile Name</option>
</select>
Enter your <span id="QueryName">car</span>
<input id="Value" name="car" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>
EDIT: If you want everything to be different as said in comments, you can use an object to hold the values. For example,
var setup = {
car: {
action: 'mycar.php',
param: 'DFS',
query: 'color'
},
...
};
and then instead of directly using the option's value, pull from this object based on the selected option.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
var str=$(this).val(); // On Change get the option value
$("form").attr("action",str);
var res=str.split(".");
$("input").attr("name",res[0]);
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<form action="car.php" method="GET">
Select Your Option :
<select value="car.php">
<option value='car.php'>Car Name</option>
<option value='bike.php'>Bike Name</option>
<option value='laptop.php'>Laptop Name</option>
<option value='place.php'>Place Name</option>
<option value='mobile.php'>Mobile Name</option>
</select>
Enter your query // I want to change this also
<input id="Value" name="car" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>
</form>
</html>
I have used jquery here some few changes in html try it out this one
<form action="car.php" method="GET">
Select Your Option :
<select value="car.php">
<option value='car.php'>Car Name</option>
<option value='bike.php'>Bike Name</option>
<option value='laptop.php'>Laptop Name</option>
<option value='place.php'>Place Name</option>
<option value='mobile.php'>Mobile Name</option>
</select>
Enter your query // I want to change this also
<input id="Value" name="car" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>
</form>
And for Jquery you can use this one
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
var str=$(this).val(); // On Change get the option value
$("form").attr("action",str);
var res=str.split(".");
$("input").attr("name",res[0]);
});
});
</script>
This works perfectly for me Enjoy :)

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()"

JavaScript to set datalist by <input list="value"> for HTML5 on input/selection of value in another form

I am creating my first Web Form and I'm looking for a little help getting this JavaScript Function to work for me.
I am trying to use a JavaScript function to specify which datalist to use for a form input list=" " based on the selected value of a separate form. As you can see below I have supplied the first form (which I intend to 'fire' the JavaScript and input the variable) and the second form which should have the input list=" " value set by the script. In the first form I have used two different events simply to figure out which is the appropriate: onselect= and onchange=.
I greatly appreciate any help or comments.
Here is my code, I have approached this quite a few different ways and at this point it exists as:
<form>
Tendon Type: <input list="tendontype">
<datalist id="tendontype">
<option value="Cantilever" onselect="locationScript('ct')">
<option value="Drape" onchange="locationScript('ut')">
<option value="Span">
</datalist>
</form>
<form name="location">
Location: <input id="loc229" list="need js to insert here"><br />
<datalist id="pier">
<option value="Pier EN-1">
<option value="Pier EN-2">
</datalist>
<datalist id="unit">
<option value="Unit EN-2">
<option value="Unit EN-3">
</datalist>
<datalist id="span">
<option value="Span EN-1">
<option value="Span EN-2">
</datalist>
</form>
<script>
function locationScript(x) {
var locationlist;
if (x == 'ct') {
locationlist = setAttribute("list","pier")
} else {
if (x == 'ut') {
locationlist = setAttribute("list","unit")
} else {
locationlist = setAttribute("list","span")
}
}
document.getElementById("loc229").locationlist;
}
</script>