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 '18 at 11:13
Sharad VenkataramanSharad Venkataraman
10117
closed as too broad by ewolden, Hovercraft Full Of Eels, cнŝdk, Pearly Spencer, Machavity Nov 12 '18 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 '18 at 11:13
Sharad VenkataramanSharad Venkataraman
10117
closed as too broad by ewolden, Hovercraft Full Of Eels, cнŝdk, Pearly Spencer, Machavity Nov 12 '18 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 '18 at 11:20
1
try this : codepen.io/anupam-the-reactor/pen/NEbraw
– Anupam Singh
Nov 12 '18 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 '18 at 11:13
Sharad VenkataramanSharad 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 '18 at 11:13
Sharad VenkataramanSharad Venkataraman
10117
asked Nov 12 '18 at 11:13
Sharad VenkataramanSharad Venkataraman
10117
edited Nov 12 '18 at 11:39
Sharad Venkataraman
asked Nov 12 '18 at 11:13
Sharad VenkataramanSharad Venkataraman
10117
asked Nov 12 '18 at 11:13
Sharad VenkataramanSharad Venkataraman
10117
asked Nov 12 '18 at 11:13
Sharad VenkataramanSharad Venkataraman
10117
10117
closed as too broad by ewolden, Hovercraft Full Of Eels, cнŝdk, Pearly Spencer, Machavity Nov 12 '18 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, cнŝdk, Pearly Spencer, Machavity Nov 12 '18 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 '18 at 11:20
1
try this : codepen.io/anupam-the-reactor/pen/NEbraw
– Anupam Singh
Nov 12 '18 at 11:44
add a comment |
Share a snippet or any fiddle link.
– Rohan Kumar
Nov 12 '18 at 11:20
1
try this : codepen.io/anupam-the-reactor/pen/NEbraw
– Anupam Singh
Nov 12 '18 at 11:44
Share a snippet or any fiddle link.
– Rohan Kumar
Nov 12 '18 at 11:20
Share a snippet or any fiddle link.
– Rohan Kumar
Nov 12 '18 at 11:20
1
1
try this : codepen.io/anupam-the-reactor/pen/NEbraw
– Anupam Singh
Nov 12 '18 at 11:44
try this : codepen.io/anupam-the-reactor/pen/NEbraw
– Anupam Singh
Nov 12 '18 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 '18 at 11:49
ShreeShree
12.4k2069121
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 '18 at 13:02
GeeteshGeetesh
12417
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 '18 at 11:49
ShreeShree
12.4k2069121
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 '18 at 11:49
ShreeShree
12.4k2069121
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 '18 at 11:49
ShreeShree
12.4k2069121
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 '18 at 11:49
ShreeShree
12.4k2069121
edited Nov 12 '18 at 12:05
answered Nov 12 '18 at 11:49
ShreeShree
12.4k2069121
answered Nov 12 '18 at 11:49
ShreeShree
12.4k2069121
answered Nov 12 '18 at 11:49
ShreeShree
12.4k2069121
12.4k2069121
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 '18 at 13:02
GeeteshGeetesh
12417
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 '18 at 13:02
GeeteshGeetesh
12417
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 '18 at 13:02
GeeteshGeetesh
12417
<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 '18 at 13:02
GeeteshGeetesh
12417
answered Nov 12 '18 at 13:02
GeeteshGeetesh
12417
answered Nov 12 '18 at 13:02
GeeteshGeetesh
12417
answered Nov 12 '18 at 13:02
GeeteshGeetesh
12417
12417
add a comment |
add a comment |
Share a snippet or any fiddle link.
– Rohan Kumar
Nov 12 '18 at 11:20
1
try this : codepen.io/anupam-the-reactor/pen/NEbraw
– Anupam Singh
Nov 12 '18 at 11:44