Switch between file upload and text box [closed]
0
I have to create a site which provides the option to the user to either add a website address (text) or upload a file.
I have provided a dropdown that gives them the option to select file or link.
Based on the selection, I want the next element(input element) to change to either to text box or file upload.
How do I achieve this?
Link Option -
File Option -
Currently it is hardcoded.
Added a snippet.
<div>
<label>UpdateFileType</label>
<select asp-for="UpdateFileType">
<option>File</option>
<option>Link</option>
</select>
</div>
<div>
<label>UpdateFileLink</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div>
<label>UpdateFileLink</label>
<input class="link" />
</div>javascript jquery html asp.net asp.net-core-mvc
asked Nov 12 at 11:13
Sharad Venkataraman
10117
closed as too broad by ewolden, Hovercraft Full Of Eels, chŝdk, Pearly Spencer, Machavity Nov 12 at 15:53
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
add a comment |
0
I have to create a site which provides the option to the user to either add a website address (text) or upload a file.
I have provided a dropdown that gives them the option to select file or link.
Based on the selection, I want the next element(input element) to change to either to text box or file upload.
How do I achieve this?
Link Option -
File Option -
Currently it is hardcoded.
Added a snippet.
<div>
<label>UpdateFileType</label>
<select asp-for="UpdateFileType">
<option>File</option>
<option>Link</option>
</select>
</div>
<div>
<label>UpdateFileLink</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div>
<label>UpdateFileLink</label>
<input class="link" />
</div>javascript jquery html asp.net asp.net-core-mvc
asked Nov 12 at 11:13
Sharad Venkataraman
10117
closed as too broad by ewolden, Hovercraft Full Of Eels, chŝdk, Pearly Spencer, Machavity Nov 12 at 15:53
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
Share a snippet or any fiddle link.
– Rohan Kumar
Nov 12 at 11:20
1
try this : codepen.io/anupam-the-reactor/pen/NEbraw
– Anupam Singh
Nov 12 at 11:44
add a comment |
0
0
0
I have to create a site which provides the option to the user to either add a website address (text) or upload a file.
I have provided a dropdown that gives them the option to select file or link.
Based on the selection, I want the next element(input element) to change to either to text box or file upload.
How do I achieve this?
Link Option -
File Option -
Currently it is hardcoded.
Added a snippet.
<div>
<label>UpdateFileType</label>
<select asp-for="UpdateFileType">
<option>File</option>
<option>Link</option>
</select>
</div>
<div>
<label>UpdateFileLink</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div>
<label>UpdateFileLink</label>
<input class="link" />
</div>javascript jquery html asp.net asp.net-core-mvc
asked Nov 12 at 11:13
Sharad Venkataraman
10117
I have to create a site which provides the option to the user to either add a website address (text) or upload a file.
I have provided a dropdown that gives them the option to select file or link.
Based on the selection, I want the next element(input element) to change to either to text box or file upload.
How do I achieve this?
Link Option -
File Option -
Currently it is hardcoded.
Added a snippet.
<div>
<label>UpdateFileType</label>
<select asp-for="UpdateFileType">
<option>File</option>
<option>Link</option>
</select>
</div>
<div>
<label>UpdateFileLink</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div>
<label>UpdateFileLink</label>
<input class="link" />
</div><div>
<label>UpdateFileType</label>
<select asp-for="UpdateFileType">
<option>File</option>
<option>Link</option>
</select>
</div>
<div>
<label>UpdateFileLink</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div>
<label>UpdateFileLink</label>
<input class="link" />
</div><div>
<label>UpdateFileType</label>
<select asp-for="UpdateFileType">
<option>File</option>
<option>Link</option>
</select>
</div>
<div>
<label>UpdateFileLink</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div>
<label>UpdateFileLink</label>
<input class="link" />
</div>javascript jquery html asp.net asp.net-core-mvc
javascript jquery html asp.net asp.net-core-mvc
asked Nov 12 at 11:13
Sharad Venkataraman
10117
asked Nov 12 at 11:13
Sharad Venkataraman
10117
edited Nov 12 at 11:39
asked Nov 12 at 11:13
Sharad Venkataraman
10117
asked Nov 12 at 11:13
Sharad Venkataraman
10117
asked Nov 12 at 11:13
Sharad Venkataraman
10117
10117
closed as too broad by ewolden, Hovercraft Full Of Eels, chŝdk, Pearly Spencer, Machavity Nov 12 at 15:53
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
closed as too broad by ewolden, Hovercraft Full Of Eels, chŝdk, Pearly Spencer, Machavity Nov 12 at 15:53
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
Share a snippet or any fiddle link.
– Rohan Kumar
Nov 12 at 11:20
1
try this : codepen.io/anupam-the-reactor/pen/NEbraw
– Anupam Singh
Nov 12 at 11:44
add a comment |
Share a snippet or any fiddle link.
– Rohan Kumar
Nov 12 at 11:20
1
try this : codepen.io/anupam-the-reactor/pen/NEbraw
– Anupam Singh
Nov 12 at 11:44
Share a snippet or any fiddle link.
– Rohan Kumar
Nov 12 at 11:20
Share a snippet or any fiddle link.
– Rohan Kumar
Nov 12 at 11:20
1
1
try this : codepen.io/anupam-the-reactor/pen/NEbraw
– Anupam Singh
Nov 12 at 11:44
try this : codepen.io/anupam-the-reactor/pen/NEbraw
– Anupam Singh
Nov 12 at 11:44
add a comment |
2 Answers
2
active
oldest
votes
1
Use id and on change event show hide your div based on id.
$("#div2").hide();
$("#ddchange").change(function()
var link = $(this).val();
if (link == 'File')
$("#div1").show();
$("#div2").hide();
else
$("#div1").hide();
$("#div2").show();
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label>UpdateFileType</label>
<select asp-for="UpdateFileType" id="ddchange">
<option>File</option>
<option>Link</option>
</select>
</div>
<div id="div1">
<label>Update File Link</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div id="div2">
<label>Update Link</label>
<input class="link" />
</div>answered Nov 12 at 11:49
Shree
12.3k2069121
add a comment |
0
<div>
<label>UpdateFileType</label>
<select onchange="toggleField()" id="ddlFileType">
<option value="File">File</option>
<option value="Link">Link</option>
</select>
</div>
<div id="file" style="display:none">
<label>UpdateFileLink</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div id="link" style="display:none">
<label>UpdateFileLink</label>
<input class="link" />
</div>
<script>
function toggleField()
var x = document.getElementById("ddlFileType");
switch (x.value)
case 'Link':
document.getElementById("file").style = "display:none";
document.getElementById("link").style = "display:block";
break;
case 'File':
document.getElementById("link").style = "display:none";
document.getElementById("file").style = "display:block";
break;
</script>answered Nov 12 at 13:02
Geetesh
1147
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Use id and on change event show hide your div based on id.
$("#div2").hide();
$("#ddchange").change(function()
var link = $(this).val();
if (link == 'File')
$("#div1").show();
$("#div2").hide();
else
$("#div1").hide();
$("#div2").show();
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label>UpdateFileType</label>
<select asp-for="UpdateFileType" id="ddchange">
<option>File</option>
<option>Link</option>
</select>
</div>
<div id="div1">
<label>Update File Link</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div id="div2">
<label>Update Link</label>
<input class="link" />
</div>answered Nov 12 at 11:49
Shree
12.3k2069121
add a comment |
1
Use id and on change event show hide your div based on id.
$("#div2").hide();
$("#ddchange").change(function()
var link = $(this).val();
if (link == 'File')
$("#div1").show();
$("#div2").hide();
else
$("#div1").hide();
$("#div2").show();
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label>UpdateFileType</label>
<select asp-for="UpdateFileType" id="ddchange">
<option>File</option>
<option>Link</option>
</select>
</div>
<div id="div1">
<label>Update File Link</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div id="div2">
<label>Update Link</label>
<input class="link" />
</div>answered Nov 12 at 11:49
Shree
12.3k2069121
add a comment |
1
1
1
Use id and on change event show hide your div based on id.
$("#div2").hide();
$("#ddchange").change(function()
var link = $(this).val();
if (link == 'File')
$("#div1").show();
$("#div2").hide();
else
$("#div1").hide();
$("#div2").show();
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label>UpdateFileType</label>
<select asp-for="UpdateFileType" id="ddchange">
<option>File</option>
<option>Link</option>
</select>
</div>
<div id="div1">
<label>Update File Link</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div id="div2">
<label>Update Link</label>
<input class="link" />
</div>answered Nov 12 at 11:49
Shree
12.3k2069121
Use id and on change event show hide your div based on id.
$("#div2").hide();
$("#ddchange").change(function()
var link = $(this).val();
if (link == 'File')
$("#div1").show();
$("#div2").hide();
else
$("#div1").hide();
$("#div2").show();
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label>UpdateFileType</label>
<select asp-for="UpdateFileType" id="ddchange">
<option>File</option>
<option>Link</option>
</select>
</div>
<div id="div1">
<label>Update File Link</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div id="div2">
<label>Update Link</label>
<input class="link" />
</div>$("#div2").hide();
$("#ddchange").change(function()
var link = $(this).val();
if (link == 'File')
$("#div1").show();
$("#div2").hide();
else
$("#div1").hide();
$("#div2").show();
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label>UpdateFileType</label>
<select asp-for="UpdateFileType" id="ddchange">
<option>File</option>
<option>Link</option>
</select>
</div>
<div id="div1">
<label>Update File Link</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div id="div2">
<label>Update Link</label>
<input class="link" />
</div>$("#div2").hide();
$("#ddchange").change(function()
var link = $(this).val();
if (link == 'File')
$("#div1").show();
$("#div2").hide();
else
$("#div1").hide();
$("#div2").show();
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label>UpdateFileType</label>
<select asp-for="UpdateFileType" id="ddchange">
<option>File</option>
<option>Link</option>
</select>
</div>
<div id="div1">
<label>Update File Link</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div id="div2">
<label>Update Link</label>
<input class="link" />
</div>answered Nov 12 at 11:49
Shree
12.3k2069121
edited Nov 12 at 12:05
answered Nov 12 at 11:49
Shree
12.3k2069121
answered Nov 12 at 11:49
Shree
12.3k2069121
answered Nov 12 at 11:49
Shree
12.3k2069121
12.3k2069121
add a comment |
add a comment |
0
<div>
<label>UpdateFileType</label>
<select onchange="toggleField()" id="ddlFileType">
<option value="File">File</option>
<option value="Link">Link</option>
</select>
</div>
<div id="file" style="display:none">
<label>UpdateFileLink</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div id="link" style="display:none">
<label>UpdateFileLink</label>
<input class="link" />
</div>
<script>
function toggleField()
var x = document.getElementById("ddlFileType");
switch (x.value)
case 'Link':
document.getElementById("file").style = "display:none";
document.getElementById("link").style = "display:block";
break;
case 'File':
document.getElementById("link").style = "display:none";
document.getElementById("file").style = "display:block";
break;
</script>answered Nov 12 at 13:02
Geetesh
1147
add a comment |
0
<div>
<label>UpdateFileType</label>
<select onchange="toggleField()" id="ddlFileType">
<option value="File">File</option>
<option value="Link">Link</option>
</select>
</div>
<div id="file" style="display:none">
<label>UpdateFileLink</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div id="link" style="display:none">
<label>UpdateFileLink</label>
<input class="link" />
</div>
<script>
function toggleField()
var x = document.getElementById("ddlFileType");
switch (x.value)
case 'Link':
document.getElementById("file").style = "display:none";
document.getElementById("link").style = "display:block";
break;
case 'File':
document.getElementById("link").style = "display:none";
document.getElementById("file").style = "display:block";
break;
</script>answered Nov 12 at 13:02
Geetesh
1147
add a comment |
0
0
0
<div>
<label>UpdateFileType</label>
<select onchange="toggleField()" id="ddlFileType">
<option value="File">File</option>
<option value="Link">Link</option>
</select>
</div>
<div id="file" style="display:none">
<label>UpdateFileLink</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div id="link" style="display:none">
<label>UpdateFileLink</label>
<input class="link" />
</div>
<script>
function toggleField()
var x = document.getElementById("ddlFileType");
switch (x.value)
case 'Link':
document.getElementById("file").style = "display:none";
document.getElementById("link").style = "display:block";
break;
case 'File':
document.getElementById("link").style = "display:none";
document.getElementById("file").style = "display:block";
break;
</script>answered Nov 12 at 13:02
Geetesh
1147
<div>
<label>UpdateFileType</label>
<select onchange="toggleField()" id="ddlFileType">
<option value="File">File</option>
<option value="Link">Link</option>
</select>
</div>
<div id="file" style="display:none">
<label>UpdateFileLink</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div id="link" style="display:none">
<label>UpdateFileLink</label>
<input class="link" />
</div>
<script>
function toggleField()
var x = document.getElementById("ddlFileType");
switch (x.value)
case 'Link':
document.getElementById("file").style = "display:none";
document.getElementById("link").style = "display:block";
break;
case 'File':
document.getElementById("link").style = "display:none";
document.getElementById("file").style = "display:block";
break;
</script><div>
<label>UpdateFileType</label>
<select onchange="toggleField()" id="ddlFileType">
<option value="File">File</option>
<option value="Link">Link</option>
</select>
</div>
<div id="file" style="display:none">
<label>UpdateFileLink</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div id="link" style="display:none">
<label>UpdateFileLink</label>
<input class="link" />
</div>
<script>
function toggleField()
var x = document.getElementById("ddlFileType");
switch (x.value)
case 'Link':
document.getElementById("file").style = "display:none";
document.getElementById("link").style = "display:block";
break;
case 'File':
document.getElementById("link").style = "display:none";
document.getElementById("file").style = "display:block";
break;
</script><div>
<label>UpdateFileType</label>
<select onchange="toggleField()" id="ddlFileType">
<option value="File">File</option>
<option value="Link">Link</option>
</select>
</div>
<div id="file" style="display:none">
<label>UpdateFileLink</label>
<input name="UpdateFileLink" class="files" type="file" />
</div>
<div id="link" style="display:none">
<label>UpdateFileLink</label>
<input class="link" />
</div>
<script>
function toggleField()
var x = document.getElementById("ddlFileType");
switch (x.value)
case 'Link':
document.getElementById("file").style = "display:none";
document.getElementById("link").style = "display:block";
break;
case 'File':
document.getElementById("link").style = "display:none";
document.getElementById("file").style = "display:block";
break;
</script>answered Nov 12 at 13:02
Geetesh
1147
answered Nov 12 at 13:02
Geetesh
1147
answered Nov 12 at 13:02
Geetesh
1147
answered Nov 12 at 13:02
Geetesh
1147
1147
add a comment |
add a comment |
Share a snippet or any fiddle link.
– Rohan Kumar
Nov 12 at 11:20
1
try this : codepen.io/anupam-the-reactor/pen/NEbraw
– Anupam Singh
Nov 12 at 11:44