Member Avatar for harshm027

Hi,

I have a form with various elements such as ids, location. I need to pass these values to a php file through a javascript function. Right now I am able to pass only ids.
The Form

<form action="display.php">
    <label>Your ID</label>
        <input type="text" id="ids" name="ids" value="">

    <label>Location</label>
        <select name="location" id="location">
            <option>City 1</option>
            <option>City 2</option>
            <option>City 3</option>
            <option>City 4</option>

    <label>Interest</label>
        <input type="checkbox" name="interest[]" value="Friends" />
        <input type="checkbox" name="interest[]" value="Books" />
        <input type="checkbox" name="interest[]" value="Music" />
        <input type="checkbox" name="interest[]" value="Debates" />

</form>

I am passing the values to the php files through javascript

function passvalues(url, boxid){
            var A = document.getElementById('ids').value; 
            url = url + "?ids=" + A;
            .......
            ........}

PHP File

    $ids=$_GET['ids'];

        echo $ids;
        echo "<br>";

How should I pass 'location' and 'Interest' values also to the php file?

I tried this :-

var B = document.getElementById('location').value; 
                url = url + "?ids=" + A;
                url = url + "?location=" + B;

if 12345 is the id this returns
12345?location=City1

  • 2 Contributors
  • 1 Reply
  • 189 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by jstfsklh211

Dani AI

Generated

As 's output shows, the immediate bug is the second question mark. Only the first ? starts the query string; any further ? becomes literal data, so display.php?ids=12345?location=City1 makes ids equal to 12345?location=City1. Additional parameters must be joined with & and values must be URL‑encoded.

A safe, compact client-side fix is to build the query with URLSearchParams (it handles encoding) and collect checked checkboxes with a selector:

const idsVal = document.getElementById('ids').value;
const locVal = document.getElementById('location').value;

const params = new URLSearchParams();
params.append('ids', idsVal);
params.append('location', locVal);
document.querySelectorAll('input[name="interest[]"]:checked').forEach(cb => {
  params.append('interest[]', cb.value);
});

window.location.href = url + '?' + params.toString();

Posting the form is often simpler and avoids URL length/visibility issues; 's suggestion is sound. To submit asynchronously, send the form with FormData + fetch and read $_POST on the server:

const fd = new FormData(document.querySelector('form'));
fetch('display.php', { method: 'POST', body: fd })
  .then(r => r.text())
  .then(text => console.log(text));

Server notes and quick tips: checkbox groups named with [] arrive as arrays in PHP ($_GET['interest'] or $_POST['interest']). Always check isset()/is_array() before using and escape output with htmlspecialchars(..., ENT_QUOTES, 'UTF-8'). Prefer POST for non‑public or long data. If you must concatenate by hand, use encodeURIComponent() for every value and use & between parameters.

Member Avatar for jstfsklh211

just post your whole form to the php page
(add a submit button to your form and add method="post" to your form tag)

and then get the values from $_POST

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.