Member Avatar for newbi11

Hey everyone
Please i would like to create a kind of quotation form with 2 ends (front and back). The front end would be a text box and a submit button and the back end would supply the response to the query / request that was inputed in the textbox at the front end. **For example if the word that was typed in the text box is "apple" then the back end would return the word "fruit" on the page , but if the word that was typed in the text box is "cabbage" then the back end would return the word "this is not a fruit". **

Its a silly example but i hope it gives you a better picture of what i am trying to do . Its just a simple script and i really hope someone could help out with this.
Thanks

  • 3 Contributors
  • 8 Replies
  • 299 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by iamthwee
Member Avatar for urtrivedi

learn basics first.
try w3schools.com

Member Avatar for iamthwee

Very quick example:

index.php

<html>
<head>
    <title></title>
</head>
<body>


    <input type="text" name="box1" id="stuff" value="" />


    <input id="submit_button" name="submit_button" type="submit" value="Submit" />

    <div class="feedback"></div>


</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $('#submit_button').click(function (event) {
        var stuff = $('#stuff').val();
        $.ajax({
            url: 'somefile.php',
            type: 'post',
            data: {stuff:stuff},
            success: function (data) {
                $('.feedback').text("you typed " + data);
            }
        });

    });


</script>

</html>

somefile.php

<?php 
    $var1 = $_POST['stuff'];

    if ($var1 == "apple")
    {
        echo "you typed apple";
    }
    else if ($var1 == "banana")
    {
        echo "you typed banana";
    }
    else
    {
        echo "don't know what you typed";
    }

 ?>
Member Avatar for newbi11

@iamthwee . Thanks for your reply, I would try out the code you gave me.

Member Avatar for iamthwee

Dear newbi11,

I received your message and I believe my sample script does what you want. It displays results without a refresh as it uses jquery ajax technology.

I don't reply to emails so if you have any other queries please post them here as it also makes solutions available to the community.

I think the only issue is styling and customizing the if else statements. If you need help with this then please ask.

Member Avatar for newbi11

Hi Iamthwee
I tried the code you gave me , It didn't function. I don't know whats wrong.

Member Avatar for iamthwee 
<html>
<head>
    <title></title>
</head>
<body>


    <input type="text" name="box1" id="stuff" value="" />


    <input id="submit_button" name="submit_button" type="submit" value="Submit" />

    <div class="feedback"></div>


</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $('#submit_button').click(function (event) {
        var stuff = $('#stuff').val();
        $.ajax({
            url: 'somefile.php',
            type: 'post',
            data: {stuff:stuff},
            dataType: 'text',
            success: function (data) {
                $('.feedback').text("you typed " + data);
            }
        });

    });


</script>

</html>

Please try adding the dataType: 'text'

Member Avatar for newbi11

I included the dataType : 'text' . This time around when i click the submit button nothing happens unlike last time. What's wrong?

Member Avatar for iamthwee

please make sure the file 'somefile.php' is in the same folder as index.php and is named correctly, no uppercases.

Daft question but you also need an internet connection as well.

Edited by iamthwee
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.