how to move html content by html select with javascript
1
so here this is like my day 1 to write javascript code "as i mean implementing them into my html" i just kinda stucked for hours to do this
so basically i just have this registration form like on below
<div id="selaccount">
<select id = "accounttype"
<option id = "typeA">Firstname</option>
<option id = "typeB">Lastname</option>
<option id = "typeC">Email<option>
</select>
</div>
<div id="regform">
<div id="formA">
<input type = "text" placeholder = "Firstname">
</div>
<div id="formB">
<input type = "text" placeholder = "Lastname">
</div>
<div id="formC">
<input type = "Text" placeholder = "Email">
</div>
</div>
</body>
<script src ="main.js"> </script>
</html>
and on my main.js file i've been trying to write down this code :
function optionselect() {
var A = document.getElementById("selaccount");
var selected = A.SelectedIndex;
if (selected = document.getElementById("typeA"){
$("#formA").appendTo("#regform");}
else if (selected = document.getElementById("typeB){
$("formB).appendTo("#regorm");}
}
and its just didnt show anything even the vscode cant show me the debugger,anyway thanks for any respond,i really appreciate it
and sorry for bad english
javascript html select append options
asked Nov 15 '18 at 10:17
yami sukehiroyami sukehiro
82
|
show 5 more comments
1
so here this is like my day 1 to write javascript code "as i mean implementing them into my html" i just kinda stucked for hours to do this
so basically i just have this registration form like on below
<div id="selaccount">
<select id = "accounttype"
<option id = "typeA">Firstname</option>
<option id = "typeB">Lastname</option>
<option id = "typeC">Email<option>
</select>
</div>
<div id="regform">
<div id="formA">
<input type = "text" placeholder = "Firstname">
</div>
<div id="formB">
<input type = "text" placeholder = "Lastname">
</div>
<div id="formC">
<input type = "Text" placeholder = "Email">
</div>
</div>
</body>
<script src ="main.js"> </script>
</html>
and on my main.js file i've been trying to write down this code :
function optionselect() {
var A = document.getElementById("selaccount");
var selected = A.SelectedIndex;
if (selected = document.getElementById("typeA"){
$("#formA").appendTo("#regform");}
else if (selected = document.getElementById("typeB){
$("formB).appendTo("#regorm");}
}
and its just didnt show anything even the vscode cant show me the debugger,anyway thanks for any respond,i really appreciate it
and sorry for bad english
javascript html select append options
asked Nov 15 '18 at 10:17
yami sukehiroyami sukehiro
82
Firs of all. You have planty of typos there. Second - dont mix jquery and vanilla js.
– Smollet777
Nov 15 '18 at 10:26
What do you want to achive?
– Smollet777
Nov 15 '18 at 10:28
Hi @sukehiro. what do you want to ??
– Faraz
Nov 15 '18 at 10:29
@Smollet777 actually i just trying to make the regform switch when the select selected
– yami sukehiro
Nov 15 '18 at 10:31
@Smollet777 uhh sorry i dont know that javascript cant do this
– yami sukehiro
Nov 15 '18 at 10:32
|
show 5 more comments
1
1
1
so here this is like my day 1 to write javascript code "as i mean implementing them into my html" i just kinda stucked for hours to do this
so basically i just have this registration form like on below
<div id="selaccount">
<select id = "accounttype"
<option id = "typeA">Firstname</option>
<option id = "typeB">Lastname</option>
<option id = "typeC">Email<option>
</select>
</div>
<div id="regform">
<div id="formA">
<input type = "text" placeholder = "Firstname">
</div>
<div id="formB">
<input type = "text" placeholder = "Lastname">
</div>
<div id="formC">
<input type = "Text" placeholder = "Email">
</div>
</div>
</body>
<script src ="main.js"> </script>
</html>
and on my main.js file i've been trying to write down this code :
function optionselect() {
var A = document.getElementById("selaccount");
var selected = A.SelectedIndex;
if (selected = document.getElementById("typeA"){
$("#formA").appendTo("#regform");}
else if (selected = document.getElementById("typeB){
$("formB).appendTo("#regorm");}
}
and its just didnt show anything even the vscode cant show me the debugger,anyway thanks for any respond,i really appreciate it
and sorry for bad english
javascript html select append options
asked Nov 15 '18 at 10:17
yami sukehiroyami sukehiro
82
so here this is like my day 1 to write javascript code "as i mean implementing them into my html" i just kinda stucked for hours to do this
so basically i just have this registration form like on below
<div id="selaccount">
<select id = "accounttype"
<option id = "typeA">Firstname</option>
<option id = "typeB">Lastname</option>
<option id = "typeC">Email<option>
</select>
</div>
<div id="regform">
<div id="formA">
<input type = "text" placeholder = "Firstname">
</div>
<div id="formB">
<input type = "text" placeholder = "Lastname">
</div>
<div id="formC">
<input type = "Text" placeholder = "Email">
</div>
</div>
</body>
<script src ="main.js"> </script>
</html>
and on my main.js file i've been trying to write down this code :
function optionselect() {
var A = document.getElementById("selaccount");
var selected = A.SelectedIndex;
if (selected = document.getElementById("typeA"){
$("#formA").appendTo("#regform");}
else if (selected = document.getElementById("typeB){
$("formB).appendTo("#regorm");}
}
and its just didnt show anything even the vscode cant show me the debugger,anyway thanks for any respond,i really appreciate it
and sorry for bad english
javascript html select append options
javascript html select append options
asked Nov 15 '18 at 10:17
yami sukehiroyami sukehiro
82
asked Nov 15 '18 at 10:17
yami sukehiroyami sukehiro
82
asked Nov 15 '18 at 10:17
yami sukehiroyami sukehiro
82
asked Nov 15 '18 at 10:17
yami sukehiroyami sukehiro
82
asked Nov 15 '18 at 10:17
yami sukehiroyami sukehiro
82
82
Firs of all. You have planty of typos there. Second - dont mix jquery and vanilla js.
– Smollet777
Nov 15 '18 at 10:26
What do you want to achive?
– Smollet777
Nov 15 '18 at 10:28
Hi @sukehiro. what do you want to ??
– Faraz
Nov 15 '18 at 10:29
@Smollet777 actually i just trying to make the regform switch when the select selected
– yami sukehiro
Nov 15 '18 at 10:31
@Smollet777 uhh sorry i dont know that javascript cant do this
– yami sukehiro
Nov 15 '18 at 10:32
|
show 5 more comments
Firs of all. You have planty of typos there. Second - dont mix jquery and vanilla js.
– Smollet777
Nov 15 '18 at 10:26
What do you want to achive?
– Smollet777
Nov 15 '18 at 10:28
Hi @sukehiro. what do you want to ??
– Faraz
Nov 15 '18 at 10:29
@Smollet777 actually i just trying to make the regform switch when the select selected
– yami sukehiro
Nov 15 '18 at 10:31
@Smollet777 uhh sorry i dont know that javascript cant do this
– yami sukehiro
Nov 15 '18 at 10:32
Firs of all. You have planty of typos there. Second - dont mix jquery and vanilla js.
– Smollet777
Nov 15 '18 at 10:26
Firs of all. You have planty of typos there. Second - dont mix jquery and vanilla js.
– Smollet777
Nov 15 '18 at 10:26
What do you want to achive?
– Smollet777
Nov 15 '18 at 10:28
What do you want to achive?
– Smollet777
Nov 15 '18 at 10:28
Hi @sukehiro. what do you want to ??
– Faraz
Nov 15 '18 at 10:29
Hi @sukehiro. what do you want to ??
– Faraz
Nov 15 '18 at 10:29
@Smollet777 actually i just trying to make the regform switch when the select selected
– yami sukehiro
Nov 15 '18 at 10:31
@Smollet777 actually i just trying to make the regform switch when the select selected
– yami sukehiro
Nov 15 '18 at 10:31
@Smollet777 uhh sorry i dont know that javascript cant do this
– yami sukehiro
Nov 15 '18 at 10:32
@Smollet777 uhh sorry i dont know that javascript cant do this
– yami sukehiro
Nov 15 '18 at 10:32
|
show 5 more comments
4 Answers
4
active
oldest
votes
1
You dont need to add elements to the form with .appendTo.They are already in.
You may want to hide them with CSS display:none. An dispay them with JS display:block.
var<div id="selaccount" onClick="optionselect()">
<select id="accounttype">
<option value="typeA">Firstname</option>
<option value="typeB">Lastname</option>
<option value="typeC">Email
<option>
</select>
</div>
<div id="regform">
<div id="formA" style="display:none">
<input type="text" placeholder="Firstname">
</div>
<div id="formB" style="display:none">
<input type="text" placeholder="Lastname">
</div>
<div id="formC" style="display:none">
<input type="Text" placeholder="Email">
</div>
</div>
<script>
function optionselect() {
var selected = document.getElementById("accounttype").value;
var formA = document.getElementById("formA");
var formB = document.getElementById("formB");
var formC = document.getElementById("formC");
formA.style = "display:none"
formB.style = "display:none"
formC.style = "display:none"
if (selected === "typeA") {
formA.style = 'display:block';
} else if (selected === "typeB") {
formB.style = 'display:block';
} else if (selected === "typeC") {
formC.style = 'display:block';
}
}
</script>answered Nov 15 '18 at 12:03
Smollet777Smollet777
1,36011015
ow dude it works for me thanks a lot for saving my lifetime,anyway i just used onchange instead of onclick because sometimes its not gonna work on my browser *cheers
– yami sukehiro
Nov 15 '18 at 13:45
add a comment |
2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selaccount" onChange="optionselect()">
<select id = "accounttype">
<option value = "typeA">Firstname</option>
<option value = "typeB">Lastname</option>
<option value = "typeC">Email<option>
</select>
</div>
<div id="regform">
<div id="formA" style="display:none">
<input type = "text" placeholder = "Firstname">
</div>
<div id="formB" style="display:none">
<input type = "text" placeholder = "Lastname">
</div>
<div id="formC" style="display:none">
<input type = "Text" placeholder = "Email">
</div>
</div>
<script>
function optionselect() {
var selected = $("#accounttype").val();
$("#formA").css('display','none');
$("#formB").css('display','none');
$("#formC").css('display','none');
if (selected == "typeA"){
$("#formA").css('display','block');
}else if (selected == "typeB"){
$("#formB").css('display','block');
}else if (selected == "typeC"){
$("#formC").css('display','block');
}
}
</script>answered Nov 15 '18 at 10:36
Banujan BalendrakumarBanujan Balendrakumar
1,0121212
add a comment |
0
Try This i hope this will work for you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function optionselect() {
var selected = $('#accounttype').val();
$("#formA").hide();
$("#formB").hide();
$("#formC").hide();
if (selected == "typeA") {
$("#formA").show();
}
else if (selected == "typeB") {
$("#formB").show();
}
else if (selected == "typeC") {
$("#formC").show();
}
}
$(document).ready(function () {
optionselect();
$('body').on('change', '#accounttype', function () {
optionselect();
});
});
</script>
</head>
<body>
<div id="selaccount">
<select id="accounttype">
<option value="typeA">Firstname</option>
<option value="typeB">Lastname</option>
<option value="typeC">Email
<option>
</select>
</div>
<div id="regform">
<div id="formA">
<input type="text" placeholder="Firstname" />
</div>
<div id="formB">
<input type="text" placeholder="Lastname" />
</div>
<div id="formC">
<input type="Text" placeholder="Email" />
</div>
</div>
</body>
</html>
answered Nov 15 '18 at 10:50
FarazFaraz
546311
@sukehiro try this
– Faraz
Nov 15 '18 at 10:51
add a comment |
-1
function work(uid) {
console.log(uid)
var input_value = document.getElementById('uid').value;
var output_value = "The username is " + input_value;
document.getElementById('output_data').innerText = output_value;
} <script src="wo.js"></script>
<input type="text" name="uname" id="uid">
<button type="submit" onclick="work(uid.value)">Submit</button>
<p id="output_data"></p>edited Nov 15 '18 at 11:56
Jonathan
542517
answered Nov 15 '18 at 11:09
Tejaswini S VarthalurTejaswini S Varthalur
11
1
How is this relevant to the question?
– Smollet777
Nov 15 '18 at 11:20
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53317143%2fhow-to-move-html-content-by-html-select-with-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You dont need to add elements to the form with .appendTo.They are already in.
You may want to hide them with CSS display:none. An dispay them with JS display:block.
var<div id="selaccount" onClick="optionselect()">
<select id="accounttype">
<option value="typeA">Firstname</option>
<option value="typeB">Lastname</option>
<option value="typeC">Email
<option>
</select>
</div>
<div id="regform">
<div id="formA" style="display:none">
<input type="text" placeholder="Firstname">
</div>
<div id="formB" style="display:none">
<input type="text" placeholder="Lastname">
</div>
<div id="formC" style="display:none">
<input type="Text" placeholder="Email">
</div>
</div>
<script>
function optionselect() {
var selected = document.getElementById("accounttype").value;
var formA = document.getElementById("formA");
var formB = document.getElementById("formB");
var formC = document.getElementById("formC");
formA.style = "display:none"
formB.style = "display:none"
formC.style = "display:none"
if (selected === "typeA") {
formA.style = 'display:block';
} else if (selected === "typeB") {
formB.style = 'display:block';
} else if (selected === "typeC") {
formC.style = 'display:block';
}
}
</script>answered Nov 15 '18 at 12:03
Smollet777Smollet777
1,36011015
ow dude it works for me thanks a lot for saving my lifetime,anyway i just used onchange instead of onclick because sometimes its not gonna work on my browser *cheers
– yami sukehiro
Nov 15 '18 at 13:45
add a comment |
1
You dont need to add elements to the form with .appendTo.They are already in.
You may want to hide them with CSS display:none. An dispay them with JS display:block.
var<div id="selaccount" onClick="optionselect()">
<select id="accounttype">
<option value="typeA">Firstname</option>
<option value="typeB">Lastname</option>
<option value="typeC">Email
<option>
</select>
</div>
<div id="regform">
<div id="formA" style="display:none">
<input type="text" placeholder="Firstname">
</div>
<div id="formB" style="display:none">
<input type="text" placeholder="Lastname">
</div>
<div id="formC" style="display:none">
<input type="Text" placeholder="Email">
</div>
</div>
<script>
function optionselect() {
var selected = document.getElementById("accounttype").value;
var formA = document.getElementById("formA");
var formB = document.getElementById("formB");
var formC = document.getElementById("formC");
formA.style = "display:none"
formB.style = "display:none"
formC.style = "display:none"
if (selected === "typeA") {
formA.style = 'display:block';
} else if (selected === "typeB") {
formB.style = 'display:block';
} else if (selected === "typeC") {
formC.style = 'display:block';
}
}
</script>answered Nov 15 '18 at 12:03
Smollet777Smollet777
1,36011015
ow dude it works for me thanks a lot for saving my lifetime,anyway i just used onchange instead of onclick because sometimes its not gonna work on my browser *cheers
– yami sukehiro
Nov 15 '18 at 13:45
add a comment |
1
1
1
You dont need to add elements to the form with .appendTo.They are already in.
You may want to hide them with CSS display:none. An dispay them with JS display:block.
var<div id="selaccount" onClick="optionselect()">
<select id="accounttype">
<option value="typeA">Firstname</option>
<option value="typeB">Lastname</option>
<option value="typeC">Email
<option>
</select>
</div>
<div id="regform">
<div id="formA" style="display:none">
<input type="text" placeholder="Firstname">
</div>
<div id="formB" style="display:none">
<input type="text" placeholder="Lastname">
</div>
<div id="formC" style="display:none">
<input type="Text" placeholder="Email">
</div>
</div>
<script>
function optionselect() {
var selected = document.getElementById("accounttype").value;
var formA = document.getElementById("formA");
var formB = document.getElementById("formB");
var formC = document.getElementById("formC");
formA.style = "display:none"
formB.style = "display:none"
formC.style = "display:none"
if (selected === "typeA") {
formA.style = 'display:block';
} else if (selected === "typeB") {
formB.style = 'display:block';
} else if (selected === "typeC") {
formC.style = 'display:block';
}
}
</script>answered Nov 15 '18 at 12:03
Smollet777Smollet777
1,36011015
You dont need to add elements to the form with .appendTo.They are already in.
You may want to hide them with CSS display:none. An dispay them with JS display:block.
var<div id="selaccount" onClick="optionselect()">
<select id="accounttype">
<option value="typeA">Firstname</option>
<option value="typeB">Lastname</option>
<option value="typeC">Email
<option>
</select>
</div>
<div id="regform">
<div id="formA" style="display:none">
<input type="text" placeholder="Firstname">
</div>
<div id="formB" style="display:none">
<input type="text" placeholder="Lastname">
</div>
<div id="formC" style="display:none">
<input type="Text" placeholder="Email">
</div>
</div>
<script>
function optionselect() {
var selected = document.getElementById("accounttype").value;
var formA = document.getElementById("formA");
var formB = document.getElementById("formB");
var formC = document.getElementById("formC");
formA.style = "display:none"
formB.style = "display:none"
formC.style = "display:none"
if (selected === "typeA") {
formA.style = 'display:block';
} else if (selected === "typeB") {
formB.style = 'display:block';
} else if (selected === "typeC") {
formC.style = 'display:block';
}
}
</script>var<div id="selaccount" onClick="optionselect()">
<select id="accounttype">
<option value="typeA">Firstname</option>
<option value="typeB">Lastname</option>
<option value="typeC">Email
<option>
</select>
</div>
<div id="regform">
<div id="formA" style="display:none">
<input type="text" placeholder="Firstname">
</div>
<div id="formB" style="display:none">
<input type="text" placeholder="Lastname">
</div>
<div id="formC" style="display:none">
<input type="Text" placeholder="Email">
</div>
</div>
<script>
function optionselect() {
var selected = document.getElementById("accounttype").value;
var formA = document.getElementById("formA");
var formB = document.getElementById("formB");
var formC = document.getElementById("formC");
formA.style = "display:none"
formB.style = "display:none"
formC.style = "display:none"
if (selected === "typeA") {
formA.style = 'display:block';
} else if (selected === "typeB") {
formB.style = 'display:block';
} else if (selected === "typeC") {
formC.style = 'display:block';
}
}
</script>var<div id="selaccount" onClick="optionselect()">
<select id="accounttype">
<option value="typeA">Firstname</option>
<option value="typeB">Lastname</option>
<option value="typeC">Email
<option>
</select>
</div>
<div id="regform">
<div id="formA" style="display:none">
<input type="text" placeholder="Firstname">
</div>
<div id="formB" style="display:none">
<input type="text" placeholder="Lastname">
</div>
<div id="formC" style="display:none">
<input type="Text" placeholder="Email">
</div>
</div>
<script>
function optionselect() {
var selected = document.getElementById("accounttype").value;
var formA = document.getElementById("formA");
var formB = document.getElementById("formB");
var formC = document.getElementById("formC");
formA.style = "display:none"
formB.style = "display:none"
formC.style = "display:none"
if (selected === "typeA") {
formA.style = 'display:block';
} else if (selected === "typeB") {
formB.style = 'display:block';
} else if (selected === "typeC") {
formC.style = 'display:block';
}
}
</script>answered Nov 15 '18 at 12:03
Smollet777Smollet777
1,36011015
answered Nov 15 '18 at 12:03
Smollet777Smollet777
1,36011015
answered Nov 15 '18 at 12:03
Smollet777Smollet777
1,36011015
answered Nov 15 '18 at 12:03
Smollet777Smollet777
1,36011015
1,36011015
ow dude it works for me thanks a lot for saving my lifetime,anyway i just used onchange instead of onclick because sometimes its not gonna work on my browser *cheers
– yami sukehiro
Nov 15 '18 at 13:45
add a comment |
ow dude it works for me thanks a lot for saving my lifetime,anyway i just used onchange instead of onclick because sometimes its not gonna work on my browser *cheers
– yami sukehiro
Nov 15 '18 at 13:45
ow dude it works for me thanks a lot for saving my lifetime,anyway i just used onchange instead of onclick because sometimes its not gonna work on my browser *cheers
– yami sukehiro
Nov 15 '18 at 13:45
ow dude it works for me thanks a lot for saving my lifetime,anyway i just used onchange instead of onclick because sometimes its not gonna work on my browser *cheers
– yami sukehiro
Nov 15 '18 at 13:45
add a comment |
2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selaccount" onChange="optionselect()">
<select id = "accounttype">
<option value = "typeA">Firstname</option>
<option value = "typeB">Lastname</option>
<option value = "typeC">Email<option>
</select>
</div>
<div id="regform">
<div id="formA" style="display:none">
<input type = "text" placeholder = "Firstname">
</div>
<div id="formB" style="display:none">
<input type = "text" placeholder = "Lastname">
</div>
<div id="formC" style="display:none">
<input type = "Text" placeholder = "Email">
</div>
</div>
<script>
function optionselect() {
var selected = $("#accounttype").val();
$("#formA").css('display','none');
$("#formB").css('display','none');
$("#formC").css('display','none');
if (selected == "typeA"){
$("#formA").css('display','block');
}else if (selected == "typeB"){
$("#formB").css('display','block');
}else if (selected == "typeC"){
$("#formC").css('display','block');
}
}
</script>answered Nov 15 '18 at 10:36
Banujan BalendrakumarBanujan Balendrakumar
1,0121212
add a comment |
2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selaccount" onChange="optionselect()">
<select id = "accounttype">
<option value = "typeA">Firstname</option>
<option value = "typeB">Lastname</option>
<option value = "typeC">Email<option>
</select>
</div>
<div id="regform">
<div id="formA" style="display:none">
<input type = "text" placeholder = "Firstname">
</div>
<div id="formB" style="display:none">
<input type = "text" placeholder = "Lastname">
</div>
<div id="formC" style="display:none">
<input type = "Text" placeholder = "Email">
</div>
</div>
<script>
function optionselect() {
var selected = $("#accounttype").val();
$("#formA").css('display','none');
$("#formB").css('display','none');
$("#formC").css('display','none');
if (selected == "typeA"){
$("#formA").css('display','block');
}else if (selected == "typeB"){
$("#formB").css('display','block');
}else if (selected == "typeC"){
$("#formC").css('display','block');
}
}
</script>answered Nov 15 '18 at 10:36
Banujan BalendrakumarBanujan Balendrakumar
1,0121212
add a comment |
2
2
2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selaccount" onChange="optionselect()">
<select id = "accounttype">
<option value = "typeA">Firstname</option>
<option value = "typeB">Lastname</option>
<option value = "typeC">Email<option>
</select>
</div>
<div id="regform">
<div id="formA" style="display:none">
<input type = "text" placeholder = "Firstname">
</div>
<div id="formB" style="display:none">
<input type = "text" placeholder = "Lastname">
</div>
<div id="formC" style="display:none">
<input type = "Text" placeholder = "Email">
</div>
</div>
<script>
function optionselect() {
var selected = $("#accounttype").val();
$("#formA").css('display','none');
$("#formB").css('display','none');
$("#formC").css('display','none');
if (selected == "typeA"){
$("#formA").css('display','block');
}else if (selected == "typeB"){
$("#formB").css('display','block');
}else if (selected == "typeC"){
$("#formC").css('display','block');
}
}
</script>answered Nov 15 '18 at 10:36
Banujan BalendrakumarBanujan Balendrakumar
1,0121212
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selaccount" onChange="optionselect()">
<select id = "accounttype">
<option value = "typeA">Firstname</option>
<option value = "typeB">Lastname</option>
<option value = "typeC">Email<option>
</select>
</div>
<div id="regform">
<div id="formA" style="display:none">
<input type = "text" placeholder = "Firstname">
</div>
<div id="formB" style="display:none">
<input type = "text" placeholder = "Lastname">
</div>
<div id="formC" style="display:none">
<input type = "Text" placeholder = "Email">
</div>
</div>
<script>
function optionselect() {
var selected = $("#accounttype").val();
$("#formA").css('display','none');
$("#formB").css('display','none');
$("#formC").css('display','none');
if (selected == "typeA"){
$("#formA").css('display','block');
}else if (selected == "typeB"){
$("#formB").css('display','block');
}else if (selected == "typeC"){
$("#formC").css('display','block');
}
}
</script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selaccount" onChange="optionselect()">
<select id = "accounttype">
<option value = "typeA">Firstname</option>
<option value = "typeB">Lastname</option>
<option value = "typeC">Email<option>
</select>
</div>
<div id="regform">
<div id="formA" style="display:none">
<input type = "text" placeholder = "Firstname">
</div>
<div id="formB" style="display:none">
<input type = "text" placeholder = "Lastname">
</div>
<div id="formC" style="display:none">
<input type = "Text" placeholder = "Email">
</div>
</div>
<script>
function optionselect() {
var selected = $("#accounttype").val();
$("#formA").css('display','none');
$("#formB").css('display','none');
$("#formC").css('display','none');
if (selected == "typeA"){
$("#formA").css('display','block');
}else if (selected == "typeB"){
$("#formB").css('display','block');
}else if (selected == "typeC"){
$("#formC").css('display','block');
}
}
</script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selaccount" onChange="optionselect()">
<select id = "accounttype">
<option value = "typeA">Firstname</option>
<option value = "typeB">Lastname</option>
<option value = "typeC">Email<option>
</select>
</div>
<div id="regform">
<div id="formA" style="display:none">
<input type = "text" placeholder = "Firstname">
</div>
<div id="formB" style="display:none">
<input type = "text" placeholder = "Lastname">
</div>
<div id="formC" style="display:none">
<input type = "Text" placeholder = "Email">
</div>
</div>
<script>
function optionselect() {
var selected = $("#accounttype").val();
$("#formA").css('display','none');
$("#formB").css('display','none');
$("#formC").css('display','none');
if (selected == "typeA"){
$("#formA").css('display','block');
}else if (selected == "typeB"){
$("#formB").css('display','block');
}else if (selected == "typeC"){
$("#formC").css('display','block');
}
}
</script>answered Nov 15 '18 at 10:36
Banujan BalendrakumarBanujan Balendrakumar
1,0121212
answered Nov 15 '18 at 10:36
Banujan BalendrakumarBanujan Balendrakumar
1,0121212
answered Nov 15 '18 at 10:36
Banujan BalendrakumarBanujan Balendrakumar
1,0121212
answered Nov 15 '18 at 10:36
Banujan BalendrakumarBanujan Balendrakumar
1,0121212
1,0121212
add a comment |
add a comment |
0
Try This i hope this will work for you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function optionselect() {
var selected = $('#accounttype').val();
$("#formA").hide();
$("#formB").hide();
$("#formC").hide();
if (selected == "typeA") {
$("#formA").show();
}
else if (selected == "typeB") {
$("#formB").show();
}
else if (selected == "typeC") {
$("#formC").show();
}
}
$(document).ready(function () {
optionselect();
$('body').on('change', '#accounttype', function () {
optionselect();
});
});
</script>
</head>
<body>
<div id="selaccount">
<select id="accounttype">
<option value="typeA">Firstname</option>
<option value="typeB">Lastname</option>
<option value="typeC">Email
<option>
</select>
</div>
<div id="regform">
<div id="formA">
<input type="text" placeholder="Firstname" />
</div>
<div id="formB">
<input type="text" placeholder="Lastname" />
</div>
<div id="formC">
<input type="Text" placeholder="Email" />
</div>
</div>
</body>
</html>
answered Nov 15 '18 at 10:50
FarazFaraz
546311
@sukehiro try this
– Faraz
Nov 15 '18 at 10:51
add a comment |
0
Try This i hope this will work for you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function optionselect() {
var selected = $('#accounttype').val();
$("#formA").hide();
$("#formB").hide();
$("#formC").hide();
if (selected == "typeA") {
$("#formA").show();
}
else if (selected == "typeB") {
$("#formB").show();
}
else if (selected == "typeC") {
$("#formC").show();
}
}
$(document).ready(function () {
optionselect();
$('body').on('change', '#accounttype', function () {
optionselect();
});
});
</script>
</head>
<body>
<div id="selaccount">
<select id="accounttype">
<option value="typeA">Firstname</option>
<option value="typeB">Lastname</option>
<option value="typeC">Email
<option>
</select>
</div>
<div id="regform">
<div id="formA">
<input type="text" placeholder="Firstname" />
</div>
<div id="formB">
<input type="text" placeholder="Lastname" />
</div>
<div id="formC">
<input type="Text" placeholder="Email" />
</div>
</div>
</body>
</html>
answered Nov 15 '18 at 10:50
FarazFaraz
546311
@sukehiro try this
– Faraz
Nov 15 '18 at 10:51
add a comment |
0
0
0
Try This i hope this will work for you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function optionselect() {
var selected = $('#accounttype').val();
$("#formA").hide();
$("#formB").hide();
$("#formC").hide();
if (selected == "typeA") {
$("#formA").show();
}
else if (selected == "typeB") {
$("#formB").show();
}
else if (selected == "typeC") {
$("#formC").show();
}
}
$(document).ready(function () {
optionselect();
$('body').on('change', '#accounttype', function () {
optionselect();
});
});
</script>
</head>
<body>
<div id="selaccount">
<select id="accounttype">
<option value="typeA">Firstname</option>
<option value="typeB">Lastname</option>
<option value="typeC">Email
<option>
</select>
</div>
<div id="regform">
<div id="formA">
<input type="text" placeholder="Firstname" />
</div>
<div id="formB">
<input type="text" placeholder="Lastname" />
</div>
<div id="formC">
<input type="Text" placeholder="Email" />
</div>
</div>
</body>
</html>
answered Nov 15 '18 at 10:50
FarazFaraz
546311
Try This i hope this will work for you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function optionselect() {
var selected = $('#accounttype').val();
$("#formA").hide();
$("#formB").hide();
$("#formC").hide();
if (selected == "typeA") {
$("#formA").show();
}
else if (selected == "typeB") {
$("#formB").show();
}
else if (selected == "typeC") {
$("#formC").show();
}
}
$(document).ready(function () {
optionselect();
$('body').on('change', '#accounttype', function () {
optionselect();
});
});
</script>
</head>
<body>
<div id="selaccount">
<select id="accounttype">
<option value="typeA">Firstname</option>
<option value="typeB">Lastname</option>
<option value="typeC">Email
<option>
</select>
</div>
<div id="regform">
<div id="formA">
<input type="text" placeholder="Firstname" />
</div>
<div id="formB">
<input type="text" placeholder="Lastname" />
</div>
<div id="formC">
<input type="Text" placeholder="Email" />
</div>
</div>
</body>
</html>
answered Nov 15 '18 at 10:50
FarazFaraz
546311
answered Nov 15 '18 at 10:50
FarazFaraz
546311
answered Nov 15 '18 at 10:50
FarazFaraz
546311
answered Nov 15 '18 at 10:50
FarazFaraz
546311
546311
@sukehiro try this
– Faraz
Nov 15 '18 at 10:51
add a comment |
@sukehiro try this
– Faraz
Nov 15 '18 at 10:51
@sukehiro try this
– Faraz
Nov 15 '18 at 10:51
@sukehiro try this
– Faraz
Nov 15 '18 at 10:51
add a comment |
-1
function work(uid) {
console.log(uid)
var input_value = document.getElementById('uid').value;
var output_value = "The username is " + input_value;
document.getElementById('output_data').innerText = output_value;
} <script src="wo.js"></script>
<input type="text" name="uname" id="uid">
<button type="submit" onclick="work(uid.value)">Submit</button>
<p id="output_data"></p>edited Nov 15 '18 at 11:56
Jonathan
542517
answered Nov 15 '18 at 11:09
Tejaswini S VarthalurTejaswini S Varthalur
11
1
How is this relevant to the question?
– Smollet777
Nov 15 '18 at 11:20
add a comment |
-1
function work(uid) {
console.log(uid)
var input_value = document.getElementById('uid').value;
var output_value = "The username is " + input_value;
document.getElementById('output_data').innerText = output_value;
} <script src="wo.js"></script>
<input type="text" name="uname" id="uid">
<button type="submit" onclick="work(uid.value)">Submit</button>
<p id="output_data"></p>edited Nov 15 '18 at 11:56
Jonathan
542517
answered Nov 15 '18 at 11:09
Tejaswini S VarthalurTejaswini S Varthalur
11
1
How is this relevant to the question?
– Smollet777
Nov 15 '18 at 11:20
add a comment |
-1
-1
-1
function work(uid) {
console.log(uid)
var input_value = document.getElementById('uid').value;
var output_value = "The username is " + input_value;
document.getElementById('output_data').innerText = output_value;
} <script src="wo.js"></script>
<input type="text" name="uname" id="uid">
<button type="submit" onclick="work(uid.value)">Submit</button>
<p id="output_data"></p>edited Nov 15 '18 at 11:56
Jonathan
542517
answered Nov 15 '18 at 11:09
Tejaswini S VarthalurTejaswini S Varthalur
11
function work(uid) {
console.log(uid)
var input_value = document.getElementById('uid').value;
var output_value = "The username is " + input_value;
document.getElementById('output_data').innerText = output_value;
} <script src="wo.js"></script>
<input type="text" name="uname" id="uid">
<button type="submit" onclick="work(uid.value)">Submit</button>
<p id="output_data"></p> function work(uid) {
console.log(uid)
var input_value = document.getElementById('uid').value;
var output_value = "The username is " + input_value;
document.getElementById('output_data').innerText = output_value;
} <script src="wo.js"></script>
<input type="text" name="uname" id="uid">
<button type="submit" onclick="work(uid.value)">Submit</button>
<p id="output_data"></p> function work(uid) {
console.log(uid)
var input_value = document.getElementById('uid').value;
var output_value = "The username is " + input_value;
document.getElementById('output_data').innerText = output_value;
} <script src="wo.js"></script>
<input type="text" name="uname" id="uid">
<button type="submit" onclick="work(uid.value)">Submit</button>
<p id="output_data"></p>edited Nov 15 '18 at 11:56
Jonathan
542517
answered Nov 15 '18 at 11:09
Tejaswini S VarthalurTejaswini S Varthalur
11
edited Nov 15 '18 at 11:56
Jonathan
542517
edited Nov 15 '18 at 11:56
Jonathan
542517
edited Nov 15 '18 at 11:56
Jonathan
542517
542517
answered Nov 15 '18 at 11:09
Tejaswini S VarthalurTejaswini S Varthalur
11
answered Nov 15 '18 at 11:09
Tejaswini S VarthalurTejaswini S Varthalur
11
answered Nov 15 '18 at 11:09
Tejaswini S VarthalurTejaswini S Varthalur
11
11
1
How is this relevant to the question?
– Smollet777
Nov 15 '18 at 11:20
add a comment |
1
How is this relevant to the question?
– Smollet777
Nov 15 '18 at 11:20
1
1
How is this relevant to the question?
– Smollet777
Nov 15 '18 at 11:20
How is this relevant to the question?
– Smollet777
Nov 15 '18 at 11:20
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53317143%2fhow-to-move-html-content-by-html-select-with-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Firs of all. You have planty of typos there. Second - dont mix jquery and vanilla js.
– Smollet777
Nov 15 '18 at 10:26
What do you want to achive?
– Smollet777
Nov 15 '18 at 10:28
Hi @sukehiro. what do you want to ??
– Faraz
Nov 15 '18 at 10:29
@Smollet777 actually i just trying to make the regform switch when the select selected
– yami sukehiro
Nov 15 '18 at 10:31
@Smollet777 uhh sorry i dont know that javascript cant do this
– yami sukehiro
Nov 15 '18 at 10:32