Tips for changing an angular variable string before sending it to a PHP function

When working with AngularJS, I can access form variables within my function like this (for example: s1 = Joe Smith).

However, I have a need to update the Indata variable by replacing the a_searchvalue1 with the value stored in s1 but wrapped in quotes.

Original:

    var Indata = { what_to_do: "angular_users5",  where_clause: '[{"sqlvalue1":"a_earchvalue1","sqlvalue2":"b_earchvalue2"}]' }

resulting in:

    var Indata = { what_to_do: "angular_users5",  where_clause: '[{"sqlvalue1":"Joe Smith","sqlvalue2":"b_earchvalue2"}]' }

<div id="myapp" ng-controller="empcontroller">
    <input id="name1" type="text" placeholder="Name" required name="Name" value="Joe Smith">
    <input id="email1" type="text" placeholder="Email" required name="Email" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a4d5f58595b494e4a555b7a5d575b535614595557">[email protected]</a>">
    <p id="sample">demo1</p>
    <button ng-click="postData()">Submit</button><br>
</div>

<script>
var app = angular.module('demoApp', []);

app.controller('empcontroller', function($scope, $http)
{
    $scope.postData = function ()
    {
        var s1 = document.getElementById("name1").value;
        alert(s1);

        var Indata = { what_to_do: "angular_users5",  where_clause: '[{"sqlvalue1":"a_earchvalue1","sqlvalue2":"b_earchvalue2"}]' }

        var req =
        {
            method: 'POST', url: 'angular_master.php',
            headers: {'Content-Type': undefined },
            params: Indata
        }

        $http(req).then(function (response)
        {
            $scope.names = response.data.records;
            document.getElementById("sample").innerHTML = "YOU CLICKED THE BUTTON";

            alert(angular.toJson(response.data.records));
        });
    }

});
</script>

Additionally, I'm looking for a way to handle input fields that contain double quotes.

Answer №1

When dealing with the where_clause key that takes a JSON array as a string, you can manipulate it using string concatenation in the following way:

let data = {
  action: "get_users",
  where_clause: '[{"condition1":"'+value1+'",          
  "condition2":"search_value2"}]'
}

This code snippet will update the value of search_value1 with value1 enclosed in quotes. Give this approach a try and check if it resolves your issue.

Answer №2

  • let myData = { action: "react_users7", filter_condition: '[{"sqlvalue1":a3,"sqlvalue2":"c_searchvalue4"}]' }

  • apply encodeURI() method

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

Tips for implementing a jQuery plugin on specific elements within an HTML page

I've been experimenting with the jQuery extension for searchable dropdowns available at this link. While I am impressed with its functionality, I'm looking to apply it selectively to specific elements on my webpage rather than all of them. Is the ...

Pulling the month name based on a specific year and week using Javascript

In my HTML form, there are two fields called Year and Week. When the user chooses a Year and Week from the dropdowns, I would like to show the corresponding Month Name for that specific year and week. Is there anyone who can assist me in retrieving the m ...

What is the best method for creating a top margin that is dependent on the height of the browser?

Is there a way to make the CSS margin: top; on my HTML main_content element relative to the browser window? I want the main_content to always stay at the bottom of the browser window. How can I achieve this? I attempted the following code, but it didn&apo ...

Utilizing JavaScript to Load and Showcase Images from a Temporary Image to imgsrc

How can I dynamically display images from the temporary image array 'tempimages' onto the 'img' element with the 'src' property? I have written a code that attempts to display temporary images from 'tempimages[]' on ...

Storing chosen choices from various select lists with similar class name in JavaScript

I am struggling to save all the selected options in an array for future output. Despite trying various suggestions, I haven't been able to make it work yet. The class names and names cannot be modified. HTML <select class="addon addon-select" nam ...

Refresh the view in AngularJS following a successful $http.get request

I have a <ul> in my HTML view that is populated based on a $http.get request. HTML: <div id="recentlyReleased" ng-controller="sampleRecordController as recCtrl"> <h1>Sample Records</h1> <ul> <li class= ...

Unable to activate the 'Click' function in Angular/Typescript after selecting element with 'document.querySelector'

In my Angular 8 Project, there is an element on a page with a unique string attached to the attribute 'data-convo-id'. This element has a click function that loads data based on the data attribute specified above. However, without direct access ...

Discover the Practical Utility of Maps beyond Hash Tables in Everyday Life

I am currently attempting to explain the concept of Maps (also known as hash tables or dictionaries) to someone who is a beginner in programming. While most people are familiar with the concepts of Arrays (a list of things) and Sets (a bag of things), I ...

Having trouble retrieving data through AJAX requests

My goal is to verify the existence of a user email on "blur()" using AJAX to send textbox data to PHP. Even though I can see the posted data in Firebug, I keep encountering an error: Undefined index: data. Despite numerous attempts, I have been unable to r ...

Finding the offsetWidth (or similar measurement) for a list item (LI) element

Can jQuery be used to determine the width of an element? alert($("#theList li:eq(0)").offsetWidth); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ol id="theList"> <li>The quick brown ...

Bringing in a variable from a component that is dynamically imported

I have a dynamically imported (Map) component on my page. const Map = dynamic(() => import('../components/Mapcomp'), { ssr: false, }) In addition to the component, I also need to import a variable from it. const [taskImg, setTaskImg] = useS ...

Tips for controlling a "collapsed" state for every intricately nested node within a tree

My data structure is complex and dynamic, illustrated here: const tree = [ { name: "Root Node", collapsed: true, nodes: [ { name: "Node 1", collapsed: true, nodes: [ { name: "Sub node" ...

Enhancing the ShaderMaterial attribute in three.js

Exploring the three.js tutorial on shaders, we discover a technique for updating uniform values of a ShaderMaterial: var attributes = { displacement: { type: 'f', // a float value: [] // an empty array } }; var uniforms = { amplitu ...

Trouble arises when jquery's "position().top" clashes with the CSS3 property "transform: scale()"

Currently, I am working on adding a font resizer feature to my editing tool. To implement this, I made some changes to the text elements where their origin is now set to the bottom left corner. The normal version of the tool works perfectly fine, but when ...

Utilizing API data as props within an Autocomplete component in Reactjs with Material-UI

New to Reactjs, I am currently exploring the implementation of the Autocomplete component from material-ui. My goal is to pass the API link as a prop to the element. However, I'm stuck on how to pass the json label name as a prop to be used in "getOpt ...

Shape with a dark border div

Having some trouble with creating this particular shape using CSS border classes. If anyone can assist in making this black box shape using Jquery, it would be greatly appreciated. Check out the image here. ...

Using JavaScript to sort data within specific timeframes

How can I extract data based on timestamps greater than 06? "use strict" const data = [ {timestamp: "2020-04-23 05:05", totalAvg: 2.596211180124224}, {timestamp: "2020-04-23 05:10", totalAvg: 3.22052273203436}, {timestamp: "2020-04-23 05:15", t ...

Destructuring part of an object within function parameters in JavaScript

Is it possible to selectively destructure specific object properties in function arguments, while keeping the rest accessible within the object? Let's explore this concept with a React example. (Although React is used here, the question pertains to J ...

Sorts through nested arrays to uncover distinctive product assortments

Currently, I am in the process of developing a website using Next.js and Shopify. My objective is to create a page that displays all collections matching a specific productType. To achieve this, I have been exploring ways to extract this data from the Gra ...

AngularJS shows an error when attempting to access the property 'childNodes' of an undefined element

Recently diving into AngularJS, I incorporated bootstrap validator to ensure form validation in my project. Initially, everything was running smoothly until I introduced the following snippet into my controller's JavaScript file for validation: $(doc ...