Updating an html "value" with a jquery variable

Question

So i'm building a messaging application in which a user clicks on a button, a jquery prompt is displayed asking for the user to type in their message, and then ideally the message is sent using a separate ajax function.

Here is the code in question:

jQuery message prompt function:

        function getInput() {
         var text = prompt("Enter message", "");

            if (text != null) {
            document.getElementById("demo").innerHTML = text; //failed attempt at updating the value just using the id of the input. 
            }
    }

HTML:

<form name="messagesend" method="post" onsubmit="return sendMessage(this);">   
<input type="hidden" id="demo" name="message" value="I want to update this field with the result of the javascript text variable" />
<input type="hidden" name="regId" value="<?php echo $row["gcm_regid"] ?>"/>
<input type="submit" class="send_btn" value="Volume-Vibrate" onclick="getInput()"/>
</form>

As you can see, the field I want to update is the string contained in value which is the message being sent. How could I get that to update with the result of whatever the user puts in the text prompt?

Any help would be greatly appreciated!

EDIT:

Updated jQuery function to the following:

        function getInput() {
         var text = prompt("Enter message", "");

            if (text != null) {
                $("#demo").val(text);
            }
    }

This may be a different question, but when the button that is created in the HTML I originally posted is clicked, it displays the prompt and I type in a message, but the default value that I placed is still the message being sent. Is

onsubmit="return sendMessage(this);"

Being executed before the jQuery is updating the value field? And if so, is there anyway to fix that?

If it helps, here is sendMessage which uses ajax to send off the message to a php script. The HTML value field (which I'm trying to get to be the user-input string from the jQuery prompt using getInput()) becomes the data variable, which also contains the registration id of the designated recipient of the message.

        function sendMessage(formObj){
            var data = $(formObj).serialize();
            $(formObj).unbind('submit');                
            $.ajax({
                url: "send_message.php",
                type: 'GET',
                data: data,
                beforeSend: function() {

                },
                success: function(data, textStatus, xhr) {
                      $('.txt_message').val("");
                },
                error: function(xhr, textStatus, errorThrown) {

                }
            });
            return false;
        }

Please provide the code for `sendMessage()`, and particularly, in what way does it call `getInput()`? — Lucas Trzesniewski, Jun 23 '14 at 23:36
Sorry, my bad, I didn't notice `getInput` was called in the button's `onclick` event. Just remove the event handler, and call `getInput` directly from `sendMessage` (of course before the `serialize` call), that should do the trick. — Lucas Trzesniewski, Jun 23 '14 at 23:46

score 4 · Accepted Answer · answered Jun 23 '14 at 23:11

4

A HTML field doesn't have inner HTML (the tag is self-closing), it has a value (and a value property).

But as you're using jQuery, you should use its functions anyway: $("#demo").val(text)

answered Jun 23 '14 at 23:11

Lucas Trzesniewski

47,154
9
90
138

score 1 · Answer 2 · edited May 23 '17 at 10:26

1

As @Lucas has mentioned, $("#demo").val(text) works (see the JQuery documentation)

Another way of doing the same thing (referencing the input field by name): $('input[name="demo"]').val()

However, a name does not need to be unique, while an id should be unique (see this SO answer). It would be safer to add id="demo" to your input name - overkill in this case, but good practice.

edited May 23 '17 at 10:26

Community

1
1

answered Jun 23 '14 at 23:25

JW8

1,436
4
20
35

Updating an html "value" with a jquery variable

2 Answers2