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

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";
    }

 ?>

@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.

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'

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.

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.