Utilizing AJAX to update form data using a JavaScript function

On my HTML page, I have an AJAX submit script that loads a PHP script containing a form with just one input field for comments. This form is submitted via AJAX using the POST method.

Now, I am looking to create a JavaScript function that can be triggered when clicking on a link. This function will be embedded in the PHP form page, which already contains some JavaScript code.

I have a total of 10 different images and I want each image to call this function when clicked.

<a id="image_1" href="javascript: void(0);" onClick="newFunction(this.id)"> Image </a>

The purpose of this function is to extract the value entered in the form's text box, append it with the ID of the clicked image, and then display this new string in the text box itself.

The form has a name and ID of 'myform', and the text box has a name and ID of 'comments'.

While this task may seem straightforward, I must admit that I'm still in the process of learning JavaScript. Any guidance would be greatly appreciated :)

javascriptajaxforms

Answer №1

So, if I understand correctly, this is what you're looking for:

<script type="text/javascript>
    function addImage(imageId){
        document.getElementById('gallery').value = document.getElementById('gallery').value + " " + imageId;
    }
</script>

<input id="gallery" type="text" value="" size="60"/><br /><br />

<a id="img_1" href="javascript: void(0);" onClick="addImage(this.id)">image1</a>
<a id="img_2" href="javascript: void(0);" onClick="addImage(this.id)">image2</a>
<a id="img_3" href="javascript: void(0);" onClick="addImage(this.id)">image3</a>
<a id="img_4" href="javascript: void(0);" onClick="addImage(this.id)">image4</a>
<a id="img_5" href="javascript: void(0);" onClick="addImage(this.id)">image5</a>

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

Only when the tab is refreshed will React Query be shown

I'm facing a tricky situation and can't seem to find a solution through Google search. My current challenge involves using the React Query library with TSX to display fetched data in a simple list. However, the data is only fetched and displayed ...

javascriptreactjsrefreshreact-query

Can you show me how to divide a number by a comma after every two digits and then save the result into two separate

Given a variable var Number = 2425;, the task is to split it into two parts and store them in separate variables. var data = 24; var month = 25; What would be the most efficient way to achieve this using JavaScript? ...

javascriptarraysstring

Is there a way to have text entered in a single text field automatically duplicated in multiple text fields simultaneously?

Currently, I have the following code that copies data from one text field to another. However, I would like to implement this functionality across multiple fields (more than four): <script type="text/javascript"> function copyData(from,to) { t ...

javascripthtml

Implement jQuery Tabs in Brackets software to enhance user experience

My Adobe Creative Cloud subscription is expiring soon, and I am considering switching to Brackets, an open-source code editor developed by Adobe. However, I am facing some difficulties adding jQuery tabs to my HTML documents. I downloaded the 1.10.4 zip f ...

javascriptjqueryhtmljquery-uitabs

Do you think there is an excessive amount of code cluttering up my view in CakePHP using the MVC design

I've recently implemented the Google Maps CakePHP Helper by dereuromark to display a map with markers in my view. Each marker on the map has its own listener that triggers an ajax call. While everything is functioning as expected, I'm uncertain ...

phpjqueryajaxmodel-view-controllercakephp

Creating a bare JSON request in Express 4.13 using the body-parser middleware

My Express server is set up with the following parameters and routes: var express = require('express'); var bodyParser = require('body-parser'); var router = express.Router(); var app = express(); app.use(router); app.use(bodyParser.ur ...

jqueryajaxnode.jsexpressbody-parser

The JSON response from Rails containing multiple lines is not being parsed accurately

I am currently working on a Rails application with a json response using show.js.erb. { "opening": "<%= @frame.opening %>", "closing": "<%= @frame.closing %>"} An issue I encountered is that when @frame.opening contains multiple lines, jQuer ...

javascriptjqueryruby-on-railsjson

What is the correct way to outline the parameters for deactivating functions?

Request for Assistance! I am facing a challenge with multiple blocks in my WordPress website. Each block contains a checkbox, two select options, and an element that needs to be toggled based on the selected options in the dropdowns. The functionality to ...

javascriptjquery

Ignoring page redirects in Node.JS

Directories are organized as follows: -public -landing -landing.html -Login -login.html -register -register.html -routes HTMLroutes APIroutes - server.js All commented code are attempts I have made without success if (bcry ...

javascriptnode.jsexpresshttp-redirectroutes

What causes form.$invalid to be true upon form initialization in AngularJs?

Recently, I have delved into AngularJS and embarked on the journey of form validation. My goal is to display required fields in red when form.$invalid returns true. All fields on the form are mandatory, with no other validation necessary. While some field ...

angularjsformsvalidation

Uncovering the hidden treasures of checkbox values using jQuery

I've encountered an issue with a form containing checkboxes. Some values are meant to be true by default, so I've hidden them using the following method: <input type=checkbox name="<%= _key %>" checked="checked" style="display:none" /& ...

javascriptjqueryhtml

Is there a way to simplify and optimize the code further?

Here is the code snippet from my index.blade.php: HTML @foreach($sesis as $sesi) <td>{{ $sesi->waktu }} <label class="switch switch-text switch-info switch-pill" id="label-switch{{ $sesi->id } ...

javascriptjquerylaravelloops

Display an iframe using React in multiple areas across the app with the same state

Within my React scenario, we display a BI dashboard using an iframe on the page, allowing users to interact with the frame and potentially filter the BI data. I've developed a feature that enables this iframe to expand into a full-screen dialog for en ...

javascriptreactjsiframeamazon-quicksight

Applying a value to all JSON objects within an array using AngularJS and JavaScript

Tale: I've developed an array ($scope.mainArray) that will be displayed in a <table> with <tr> elements using ng-repeat as shown below: +---+ | 1 | +---+ | 2 | +---+ | 3 | +---+ Each object contains an array which is presented within & ...

javascriptangularjs

Why does Next.js throw an error when using an additional <div></div>?

I'm new to exploring Next.js and I'm encountering an error when using the html tag twice. It works fine with just one container, but as soon as I add another one, this error pops up: Error: error: Unexpected token "div". Expected jsx i ...

javascripthtmlnext.js

How about rejuvenating a Div with some PHP magic inside?

My goal is to automatically update a div every x seconds by using the following code: The div only contains a small PHP timezone code. This is the code snippet I am implementing: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ li ...

phpjavascript

Unusual Behavior of jQuery Ajax StatusCode

$.get('/users/test/' + username, { statusCode: { 409: () => { valid = false; alert(username + ' is unavailable'); }, 200: () => { valid = true; } } }); When sending a requ ...

jqueryajax

The Redux store is duplicating the state across different reducers, causing it to appear twice

Having Trouble Viewing Different States for Two Reducers in Redux DevTools In my React project, I am attempting to incorporate a second reducer using Redux to gain a better understanding of the overall state. However, when I inspect the state in Redux Dev ...

javascriptreactjsreduxstate

What is the best way to make AngularJS acknowledge invalid input that has already been identified by the browser?

Encountering an issue (specifically in Chrome) where a number input is deemed invalid by the browser, but valid as per Angular. <form name="form_name"> <input type="number" step="any" id="a_number" name="a_number" min="0" ng:model="aN ...

javascripthtmlangularjsvalidation

transferring data from JavaScript to servlet

For my project, I am working on retrieving contacts from a user's Gmail and Yahoo accounts. I have successfully added checkboxes for the user to select desired email addresses for sending emails. Now, I need to gather all selected email ids and save t ...

javajavascripthtmlservlets