How To Get The Value of an input field using AJAX and Pass it To A PHP String?

Question

I am new to JavaScript, so pardon my lack of knowledge.

I am trying to code a contact form and want to get the value entered in a particular input text field as soon as a value entered by the visitor using AJAX and pass it to a PHP string so that I can show relevant information based on the value entered before hitting the submit button.

How Can I do that using jQuery?

Here are the codes I am using for the form:

<form method="post" action="">
<input type="text" id="name" name="name" />
<input type="text" id="email" name="email" />
<input type="text" id="subject" name="subject" />
<input type="text" id="url" name="url" />
<input type="checkbox" id="showdetails" name="showdetails" /> Show URL Details
<input type="submit" value="Submit" />
</form>`

I need the value of the URL input field to pass to a php string (as soon as the user checks the showdetails checkbok) so that I can process it in background to show information based on the url.

Using what? jQuery? mootools? native JS? Have you tried anything? — Jonnix
– Jonnix, Commented Jan 7, 2013 at 12:37
Yes, jQuery. Sorry I didn't mentioned that. Edited my question and added that. — Abhik
– Abhik, Commented Jan 7, 2013 at 12:49
And do you want it as soon as a value entered by the visitor or (as soon as the user checks the showdetails checkbok) ??? There is a huge difference in user experience. — mplungjan
– mplungjan, Commented Jan 7, 2013 at 12:52
@mpungjan, as soon as the user checks the checkbox. Then it should check if any value entered in the field and pass it to a php string I could use in my functions. If no value is entered yet the box is checked, an error message pops up. Sorry, I am totally novice in JavaScript, so please help. — Abhik
– Abhik, Commented Jan 7, 2013 at 13:08

Community · Accepted Answer · 2017-05-23 12:00:27Z

8

Given this html:

<form method="post" action="">
<input type="text" id="name" name="name" />
<input type="text" id="email" name="email" />
<input type="text" id="subject" name="subject" />
<input type="text" id="url" name="url" />
<input type="checkbox" id="showdetails" name="showdetails" /> Show URL Details
<input type="submit" value="Submit" />
</form>

jQuery (checkbox)

$(function() {
  $("showdetails").on("click",function() {
    var url = $("#url").val();
    if (url && $(this).is(":checked")) {
      $.get("relevantinfo.php",
        { "url": url },
        function(data){
          // do something with data returned
        }
      );
    }
    else {
      // clear relevant info here
    }
  });
});

The receiving end: Retrieving POST Data from AJAX Call to PHP

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Jan 7, 2013 at 12:56

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ThiefMaster Over a year ago

Consider using the data parameter of $.get() instead of building the query string manually.

ThiefMaster Over a year ago

Yes, but without the encoding. jQuery does that for you - that's why I suggested it.

ThiefMaster · Accepted Answer · 2013-01-07 12:56:00Z

3

get the input string using onchange event in text field .

ref : https://developer.mozilla.org/en-US/docs/DOM/element.onchange

Then using that string content, call AJAX function.

function load(string) {
    var xmlhttp;
    if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "YOUR_URL", true);
    xmlhttp.send();
}

As suggested in the comments, use jquery + AJAX. For jquery,

$.ajax({
    url: 'ajax/test.html',
    success: function(data) {
        $('.divClass').html(data);
        alert('Load was performed.');
    }
});

edited Jan 7, 2013 at 12:56

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

answered Jan 7, 2013 at 12:40

Bharath Mg

1,1271 gold badge9 silver badges18 bronze badges

4 Comments

iLaYa ツ Over a year ago

Instead of XMLHttpRequest, use jquery + Ajax to simplify

Robin van Baalen Over a year ago

@LearneR jQuery is kinda big if you only use it for AJAX handling.

mplungjan Over a year ago

I suggest onclick of the checkbox rather than onchange since onchange needs a blur in some browsers

rlemon Over a year ago

if jQuery is not already being used including the entire library to do XHR functions is overkill. Especially if dated browser support is not critical (alternatives). I realize the OP asked for it, consider this a side comment.

Collectives™ on Stack Overflow

How To Get The Value of an input field using AJAX and Pass it To A PHP String?

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related