CODEWITHSUNDEEP
javascriptphpselectsaveonchange
Xinyu Mu
Xinyu Mu

Reputation: 43

Change a selected value based on selection

Here is what I am trying to do: If the user select the "add new" option, I would like to add an text box and take the user input and save it into my post. This part is working. The while loop gives other options that already exist in my database. If the user select them, I would save the selected result into my post. However, I just can not ever to get this to work. I tried different method for what would be under the if statement. I tried setting the id value which does not save. I tried to do what i did for else statement, but the javascript doesnt parse a variable inside quotes which means i can not pass the variable into the value. I am fairly new to this. Can anyone please help me. Thank you very much.

<label for="bbp_extra_field2">Your Idea</label><br>
<form>
     <select id="bbp_extra_field2"  onchange="addtextbox()">
        <option value ="new">Add New</option>;
        <?php 
            while ( bbp_replies() ) : bbp_the_reply();
                 $reply_id  =   bbp_get_reply_id();
                 $ideas     =   get_post_meta( $reply_id, 'bbp_extra_field2', true);
                echo "<option value='$ideas' selected>".$ideas."</option>";
            endwhile; ?>
    </select>
</form>
<div id="newidea"></div>
<script>
    var e = document.getElementById("bbp_extra_field2");
    var strUser = e.options[e.selectedIndex].value;
    function addtextbox() {

        if (strUser != "new") {
            return
        }     
        else {
            document.getElementById("newidea").innerHTML = "<input type='text' name='bbp_extra_field2'>";
        }        
    }
</script>

The following code works for options that already in my database and the result could be saved. However, does not allow me to add a new value. Thank you very much. 

echo '<label for="bbp_extra_field2">Idea</label><br>';
echo '<select name="bbp_extra_field2" id="field2">';
echo '<option value ="new">Add New</option>';
while ( bbp_replies() ) : bbp_the_reply();
    $reply_id = bbp_get_reply_id();
    $ideas = get_post_meta( $reply_id, 'bbp_extra_field2', true);
    echo "<option value='$ideas' selected>".$ideas."</option>";
endwhile;
echo "</select>";

Upvotes: 4

Views: 484

Answers (1)

Rasclatt
Rasclatt

Reputation: 12505

I am not sure I get what you are trying to do, but I think you are trying to do this:

<label for="bbp_extra_field2">Your Idea</label><br>
<form>
     <select id="bbp_extra_field2"  onchange="addtextbox()">
        <option value ="new">Add New</option>
        <?php 
            while ( bbp_replies() ) : bbp_the_reply();
                $reply_id = bbp_get_reply_id();
                 $ideas = get_post_meta( $reply_id, 'bbp_extra_field2', true);
                echo "<option value='$ideas' selected>".$ideas."</option>";
            endwhile; ?>
    </select>
    <div id="newidea"></div>
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>    
<script>
$("#bbp_extra_field2").change(function() {
        var Selector    =   $(this).val();
        $("#newidea").html('<input type="text" value="'+Selector+'" name="bbp_extra_field2">');
    });
</script>

jsFiddle Demo:

https://jsfiddle.net/muu982tx/

Upvotes: 1

Related Questions