When sending a request from Vue.js using Axios to PHP, the issue arises that the .value property is

There is a chat box with bb smileys underneath. Clicking on the smileys adds them to the text in the input box.

However, when using axios to post, the array is empty. Manually entering the smiley bbcode works fine.

<input id="txtName" @keyup.enter="addMessage" v-model="txtInput" type="text" style="width:100%;height:40px;color:#000000;" placeholder="Type here and hit return">

<a style="cursor: pointer;" title="[smiley]" onClick="document.getElementById('txtName').value +='[smiley]'">
<img src="bb/images/smiley.gif"></img>
</a>  

axios.post('ajax/post.php', 
{ txtInput : this.txtInput }).then(function (response) {
console.log(response);

Answer №1

It's not recommended to manually update the value of the input field.

A better approach would be to add a click listener and modify the v-model property instead.

<a @click=“this.txtInput += ‘[smiley]’”

Remember, it's best practice not to manipulate the DOM directly using vanilla JavaScript, but rather rely on the methods provided by Vue.js.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

PHP Timer for Keeping Track of Time

Is it feasible to develop a timer using PHP that triggers an action after 60 seconds? I am looking for a countdown effect where the timer starts at 60 and decreases to 0. Ideally, I would like to refresh the corresponding div element to simulate the countd ...

Tips for dynamically passing parameters to functions in JavaScript?

Looking for a solution to dynamically receive input from the user in my function: divResize = { myDiv:function(width, height) {...} } divResize.myDiv(100,400); I want to make these numbers interactive and changeable based on user input. How can I achie ...

Discover the highest value within an array of objects, along with any numerical object attributes that have a value greater than zero

Considering an array of objects structured as follows: [{ "202201": { "WO": 900, "WS": 0, "SY": 0.915, "LY": 0.98, "CT": 75 }, "202202" ...

Javascript issue: SyntaxError - A numerical value is required after the decimal point

I am currently in the process of setting up an HTML form to trigger an AJAX update when a user exits a field. My current attempt is focusing on one table cell and it looks like this: <td><input type="text" class="form-control" id="firstName" name ...

The media parameter seems to be malfunctioning when attempting to send it to the Kaleyra API using code

Attempting to send media through the Kaleyra API using my code is proving unsuccessful. However, when I make the same request via Postman, it works perfectly fine. async whatsappAPIWithAttachment(requestBody) { let api_key = ""; if (requ ...

The d3 hierarchy possesses the capability to compute the average values of child nodes

Looking for a solution with d3 visualization that involves averaging up the value of score on the lowest nodes and dynamically adding that average to the parent node above. It seems like there isn't an easy method in d3 for this task. The desired outc ...

The variable is unable to be accessed within the PHP function query

After passing a variable through ajax to a function within my php file "Cart_code.php", I encountered an issue where the variable was not accessible inside the function. Can you help me figure out why? Javascript $.ajax({ type: "POST", url: "incl ...

What steps can I take to ensure that a user is unable to like a photo multiple times even after refreshing the browser?

I am currently exploring ways to replicate a similar like system found on Instagram. Specifically, I want to create a system where if a user likes a photo and then attempts to like it again, it will be unliked - and vice versa. This behavior should persist ...

Using aliases in npm packages is not supported

I am working on creating an npm package that I want to use in another application. During development, I set a path in tsconfig for importing various modules instead of using a relative path. However, when I download my package into the test app, it is una ...

Leverage TypeScript with AngularJS to validate interpolation and binding within HTML documents

While TypeScript can detect compile errors for *.ts files, the question arises if these benefits can be extended to AngularJS views/templates. Consider a scenario where the code snippet below is present: <div ng-controller="HomeController as home"> ...

HTML5 allows users to choose data from a list using a ComboBox and submit the 3-digit code

I'm looking to enhance my form by including an input box where users can select airports, similar to the functionality on this website (). When typing in the Destination Input, I want users to see a list of possible values with detailed suggestions su ...

What is the best way to incorporate progressive JPEG images onto a website?

I am currently working on a website called winni.in that is built using Java, Html, and Javascript. I would like to incorporate progressive image rendering upon page load, but I lack the necessary knowledge. I have come across and explored the following re ...

Show or hide text when list item is clicked

This is the rundown of services <div> <a href="#hig"><button class="tag-btn">High blood pressure Diabetes</button></a> <a href="#hih"><button class="tag-btn">High ch ...

What is the method for importing jQuery from a local source?

My experience with CDNs has been seamless, but I've run into some issues when trying to use jquery/jquery mobile locally. It seems that certain classes work intermittently, while others don't work at all. The versions I am using are: jQuery - ...

What could be the reason for my user input not being captured and saved as variable data on the HTML webpage?

Here is the code I am working with: var g = document.getElementById("al").value; function start() { document.getElementById("test2").innerHTML = typeof(g) + parseFloat(g); } <p id="test2">Output will be displayed here:</p> <form> ...

Is there a way to prevent certain code from executing during server deployment?

First of all, my apologies for any mistakes in my English language skills. I find Morgan to be a great tool for development, but I am uncertain about deploying my server and not wanting everyone to see who is online. How can I prevent certain actions fro ...

Iterate through a jQuery function to retrieve values from checkboxes starting from the 4th one that has been clicked

I am currently using a loop in a form to calculate the total price of a product based on user selections. However, I have encountered a challenging task where certain checkbox groups have specific rules. For instance, group A should only contribute to the ...

The error message "props.text is undefined in React Native" indicates that there is an issue with accessing the property text within

//**// import { StatusBar } from 'expo-status-bar'; import {StyleSheet, Text, View, Button, TextInput, ScrollView, FlatList} from 'react-native'; import {useState} from "react"; import GoalItem from "./components/GoalItem"; export defau ...

Is there a way to pass a c struct pointer into javascript using ffi?

I need help passing a pointer to a struct to a method in nodejs using ffi. I am encountering an error where the type of the JavaScript struct I created cannot be determined. How can I resolve this issue? Previously, I was able to successfully implement si ...

Importing data from JSON file stored in the assets folder in NUXT.js framework

If I have a file named assets/data/geo/regions.json in my NUXT.js project's folder structure, what is the best way to read data from it into my project? I attempted to use axios, but I am uncertain of the URL for this file as I have tested various po ...