0

There is another solution to display a hidden input when a user choose an option from the select tag? I want to put the HTML code outside the JS code.

jQuery code:

$(function() {

    var message = new Array(),
        $paymentOption = $("#payement_option"),
        $messageDisplay = $("#message_display");

    message[1] = '<input type="text" name="email" size="30" />';

    $paymentOption.change(function() {

        var messageIndex = $(this).val();

        $messageDisplay.empty();

        if (messageIndex > 0) 
            $messageDisplay.append(message[messageIndex]);

    });

});

HTML code like this:

<select name="option"><option value="0">yes</option><option value="1">no</option</select>

the output:

<div id="message_display"></div>

EDIT:

I want something like:

<div id="message_display">
    <input type="text" name="email" size="30" />
</div>
Improve this question
8
  • I want to put the HTML code (the hidden input) outside the JS code. Commented May 16, 2011 at 21:55
  • I'm massively curious as to what that means. And, also, why? Commented May 16, 2011 at 21:58
  • Because Ill added many hidden fields, and I want to control and edited them outside the JS code Commented May 16, 2011 at 22:00
  • "Outside"? What does that mean? Do you mean you want to make the message_display div visible? Or do you want to add content to it? Commented May 16, 2011 at 22:00
  • I want to write HTML code and set it to (hidden or display:none) And It will be showed once I select a value from the select tag Commented May 16, 2011 at 22:01

3 Answers 3

Reset to default
1

I, as the others are bit confused, but from my understanding of your problem you have basically working code.

You need to set select id to payment_option and put the message display div on the page. otherwise it cannot find what it needs to append the value to.

change it to this: HTML

<select name="option" id="payement_option">
    <option value="0">yes</option>
    <option value="1">no</option>
</select>

<div id="message_display"></div>

JQUERY

$(function () {
    var message = new Array();
    //set message[0] = 'stuff' if you want something to display when yes is selected
    message[1] = '<input type="text" name="email" size="30" />';
    $("#payement_option").change(function () {
        //gets the message index
        var message_index = $("#payement_option").val();
        //emptys the value from message display
        $("#message_display").empty();

       //if option is not YES display message[val]
        if (message_index > 0) {
            $("#message_display").append(message[message_index]);
        }
    });
});

and a live example: http://jsfiddle.net/mCqfq/

EDIT:

you mean like this? http://jsfiddle.net/dEwcK/

HTML:

<select name="option" id="payement_option">
    <option value="0">yes</option>
    <option value="1">no</option>
</select>

<div id="message_display"><input type="text" name="email" size="30" id="hiddenInput" /></div>

CSS: 

#message_display {display: none;}

JQUERY:

$(function () {
    $("#payement_option").change(function () {
        var message_index = $("#payement_option").val();


        if (message_index > 0) {
            $("#message_display").show();
        }
        else { $("#message_display").hide(); }


    });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

YES YES but please see my edit in the original post. To understand what I want
so you want the message[1] = <input type="text" name="email" size="30" /> outside the js?
just the HTML code: <input type="text" name="email" size="30" />
so put the html in the html, hide it via CSS and set the message[1] to the hiddeninput sort of like: message[1] = $('.hiddenInput')
@MiniNaimm, I'm glad you like it. Dont forget to accept and upvote the solutions =)
0

I think you mean you want to make the message_display div visible...

$("#message_display").show();

or edit the CSS more specifically:

$("#message_display").css("display", "block");

I'd recommend have a browse through the JQuery API - it's a good read and shows you how much can be done and how easily: http://api.jquery.com

Improve this answer

3 Comments

Now If I want to edit or add something to the hidden input, I must return to the JS code and do that ... But I want to set my hidden input outside the js code, It's possible?
I'm afraid all this talk of "inside" and "outside" the JS code is very strange. If you want to modify the markup of the web page, you need to use Javascript. You can change the contents of a given tag like this: $("#tag_id").html("new content"); or you can use append() as you have done above, but that will not remove the current contents, it will just add the new contents to the end of the tag.
Yeah, just use the code you have, and add $("#message_display").show(); after your if statement. It's not very tidy code, but it might work with a bit of polishing.
0

Are you trying to do something like this?

$('#myselect').change(function(){
    var box = $(this);
    if (box.val() === 'some predetermined value') {
        $("#message_display").show();
    }
});
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.