CODEWITHSUNDEEP
javascriptphpjqueryhtml
SSS12_
SSS12_

Reputation: 87

How to make php content appear in a html div element

I am trying to create a search using ajax and mysql and placing the returned data into a div. I am following a tutorial on youtube and so far so good, however I am trying to pass in dummy data into the div but it isn't appearing.

This here is my jquery 

$('#submit').on('click', function() {
var search = $('#search').val();

    if ($.trim(search) != '') { //if search is not equal to nothing - using trim allows users to type in blank space and it won't return anything 
        $.post('searching.php', {search: search}, function(data) {
            $('#search').text(data);
    });
    }
 });

This is my html 

  <div class="container">
    <div class="card card-container">

        <p id="profile-name" class="profile-name-card"></p>
        <form class="form-signin" method="POST">
            <input type="text" name="search" id="search" class="form-control" placeholder="Search">


        </form><!-- /form -->
         <button class="btn btn-lg btn-primary btn-block btn-signin" value= "search" type="required" id="submit" name="submit">Search</button>

    </div><!-- /card-container -->


       <div class="row">

<div class="col-md-4">
<div id="search"></div> 


    <div class="caption">
      <p></p>
    </div>

</div>

When the user clicks search the content from the searching.php file should appear in the div. Currently in the searching.php file it just has echo"content";. It should have "content" in the div but it isn't appearing in the web browser and there are no errors. Within the network in inspect element the name is searching.php and the status is ok. Not sure where I am going wrong, any help would be grateful.

Upvotes: 3

Views: 873

Answers (3)

Venka Tesh user5397700
Venka Tesh user5397700

Reputation: 359

don't use same id (search) for both input and div

change the id in html

<div class="container">
    <div class="card card-container">
        <p id="profile-name" class="profile-name-card"></p>
        <form class="form-signin" method="POST">
            <input type="text" name="search" id="search" class="form-control" placeholder="Search">
        </form>
         <button class="btn btn-lg btn-primary btn-block btn-signin" value= "search" type="required" id="submit" name="submit">Search</button>
    </div><!-- /card-container -->
    <div class="row">
    <div class="col-md-4">
        <div id="searchText"></div> 
        <div class="caption">
        <p></p>
    </div>
</div>

and javascript

$('#submit').on('click', function() {
var search = $('#search').val();

    if ($.trim(search) != '') { //if search is not equal to nothing - using trim allows users to type in blank space and it won't return anything 
        $.post('searching.php', {search: search}, function(data) {
            $('#searchText').text(data);
    });
    }
 });

Upvotes: 2

David
David

Reputation: 218930

You have multiple id="search" elements in your HTML. So this isn't going to know which one you mean:

$('#search')

It's probably trying to set the "text" of the <input>, which doesn't have a "text" (it has a "value"). Correct the HTML. Either change the <input> or the <div> to have a unique id. (And, of course, update your jQuery selectors as well as anything else targeting these elements.)

Upvotes: 4

Darshit Hedpara
Darshit Hedpara

Reputation: 670

.text not work with input

use val() instead of text() for input

$('#search').val(data);


$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="test1">This is a paragraph.</p>
<button id="btn1">Set Text</button>
<p id="test2">This is another paragraph.</p>

<button id="btn2">Set HTML</button>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>


<button id="btn3">Set Value</button>

Upvotes: 0

Related Questions