Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

javascript

Posted on 2014-10-29
12
Medium Priority
?
253 Views
Last Modified: 2014-11-20
in javascript, I want to find a way like below.

If value = 1 then
placeholder = dropdown
else
placeholder = textbox
end if

Is it possible in Javasript or jquery?

<placeholder></placeholder>
0
Comment
Question by:ITsolutionWizard
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
  • 3
12 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 40411742
The answer is simple: Yes, it is possible.

But it depends on what you wanna do.
If the "value" is coming from a user input checkbox then you have to disable and hide the one control and enable and show the other control.
On Submit the disabled form controls are not submitted.

So what is your scenario for this requirement?
0
 
LVL 1

Author Comment

by:ITsolutionWizard
ID: 40411819
the value came from the <select></select>

The <placeholder> should be generic. It is not necessary to do disabled or not disabled.
just like what i mentioned. value 1 show drop down value 2 show text box.

Is that clear ?

Thanks
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 40411912
That is clear but my question is: are you sure that you want to loose the text input or the dropdown selection when the user switches the selector value?

Therefor the most developer decide to have both controls on the form and enable the requested one as selected.

The "dynamic" approach has NO advantages, only difficulties. For example: where do you get the dropdown options when you have 50 states for selection?
0
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
LVL 63

Expert Comment

by:Zvonko
ID: 40412032
This is an example that works but that I would not recommend:
<html>
<head>
<title>Zvonko &#42;</title>
<script>
function switchOption(theSel){
  $("inputArea").innerHTML = $("inputTemplate"+theSel.value).innerHTML;
}

function $(theId){
  return document.getElementById(theId);
}
</script>
</head>
<body>
<form>
<select name="userSel" onChange="switchOption(this)">
<option value="1">Text</option>
<option value="2">DropdownText</option>
</select>
<hr>
<span id="inputArea">
<input type="text" name="usrInput" >
</span>
<hr>
<input type="submit">
</form>
<form name="hiddenForm" style="display:none;">
<span id="inputTemplate1">
<input type="text" name="userInput" >
</span>
<span id="inputTemplate2">
<select name="userInput">
<option value="1">One</option>
<option value="2">Two</option>
<option value="2">Three</option>
</select>
</span>
</form>
</body>
</html>

Open in new window


I would prefer disabling and enabling hidden elements on same form area.
0
 
LVL 1

Author Comment

by:ITsolutionWizard
ID: 40413629
no. this is not what I am asking for. I am asking for a <place holder></place holder> in html so it is just like container. It can accept text box, drop down, and etc. based on the value it is provided.

Your code have static html text and select.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 40413741
the placeholder needs the final code for the input or for the select.
where should that select field definition come from?
0
 
LVL 34

Expert Comment

by:Slick812
ID: 40414050
???? ITsolutionWizard, I have read through this, and I am unable to see or get what you may mean by your using the -
"  a <place holder></place holder> in html  so it is just like container."

I do not believe that this will be an effective way (if you can do that), ?
What I would do is have an existing HTML element like <span> or <div>, , AS A CONTAINER that you dynamically load the "contents" into as a <select> or <textbox>,  if you have an empty
     <span id="dynamic"></span>
it will disappear, and in JS you can load something into the HTML for it -

document.getElementById("dynamic").innerHTML = '<select name="d">
<option value="a">1</option>
<option value="b">2</option>
</select>';
and it will show the <select> or anything you place in it correctly as DHTML

Although you possibly  can put some <place holder> in it to the HTML document, you would then have to find it and remove it, then you can get use the DOM to "create" a <select> and add options, then you would need to use an insert command to place that element,  hopefully, in the same place of the Document structure, where you removed the place holder, not so easy.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 40414193
0
 
LVL 34

Expert Comment

by:Slick812
ID: 40414213
@Zvonko, more than likely, but I hoped to separate a Place Holder from the change of HTML that most JS uses, did not think that ITsolutionWizard got that, ,  or was used to templates or other programming that uses place holders.
0
 
LVL 1

Author Comment

by:ITsolutionWizard
ID: 40418705
Guys, I know it may be not very easy. In the same case, I can do that in asp.net . Since my project is in html5 , that why I asked this question.

If you don't have solution or too hard for you. It is ok. But I have to keep the question as it.

Thanks
0
 
LVL 34

Accepted Solution

by:
Slick812 earned 2000 total points
ID: 40419617
@ ITsolutionWizard, You say that your question is the same, in your last comment. Because of my misunderstanding or "not familiar with" your term and use of what you call a -
       <placeholder></placeholder>
also not sure also about why you say that HTML5 is used and makes a difference for us to make a solution?
So sorry about my lack of understanding in this.

It may help us if you can describe the "steps" or methods, you need to have in your javascript function so that when a <select> is changed from 1 to another then a dropdown or textbox is placed in your web page.

You say this - "I am asking for a <place holder></place holder> in html so it is just like container."
I have not seen this <place holder> Tag used in a web page HTML, so I do not see what you may need.
So It would help us very much, if you can show us the exact "HTML" that you start with, where you have this <place holder> Tag used that will be changed to <select> (dropdown) if the chose select is changed to one.

Also, can you say if the "Dynamic" (not static) content of the inserted <select> and textbox is from your ASP server code?
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 40421965
@ ITsolutionWizard: you are right, its too hard for me <|;-)
0

Featured Post

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

704 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question