I currently have been working on this code and I can't seem to figure it out. I am planning to make it so that if the radio button is pressed that shipping is not free, that an input field pops up to specifying what the addition cost will be using DOM. I am also trying to figure out how to add text to describe the input field, and to validate the input field.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function myFunction() {
var x = document.createElement("INPUT");
var c = 1;
if (c = 1) {
x.setAttribute("type", "text");
var sp2 = document.getElementById("emailP");
// var br = document.createElement("br");
// sp2.appendChild(br);
// alert("added break");
var sp2 = document.getElementById("emailP");
var parentDiv = sp2.parentNode;
parentDiv.insertBefore(x, sp2);
c++;
alert("Added Text Box");
}
}
</script>
<form action="#" method="post" onsubmit="alert('Your form has been submitted.'); return false;">
<p class="boldParagraph">Upload an Image:</p>
<input type="file" id="pic" accept="image/*" required>
<p class="boldParagraph">Name of seller:</p>
<input class="averageTextBox" type="text" id="seller" value="" required>
<p class="boldParagraph" id = "tip3P">Shipping costs are free:</p>
<input type="radio" name="tip3" value="3" checked /> Yes
<input type="radio" name="tip3" value="4" onclick="myFunction(); this.onclick=null;"/> No
<p class="boldParagraph" id = "emailP">Email of seller:</p>
<input class="averageTextBox" type="email" id="emailAddress" value="" required>
<p class="boldParagraph">Closing date for auction:</p>
<input type="date" id="closeDate" value="" required>
<br><br>
<button>Submit</button>
</form>
</body>
</html>
Create a label element and populate text using innerHTML. and then append to DOM.
Example Snippet:
function myFunction() {
var label = document.createElement("label");
label.innerHTML = "<br>Shipment Cost : ";
var x = document.createElement("INPUT");
var c = 1;
if (c = 1) {
x.setAttribute("type", "text");
var sp2 = document.getElementById("emailP");
// var br = document.createElement("br");
// sp2.appendChild(br);
// alert("added break");
var sp2 = document.getElementById("emailP");
var parentDiv = sp2.parentNode;
parentDiv.insertBefore(x, sp2);
parentDiv.insertBefore(label, x);
c++;
alert("Added Text Box");
}
}
<form action="#" method="post" onsubmit="alert('Your form has been submitted.'); return false;">
<p class="boldParagraph">Upload an Image:</p>
<input type="file" id="pic" accept="image/*" required>
<p class="boldParagraph">Name of seller:</p>
<input class="averageTextBox" type="text" id="seller" value="" required>
<p class="boldParagraph" id="tip3P">Shipping costs are free:</p>
<input type="radio" name="tip3" value="3" checked />Yes
<input type="radio" name="tip3" value="4" onclick="myFunction(); this.onclick=null;" />No
<p class="boldParagraph" id="emailP">Email of seller:</p>
<input class="averageTextBox" type="email" id="emailAddress" value="" required>
<p class="boldParagraph">Closing date for auction:</p>
<input type="date" id="closeDate" value="" required>
<br>
<br>
<button>Submit</button>
</form>
OR
You can keep the text box hidden and show it when user clicks no. Also, apply validations only when no is selected for shipment radio button.
I suggest use jQuery, see the snippet below:
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
var radioButtons = $("[name=tip3]");
radioButtons.on("change", function() {
if ($("[name=tip3]:checked").val() == "3") {
$("#shipmentDetail").hide();
} else {
$("#shipmentDetail").show();
}
})
$("#submit").on("click", function() {
var flag = true;
if ($("[name=tip3]:checked").val() == "4") {
if ($("#shipmentDetail").val() == "") {
flag = false;
alert("enter some value");
}
}
//other validations here
if (flag) {
$("#form").submit()
}
})
#shipmentDetail {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" action="#" method="post">
<p class="boldParagraph">Upload an Image:</p>
<input type="file" id="pic" accept="image/*" required>
<p class="boldParagraph">Name of seller:</p>
<input class="averageTextBox" type="text" id="seller" value="" required>
<p class="boldParagraph" id="tip3P">Shipping costs are free:</p>
<input type="radio" name="tip3" value="3" checked />Yes
<input type="radio" name="tip3" value="4" />No
<label id="shipmentDetail" for="price">Shipment Cost:
<input id="price" type="text" value="" />
</label>
<p class="boldParagraph" id="emailP">Email of seller:</p>
<input class="averageTextBox" type="email" id="emailAddress" value="" required>
<p class="boldParagraph">Closing date for auction:</p>
<input type="date" id="closeDate" value="" required>
<br>
<br>
<button id="submit">Submit</button>
</form>
replace
alert("Added Text Box");
with:
var additional_fees = prompt("Type in");
x.setAttribute("value", additional_fees)
Related
I am trying to detect if an HTML FORM in a web page contains ComboBox or List. . I could detect all the rest and here are my efforts so far. As you can see, the ComboBox is not detected. I understand its not an input control. Is there any other way to do this?
MY SAMPLE CODE:
<html>
<head>
<script language="javascript" type="text/javascript">
function detectTypes() {
var str = document.getElementById("Select1").value;
var inputs = document.querySelectorAll('input');
var inputtype = document.getElementsByTagName ("input");
for(i =0; i < inputs.length; i++)
{
//Output result to console
console.log("The " + i + ". input type = " + inputs[i].type);
//Output result to multiline textbox
var s = inputs[i].type;
document.getElementById('output').value += s.substring(s.length - 10) + '\n';
}
}
</script>
</head>
<body>
<form name="form1" id="form1" method="">
<p>
<label>TextBox </label>
<input type="text" id="Name">
</p>
<p>
<label>Password</label>
<input type="password" id=phone>
</p>
<p>
<label>Dropdown Comobox</label>
<select name="Options" id="Select1">
<option value="Jack,12345">Jack</option>
<option value="John,45678">John</option>
<option value="Tom,98765">Tom</option>
</select>
</p>
<P>
<label>CheckBox</label>
<input type="checkbox" id="check1">
<p>
<label>Radio Button</label>
<input type="radio" id="Option1" name="Option1" value="">
<p>
<label>Color Box</label>
<input type="color" name="ColorCode" id="color-picker">
</form>
Click to List types of controls
<p>
<label>RESULT:</label>
<textarea name="output" id="output" rows="7" cols="30"></textarea>
</p>
</body>
</html>
I would praise your work becse it is very creative
I have solved your problem
<html>
<body>
<form name="form1" id="form1" method="">
<p>
<label>TextBox </label>
<input type="text" id="Name">
</p>
<p>
<label >Password</label>
<input type="password" id="phone">
</p>
<p>
<label>Dropdown Comobox</label>
<select name="Options" id="Select1">
<option value="Jack,12345">Jack</option>
<option value="John,45678">John</option>
<option value="Tom,98765">Tom</option>
</select>
<input type="hidden">
</p>
<P>
<label>CheckBox</label>
<input type="checkbox" id="check1">
<p>
<label>Radio Button</label>
<input type="radio" id="Option1" name="Option1" value="">
<p>
<label>Color Box</label>
<input type="color" name="ColorCode" id="color-picker">
</form>
Click to List types of controls
<p>
<label>RESULT:</label>
<textarea name="output" id="output" rows="7" cols="30"></textarea>
</p>
</body>
</html>
/*
//* user script
function detectTypes() {
//var str = document.getElementById("Select1").value;
var inputs = document.querySelectorAll('input');
var inputtype = document.getElementsByTagName("input");
for(i =0; i < inputs.length; i++)
{
//Output result to console
//console.log("The " + i + ". input type = " + inputs[i].type);
//Output result to multiline textbox
var s = inputs[i].type;
document.getElementById('output').value += s.substring(s.length - 10) + '\n' ;
}
} */
function detectTypes(){
// const inputtype = { "'SELECT'" : 'Dropdown' , 'OPTION' : 'Combo Box'} // I wish, it would work as alert(inputtype.SELECT) will show deopdown
var inputs = document.querySelectorAll("input, select");
var s = "hi";
for(i=0;i<=inputs.length;i++){
var tagnames = inputs[i].tagName;
if(tagnames == "INPUT"){
document.getElementById('output').value += inputs[i].type + '\n';
}else{
document.getElementById('output').value += tagnames.toLowerCase() + '\n';
}
}
}
setTimeout(detectTypes, 1);
I would be glad if you contact. I have to discuss further about this problem. Contact me libertmahin#gmail.com
I'm making an html question form. Based on the answers, it performs JavaScript algorithms. Then JavaScript takes the numbers it calculated and uses document.getElementById to put the answers in a hidden html form. PHP puts the form into variables, and updates the MYSQL row that was selected. I didn't show the actual calculations because it is over 300 lines of code. The values in the database are blank every time I click submit. Thanks to anyone who can help me out!!!
<html>
<form method="post" id="formformid">
//These are where the JavaScript values are entered.
<input class="hidden" name="processfnumaa" id="processfnum" type="number" value="0">
<input class="hidden" name="technologyfnumaa" id="technologyfnum" type="number" value="0">
<input class="hidden" name="staffingfnumaa" id="staffingfnum" type="number" value="0">
<input class="hidden" name="Question4aa" id="Question4aa" type="text">
<input class="hidden" name="Question5aa" id="Question5aa" type="text">
<input class="hidden" name="Question6aa" id="Question6aa" type="text">
<input class="hidden" name="Question7aa" id="Question7aa" type="text">
<input class="hidden" name="Question8aa" id="Question8aa" type="text">
<input class="hidden" name="Question9aa" id="Question9aa" type="text">
<input class="hidden" name="Question10aa" id="Question10aa" type="text">
<input class="hidden" name="Question11aa" id="Question11aa" type="text">
<input class="hidden" name="Question12aa" id="Question12aa" type="text">
<input class="hidden" name="Question13aa" id="Question13aa" type="text">
<input class="hidden" name="Question14aa" id="Question14aa" type="text">
<input class="hidden" name="Question15aa" id="Question15aa" type="text">
<input class="hidden" name="Question16aa" id="Question16aa" type="text">
<input class="hidden" name="Question17aa" id="Question17aa" type="text">
<input class="hidden" name="Question18aa" id="Question18aa" type="text">
<input class="hidden" name="Question19aa" id="Question19aa" type="text">
<input class="hidden" name="Question20aa" id="Question20aa" type="text">
<input class="hidden" name="Question21aa" id="Question21aa" type="text">
<input class="hidden" name="Question22aa" id="Question22aa" type="text">
<input class="hidden" name="Question23aa" id="Question23aa" type="text">
<input class="hidden" name="Question24aa" id="Question24aa" type="text">
<input class="hidden" name="Question25aa" id="Question25aa" type="text">
<input type="button" id="savebutton" onclick="submitthatform()" value="Save Changes" style="display: none;" />
</form>
//This function is called when the user is done editing the answers in a different form.
<script type="text/javascript">
function submitthatform() {}
document.getElementById("Question4aa").value = a;
document.getElementById("Question5aa").value = b;
document.getElementById("Question6aa").value = c;
document.getElementById("Question7aa").value = d;
document.getElementById("Question8aa").value = e;
document.getElementById("Question9aa").value = f;
document.getElementById("Question10aa").value = g;
document.getElementById("Question11aa").value = h;
document.getElementById("Question12aa").value = i;
document.getElementById("Question13aa").value = j;
document.getElementById("Question14aa").value = k;
document.getElementById("Question15aa").value = l;
document.getElementById("Question16aa").value = m;
document.getElementById("Question17aa").value = n;
document.getElementById("Question18aa").value = o;
document.getElementById("Question19aa").value = p;
document.getElementById("Question20aa").value = q;
document.getElementById("Question21aa").value = r;
document.getElementById("Question22aa").value = s;
document.getElementById("Question23aa").value = t;
document.getElementById("Question24aa").value = u;
document.getElementById("Question25aa").value = v;
var awsasdg = document.getElementById("Question4aa").value;
alert(awsasdg);
document.getElementById("processfnum").value = processfinalnumber;
document.getElementById("technologyfnum").value = technologyfinalnumber;
document.getElementById("staffingfnum").value = staffingfinalnumber;
document.getElementById("formformid").submit();
}
</script>
</html>
<?php
//Here, I'm trying to update a row in my database. This is just the part of the file that ends up blank in the database.
$Question4aa = mysql_real_escape_string($_POST['Question4aa']);
$Question5aa = mysql_real_escape_string($_POST['Question5aa']);
$Question6aa = mysql_real_escape_string($_POST['Question6aa']);
$Question7aa = mysql_real_escape_string($_POST['Question7aa']);
$Question8aa = mysql_real_escape_string($_POST['Question8aa']);
$Question9aa = mysql_real_escape_string($_POST['Question9aa']);
$Question10aa = mysql_real_escape_string($_POST['Question10aa']);
$Question11aa = mysql_real_escape_string($_POST['Question11aa']);
$Question12aa = mysql_real_escape_string($_POST['Question12aa']);
$Question13aa = mysql_real_escape_string($_POST['Question13aa']);
$Question14aa = mysql_real_escape_string($_POST['Question14aa']);
$Question15aa = mysql_real_escape_string($_POST['Question15aa']);
$Question16aa = mysql_real_escape_string($_POST['Question16aa']);
$Question17aa = mysql_real_escape_string($_POST['Question17aa']);
$Question18aa = mysql_real_escape_string($_POST['Question18aa']);
$Question19aa = mysql_real_escape_string($_POST['Question19aa']);
$Question20aa = mysql_real_escape_string($_POST['Question20aa']);
$Question21aa = mysql_real_escape_string($_POST['Question21aa']);
$Question22aa = mysql_real_escape_string($_POST['Question22aa']);
$Question23aa = mysql_real_escape_string($_POST['Question23aa']);
$Question24aa = mysql_real_escape_string($_POST['Question24aa']);
$Question25aa = mysql_real_escape_string($_POST['Question25aa']);
$processfnumaa = mysql_real_escape_string($_POST['processfnumaa']);
$technologyfnumaa = mysql_real_escape_string($_POST['technologyfnumaa']);
$staffingfnumaa = mysql_real_escape_string($_POST['staffingfnumaa']);
if($_SERVER['REQUEST_METHOD'] === 'POST'){
mysql_query("UPDATE HuronForm1 SET Question4aa='$question4aa',Question5aa='$question5aa',Question6aa='$question6aa',Question7aa='$question7aa',Question8aa='$question8aa',Question9aa='$question9aa',Question10aa='$question10aa',Question11aa='$question11aa',Question12aa='$question12aa',Question13aa='$question13aa',Question14aa='$question14aa',Question15aa='$question15aa',Question16aa='$question16aa',Question17aa='$question17aa',Question18aa='$question18aa',Question19aa='$question19aa',Question20aa='$question20aa',Question21aa='$question21aa',Question22aa='$question22aa',Question23aa='$question23aa',Question24aa='$question24aa', processfnum='$processfnumaa', technologyfnum='$technologyfnumaa',staffingfnum='$staffingfnumaa',Question25aa='$question25aa' WHERE Id='$idchosen'");
}
?>
Maybe you would use the same case for variables?
If you have var $Question4aa, it should be the same in mysql string, not $question4aa
I've created a form, that I need to validate with JavaScript or using Jquery. How would I validate if the dropdown list has the value "Title" and if the text box is empty and display it on the page rather then an alert box :
<form action="" method="post" accept-charset="UTF-8" name="myForm">
<option value="Title" id="title_3-0" disabled selected>Title</option><option value="Mr" id="title_3-1">Mr</option>
<option value="Mrs" id="title_3-2">Mrs</option><option value="Miss" id="title_3- 3">Miss</option>
<option value="Ms" id="title_3-4">Ms</option><option value="Dr" id="title_3-5">Dr</option>
<option value="Professor" id="title_3-6">Professor</option></select></div></div>
TextBox:
<input type="text" class="text" name="firstname_4" id="amf-input-firstname_4" value="" placeholder="First Name">
I also have a button.
Here is a start:
<script>
function validateForm()
{
var return_value = true;
var x=document.forms["myForm"]["firstname_4"].value;
if (x==null || x=="")
{
document.getElementById("error").innerHTML += "First name must be filled out<br />";
return_value = false;
}
var y=document.forms["myForm"]["selectid"];
if(y.options[y.selectedIndex].value == "Title")
{
document.getElementById("error").innerHTML += "You need to select a title<br />";
return_value = false;
}
return return_value;
}
</script>
<span id="error"></span>
<form name="myForm" onsubmit="return validateForm()" method="post">
First name: <input type="text" class="text" name="firstname_4" id="amf-input-firstname_4" value="" placeholder="First Name">
<input type="submit" value="Submit">
</form>
If you like, you can also put an "error span element" above/beneath each field and set each error individually:
<script>
function validateForm()
{
var return_value = true;
var x=document.forms["myForm"]["firstname_4"].value;
if (x==null || x=="")
{
document.getElementById("error1").innerHTML = "First name must be filled out";
return_value = false;
}
var y=document.forms["myForm"]["selectid"];
if(y.options[y.selectedIndex].value == "Title")
{
document.getElementById("error2").innerHTML = "You need to select a title";
return_value = false;
}
return return_value;
}
</script>
<form name="myForm" onsubmit="return validateForm()" method="post">
First name: <input type="text" class="text" name="firstname_4" id="amf-input-firstname_4" value="" placeholder="First Name">
<span id="error1"></span>
Title: <input .... >
<span id="error2"></span>
<input type="submit" value="Submit">
</form>
Since you are new to this, look up these links and read up. It will guide you through it. That's better than us giving you all the code. Because this kind of form validation is important and hence you better learn it from scratch.
Link-1
Link-2
Link-3 (using library)
Html:
<select id="ddl"> <option value="Title" id="title_3-0" selected>Title</option><option value="Mr" id="title_3-1">Mr</option>
<option value="Mrs" id="title_3-2">Mrs</option><option value="Miss" id="title_3- 3">Miss</option>
<option value="Ms" id="title_3-4">Ms</option><option value="Dr" id="title_3-5">Dr</option>
<option value="Professor" id="title_3-6">Professor</option></select>
<input type="text" class="text" name="firstname_4" id="amf-input-firstname_4" value="" placeholder="First Name">
<input type="button" value="Submit" id="btn"/>
<span id="error"/>
JQuery:
$('#btn').click(function (){
if(($('#amf-input-firstname_4').val()=='') || ($("#ddl :selected").val() == 'Title'))
{
$('#error').html('Please select title and enter name.');
}
else
{
$('#error').html('Success');
}
return false;
});
Demo:
http://jsfiddle.net/8h8HF/
I don't know anything about html and most especially javascript.. but we have this activity on how you'll call the javascript function that is located at the <head></head> of the html tag?
And what if there are several functions? Can I call it at the same time in one button? or should I create another function and put all the functions in there?
This is what our activity is all about... in a javascript button, when clicked, it must calculate all transactions? I have 5 functions, and one of them is called by a button tag, while the other 4 are inside of that function. I don't really know what to do... But when I clicked the button, nothing will happen. Btw, it's a Reservation form, so when the button is clicked, it must calculate all the inputs and shows a confirmation page/alert with the prices and such. Thanks guys!
This is my code of the form:
<form name="reserve" action="" id="reserve" method="post">
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name: </label>
<input type="text" name="firstname" value="firstname"
onfocus="if (this.value==this.defaultValue)this.value='';"
onblur="if(this.value=='')this.value=this.defaultValue;"/>
<input type="text" name="lastname" value="lastname"
onfocus="if(this.value==this.defaultValue)this.value='';"
onblur="if(this.value=='')this.value=this.defaultValue;"/>
<br>
<label for="address">Address: </label>
<textarea name="address" cols="30" rows="3"></textarea>
<br>
<label for="city">City: </label>
<input type="text" name="city">
<label for="country">Country: </label>
<select name="country">
<option value=""></option>
<option value="PH">Philippines</option>
<option value="TH">Thailand</option>
<option value="VN">Vietnam</option>
<option value="MY">Malaysia</option>
<option value="ID">Indonesia</option>
<option value="SG">Singapore</option>
</select>
<br>
<label for="email">Email: </label>
<input type="email" name="email">
<label for="phone">Phone: </label>
<input type="tel" name="phone">
</fieldset>
<hr>
<fieldset>
<legend>Accomodation Request</legend>
<label for="checkin">Check-in: </label>
<input type="date" name="checkin">
<label for="checkout">Check-out: </label>
<input type="date" name="checkout">
<br>
<label for="roomtype">Room type: </label> <br>
<input type="checkbox" id="s" name="roomtype" value="superior">Superior |||||
<label for="sguest">No.of guests: </label>
<input type="text" id="supg" name="sguest" size="3"> <br>
<input type="checkbox" id="d" name="roomtype" value=deluxe">Deluxe |||||||
<label for="dguest">No.of guests: </label>
<input type="text" id="delg" name="dguest" size="3"> <br>
<input type="checkbox" id="p" name="roomtype" value="Premier">Premier |||||
<label for="pguest">No.of guests: </label>
<input type="text" id="premg" name="pguest" size="3"> <br>
</fieldset>
<br>
<hr>
<label for="adinfo">Additional Information:</label>
<textarea name="adinfo" cols="40" rows="10"></textarea>
<br><br>
<hr>
<input type="button" name="submit" onclick="formSubmit()"
class="submit" value="Reserve">
</form>
And this is javascript code:
function superiorroom(){
var roomprice=0;
var theForm = document.forms["reserve"]
var s = theForm.elements["s"]
var supg = theForm.elements["supg"]
var t=0;
If (s.checked==true)
{
roomprice=5400;
squantity=parseInt(squantity.value);
t=parseInt(t);
t= (roomprice*squantity)*supg;
}
return t;
}
function deluxeroom(){
var roomprice=0;
var theForm = document.forms["reserve"]
var d = theForm.elements["d"]
var delg = theForm.elements["delg"]
var u=0;
If (d.checked==true)
{
roomprice=7200;
dquantity=parseInt(dquantity.value);
u=parseInt(u);
u= (roomprice*dquantity)*delg;
}
return u;
}
function premiumroom(){
var roomprice=0;
var theForm = document.forms["reserve"]
var p = theForm.elements["p"]
var premg = theForm.elements["premg"]
var v=0;
If (p.checked==true)
{
roomprice=9800;
pquantity=parseInt(pquantity.value);
v=parseInt(v);
v= (roomprice*pquantity)*premg;
}
return u;
}
</script>
I hope you can help me guys!
Hi I have change your code a little check it
<input type="button" name="submit" onclick="return formSubmit()" class="submit" value="Reserve">
I changed your code as like this : Try This
Button
<input type="button" id="submit" name="submit" onclick="return formSubmit()" class="submit" value="Reserve">
Scripts
<script>
$("#submit").click(function () {
if ( document.getElementById("s").checked =checked)
superiorroom();
else if(document.getElementById("d").checked =checked)
deluxeroom();
else if(document.getElementById("p").checked =checked)
premiumroom();
});
</script>
<script>
function superiorroom(){
var roomprice=0;
var theForm = document.forms["reserve"]
var s = theForm.elements["s"]
var supg = theForm.elements["supg"]
var t=0;
If (s.checked==true)
{
roomprice=5400;
squantity=parseInt(squantity.value);
t=parseInt(t);
t= (roomprice*squantity)*supg;
}
return t;
}
function deluxeroom(){
var roomprice=0;
var theForm = document.forms["reserve"]
var d = theForm.elements["d"]
var delg = theForm.elements["delg"]
var u=0;
If (d.checked==true)
{
roomprice=7200;
dquantity=parseInt(dquantity.value);
u=parseInt(u);
u= (roomprice*dquantity)*delg;
}
return u;
}
function premiumroom(){
var roomprice=0;
var theForm = document.forms["reserve"]
var p = theForm.elements["p"]
var premg = theForm.elements["premg"]
var v=0;
If (p.checked==true)
{
roomprice=9800;
pquantity=parseInt(pquantity.value);
v=parseInt(v);
v= (roomprice*pquantity)*premg;
}
return u;
}
</script>
I would like to create a registration form with hide-able and revealable password input. I tried this (JS):
function showhide(melyik,hol) {
var melyiket = document.getElementById(melyik);
var melyikkel = document.getElementById(hol);
if (melyikkel.value == '1') {
document.getElementById(melyikkel).value='0';
document.getElementById(melyiket).type='password';
} else {
document.getElementById(melyikkel).value='1';
document.getElementById(melyiket).type='text';
}
}
Form:
<div style="margin-top:20px;">
<p>SQL host: <input type="text" name="sql_host" value="localhost"/></p>
<p>SQL adatbázis: <input type="text" name="sql_db"/></p>
<p>SQL felhasználó: <input type="text" name="sql_user"/></p>
<p>SQL jelszó: <input type="text" name="sql_password" id="sql_password"/>
<input type="checkbox" name="show_password_1" id="show_password_1" value="0" onclick="showhide('sql_password','show_password_1');">
</p>
</div>
I want to do this:
If checkbox is checked the password input type is text. When not checked the password type is password... I wrote this JavaScript, but not working. :-(
Use .checked to see if the checkbox is selected, not value. Here's a working example.
HTML:
<input type="password" name="pwd" id="pwd" />
<input type="checkbox" name="show" id="show" onclick="showhide('pwd','show');">
JS:
function showhide(pwd,show)
{
var epwd = document.getElementById(pwd);
var eshow = document.getElementById(show);
epwd.type = eshow.checked ? 'text' : 'password';
}