0

Hello and thank you for viewing my question. I am a complete beginner and am looking for simple ways to do the following...

What I have in seperate linked documents: HTML, CSS, Javascript, PHP

What I am having trouble with:

I need to use something like JSON (although I would also accept XML requests or Ajax at this point if they work) to transfer variables from Javascript to PHP. I need the variables to search in a database, so they need to be literally available within PHP (not only seen on a pop-up message or something).

I have seen a LOT of different ways to do this, I have even watched tutorials on YouTube, but nothing has worked for me yet. The things I am having the biggest problem with is that when I add a submit button to my form it doesn't submit my form and I don't know why.

Form code snippet:

<form id="form" name="input" method="post" action="javascript:proofLength();">
<input id="userinput" type="text" autofocus />
<input id="submit" type="button" value="submit" onsubmit="post();">
</form>

The second to last line there doesn't work. Do I need javascript to submit the form? Because I really thought that in this case it was part of the functionality of the form just like method="post"...

The other thing is that for JSON, I have no idea what to do because my variables are determined by user input. Therefore, I cannot define them myself. They are only defined by document.getElement... and that doesn't fit the syntax of JSON.

Those are really my main problems at the moment. So if anyone could show me a simple way to get this variable transfer done, that would be amazing.

After this I will need to search/compare in my database with some php/sql (it's already connecting fine), and I need to be able to return information back to a in HTML based on what I find to be true. I saw one example, but I am not sure that was very applicable to what I am doing, so if you are able to explain how to do that, that would be great also.

Thank you very, very much. April

Improve this question

2 Answers 2

Reset to default
0

You don't need ajax to submit this form. You don't even need javscript. Just do this:

<form id="form" name="input" method="post" action="mytarget.php">
<input id="userinput" name="userinput" type="text" autofocus />
<input id="submit" type="submit" value="submit" />
</form>

This will send the form data to mytarget.php (can be changed of course)

See that i have added the name attribute to your text-field in the form and i changed the type of the button to submit. Now you can work the Data in mytarget.php like this:

<?
$username = $_POST['userinput'];
echo "Your name is: ".$username;
?>

You wanted to have a check for length in the submit. There are two ways to this:

  1. Before the input is send (the server is not bothered)
  2. Let the server Check the input

for 1 you will have to append a event listener, like this:

var form = document.getElementById("form");
form.addEventListener("submit", function(event){
    console.log("test");
  var name = form.elements['userinput'].value;
    if(name.length < 3){
        alert("boy your name is short!");
        event.preventDefault();
    }
});

Enter a name with less then 3 characters and the form will not be submitted. test here: http://jsfiddle.net/NicoO/c47cr/

  1. Test it Serverside

In your mytarget.php:

  <?
    $username = $_POST['userinput'];
    if(strlen($username) > 3)
        echo "Your name is: ".$username;
    else 
        echo "your name was too short!";
  ?>

You may also do all this with ajax. You will find a lot of good content here. But I'd recommend a framework like jQuery to do so.

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

4 Comments

This is increadibly helpful! Thank you. But I unfortunately do need JS - it's part of an assignment...
There is even a demo of the javascript part. You can clearly see how to retreive the form elements with JS and work with it. What else fo you want?
Sorry, didn't realize you went on to explain JS. I already have a function that works. What I am still not understanding is how to transfer variables from JS to PHP... unless what everyone is trying to say is that I don't need my variables in JS at all...but I think I do? Anyways, it's part of the assignment. An XML request would probably be the best, but I am not sure how to make it happen.
Read this: stackoverflow.com/questions/19029703/… and this: api.jquery.com/jQuery.ajax
0

The problem is in this line

<form id="form" name="input" method="post" action="javascript:proofLength();">

The action should be a PHP page (or any other type of server script) that will process the form. Or the proofLength function must call submit() on the form In the php page you can obtain variable values using $_GET["name"] or $_POST["name"] To summarize; your code should look like this

<form id="form" name="input" method="post" action="yourpage.php">
<input id="userinput" type="text" autofocus />
<input id="submit" type="button" value="submit">
</form>

and for your php page:

<?php
$userinput = $_POST["userinput"];
//Do what ever you need here
?>

If you want to do something in your javascript before submitting the form, refer to this answer

Improve this answer

8 Comments

Thank you, but I am not exactly sure how that is supposed to fix the problem. I have quite a few things that I need to do first in JavaScript before taking my variables to PHP... unless you mean that my variables should be going directly to PHP first and then into JS? But I also don't know how to do that...
No, you can do whatever you need in proofLength function, but at the end of the function you MUST call form.sumbit(). If you have other variables you want to be sent to the server you can use hidden input fields
I mean variables that are calculated and you do not want them to be visible to the user in you GUI
I have updated my answer with how to do javascript before sumbit
The comment is missing what you need to do :)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.