Using jQuery to pass apostrophes from PHP into an input field

Currently, I am working with database information that includes a character of blah^s (I have replaced the ' character with ^ in order to locate apostrophes within the row). I am using preg_replace to add apostrophes back into the string. Everything is functioning well, except for when I attempt to update an input text field using jquery.

$name = preg_replace('/(\^)/', ' ', '\'');
$name = "<input type='text' size='20' id='2' name='2' value='$name'>&nbsp;";

I have successfully JSON encoded it along with all my other data.

$json = array(
'name' => $name
);
echo json_encode($json);

When checking the console with jquery, it returns "blah" instead of "blah's" which is required inside my input text field.

Any suggestions or ideas? Please share!

Answer №1

Take a look at the code snippet below to see how the generated HTML is using ' to delimit attribute values:

value='blah's'

Notice that the value ends abruptly after the letter h.

To avoid this issue, you should use an HTML entity for ' instead. You can achieve this by utilizing either htmlentities:

echo htmlentities($str, ENT_QUOTES);

or using htmlspecialchars:

echo htmlspecialchars($str, ENT_QUOTES);

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

Issue with jQuery's addClass() function not functioning properly on Internet Explorer versions 8, 9, and possibly others as well

Here is some basic HTML code: <div class="stuff-choice"> <div class="item a"> <label class="signup-checkbox"> <input type="checkbox" value="a" name="stuff[a][]" id="stuff_choice_" class="things"> <strong>A&l ...

"Troubleshooting: Why is my Bootstrap modal window only printing a

I've encountered an issue with printing the content of a Bootstrap modal window. Previously, the code I had was working fine but now it seems to be malfunctioning. Content is dynamically added to the form using appendChild() in a separate function. Ho ...

Ways to determine if an image has a designated width/height using JavaScript (jQuery)

Similar Question: How can I retrieve the height and width of an image using JavaScript? Typically, we can determine the image width using $('img').width() or $('img').css('width') when a width is specified as shown below ...

When clicking on the side-bar, it does not respond as expected

My website has a menu layout that features a logo on the left and an icon for the menu on the right side. When the icon is clicked, the menu slides in from the right side of the window, and when clicked again, it slides out. However, I am facing two issues ...

Eliminating the impact of a CSS selector

I have a complex mark-up structure with multiple CSS classes associated: classA, classB, classC, classD. These classes are used for both styling via CSS and event binding using jQuery selectors. The Challenge: I need the jQuery events to be functional whi ...

Ways to streamline a form containing several duplicate rows and make it more user-friendly

Looking for some advice on implementing a "working hours" module. Just need something simple like: Monday: 10:00 - 18:00 ... Saturday: 11:00-16:00 with some additional info. I'm currently attempting to... <form id="working_hours"> <s ...

Creating an autocomplete feature with just one input field to display information for two to three additional input fields

I'm working on implementing an autocomplete feature similar to this example: . Feel free to test it out with the code snippets provided: 1000, 1001. I've successfully implemented the autocomplete functionality where typing in Pa suggests Paris. ...

Exploring a JavaScript object to verify if a property contains nested data elements

I am currently working on traversing through the object above in order to determine if a contact is a member of a specific list. For instance, if the user is a member of the list with an ID of 2022, I want to display their first name (which is also includ ...

Troubleshooting issues with sending POST requests in node.js

I've been attempting to initiate a post request, but for some reason, it's not going through. Strangely, I'm not seeing any output in the console log of my browser. My node server.js is up and running on x.x.x.x:8000. I've connected it ...

How can I retrieve data from local storage based on a specific key value using a query?

In order to optimize the storage of data for my app, I have successfully stored a large amount in local storage. Now, I am faced with the task of fetching data in an array but only selecting key/values that are specifically chosen, rather than all or jus ...

How can multiple arguments be passed to a function using JQuery's post method?

I can't seem to figure out how to pass multiple arguments to a function using jQuery's post method. It might sound like a silly question, but I'm struggling with it. Currently, my code looks something like this: $.post("<?php echo site_ ...

Continue executing without stopping

After making 4 ajax calls, the script is supposed to halt if record number 123456 is found. However, this specific record may appear in all four ajax responses. Despite this expectation, the code fails to stop processing. var endPoint0 = ''; var ...

Dynamic content loading using AJAX to selectively update a designated section

I am having trouble displaying the error message in my form. Currently, it is causing my form page to load four times. Can someone help me identify what I did wrong? I only want to display that span: controllers: <?php /* * File Name: user.php */ ...

I need the inner HTML of the AJAX response to be displayed in the <tr>

My table row (tr) contains a select option field and a free input field. When I choose an option, the field is populated with data via AJAX. However, when adding a new row, I want the input field to be filled in the new row instead of the first one. Here ...

Error in TypeScript while running the command "tsd install jquery" - the identifier "document" could not be found

Currently, I am facing an issue with importing jQuery into my TypeScript project. In order to achieve this, I executed the command tsd install jquery --save, which generated a jquery.d.ts file and added /// <reference path="jquery/jquery.d.ts" /> to ...

Steps to create a hover effect that alters the appearance of another chosen "element"

For instance, I have two classes named A and B. I want to be able to change the appearance of B when I hover over it, such as its color or size. I am unsure if this can be achieved using CSS and the onmouseover event. I am including a snippet of code that ...

Understanding how to utilize variables from Angular within jQuery

I have a variable called room_price and I am looking to utilize it in jQuery. Is there a way to achieve this? $http({ method:'GET', url: '' }).then(function(response){ var roomdata = respons ...

Encountering an error with the message "SyntaxError: missing ; before statement" while attempting to utilize the Google Place Search

Lately, I've been encountering a 'SyntaxError: missing ; before statement' error while attempting to execute this ajax code in order to retrieve all nearby ATMs within a 1 km radius. var url = "https://maps.googleapis.com/maps/api/place/nea ...

The AJAX function fails to trigger the MVC controller method

I'm attempting to enable inline editing by cell, rather than by row, when double-clicking. Although the initial setup is working, it's not updating the record as expected - the "SaveCustomer" call to the controller isn't triggered. Can anyon ...

Determine if a specific checkbox with a particular id has been selected using JQuery

Looking for assistance on how to determine if a checkbox with a specific ID is checked or unchecked. <input name="A" id="test" type="checkbox" value="A" /> <input name="B" id="test" type="checkbox" value="B" /> <input name="C" id="test1" t ...