CODEWITHSUNDEEP
phphtml
Bipin Kafle
Bipin Kafle

Reputation: 129

POST something using editable dropdown

I made an editable dropdown menu :

<html>
<body>
<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
    <select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;" onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">

        <option></option>
        <option value="one">one</option>
        <option value="two">two</option>
        <option value="three">three</option>

    </select>
    <input type="text" name="displayValue" placeholder="add/select a value" id="displayValue" style="position:absolute;top:0px;left:0px;width:183px;width:180px\9;#width:180px;height:23px; height:21px\9;#height:18px;border:1px solid #556;" onfocus="this.select()">
    <input type="hidden" name="idValue" id="idValue">
</div>
</body>
</html>

I want to POST the value that was added, so as to include it in drop down for the next round.

Upvotes: 0

Views: 78

Answers (1)

lodev09
lodev09

Reputation: 442

I suggest you use jQuery for easy implementation. You can wrap them in a form and do the POSTing via jQuery Ajax then store that value somewhere for future use then append it to the next as the new option item.

POST via aJax

$(function() {
    $('#form').on('submit', function(e) {
        // do not reload the page
        e.preventDefault();

        // do the posting
        var newValue = $('#displayValue').val();

        $.post('http://MYURL.com/post.php', {
            new_field: newValue
        }, function(data) {
            // success callback
            $('#form > select').append('<option value="'+newValue+'">'+newValue+'</option>');
        })
    });
})

Basically, you post newValue to http://MYURL.com/post.php and handle that new data then the success callback will handle the inserting of the new value to your select.

the code is not tested, let me know if it did not work

Learn more about jquery.post() here and more about jquery here

Upvotes: 1

Related Questions