Help with Ajax, project due next week.

[CarlosTheDwarf]

Hello, I'm currently taking a javascript, ajax, and sql course and we have a project due on the 19th. We have just been introduced into Ajax and we have already covered basic javascript. Here is the basic idea :

Simple text file for the database

{

This is the text file's contents

3;

20:Sue, Peggy;

10:Jones, Dave;

30:Goodman, John

}

Once a user enters a  number, “10” for example, into the field, your program should display “Jones” and “Dave” in the appropriate fields on your web page.

I've done simple examples for AJAX, like changing the text in a div tag by pressing a button that loads the text file, the concept that I can't seem to wrap my mind around is, after I get the text with the GET method how do I navigate through it to find the specified numbers that correspond to the names. So if the user enters in a 78, how do I go into the text file to look for that number?

I do not expect this to be done for me, I would just like some explanation on how to approach it. So please dont explain how to do the entire thing because I wouldn't want my teachers to think I was cheating.

Thank you in advance ^_^

[bregent]

Assuming you're using php on the server side, here's a hint: http://www.php.net/manual/en/ref.strings.php. Scan through those functions to find one that you think will work.

[David_Powers]

bregent has given you a clue with regard to PHP. However, if you're just using JavaScript, the main clue is that each value is on a separate line. Look at how you might convert the text that's returned from the Ajax call into an array. Then examine each array element.

[CarlosTheDwarf]

Yes I'm not allowed to use PHP, which I think would be easier. I'm just having a lot of trouble understanding this because I'm very new to coding, I have taken a beginner course in C++ and am pretty familiar with the basics, which made learning javascript easy. However, I am not that familiar with HTML so it's making it hard for me to understand how to get the information from the forum the user enters their ID number into when they press the submit button. From what I've been able to figure out, the submit button gets sent back to a destination predefined in the form tag through the action attribute.  I have actually read an article I believe you posted about how to set up a local testing server in Dreamweaver trying to get this project done. If you have the time, could you please type up an example for me? Im just so confused I dont even know what to ask you for. -_-;

Thanks in advance.

[David_Powers]

Although the default action of the submit button is to send the data to the processing script identified in the action attribute, you don't want the form to be submitted when you're using Ajax.

The following is a very simple script that outputs to the browser console the value entered in the form field. To keep the script simple, I have used the W3C Event model, so this won't work in IE 8 or earlier. But it should help you understand how to get the value from a form input field using JavaScript.

<form id="form1" name="form1" method="post" action="">
    <p>
        <input type="text" name="user_input" id="user_input">
    </p>
    <p>
        <input type="submit" name="submit" id="submit" value="Submit">
    </p>
</form>
<script>
// Add event listener to submit button
document.getElementById('submit').addEventListener('click', getVal, false);
function getVal(e) {
    // Get the value of the input field
    var val = document.getElementById('user_input').value;
    // Output it to the console
    console.log(val);
    // Prevent the form from submitting
    e.preventDefault();
}
</script>