how to get values when using javascript in form

Question

I am a beginner in java-script, I would like to send my values to another page with using java-script .

my codes :

<form  id="contact-form" method="post" enctype="multipart/form-data">              
   <fieldset>
       <label><span class="text-form">name</span><input name="name"  type="text" /></label>
       <label><span class="text-form">email</span><input  type="text" /></label>   
       <label><span class="text-form">phone</span><input  name="mobile" type="text" /></label>     
       <div class="wrapper"><div class="text-form">comment</div><textarea id="nazar"></textarea></div>
        <div class="buttons">
            <a class="button" href="#" onClick="document.getElementById('contact-form').reset()">refresh</a>
            <a class="button"href="savenazar.php" onClick="document.getElementById('contact-form').submit()">send</a>
        </div>                             
     </fieldset>                        
  </form>

now how can I get name,phone .. values in savenazar.php page ?

possible duplicate http://stackoverflow.com/questions/1409013/how-to-read-the-post-request-parameters-using-javascript — ryvasquez, Nov 29 '14 at 07:59
@ghost, tnx but I want to use java-script. how can I do ? any help ? — S.M_Emamian, Nov 29 '14 at 08:02
@S.M_Emamian state your intent clearly, so you do not wan't the whole page to load? so this you mean ajax? — Kevin, Nov 29 '14 at 08:03

ekad · Answer 1 · 2014-11-29T08:10:09.180

You need to add action="savenazar.php" attribute to the form and use <input type="submit"> instead of <a>. The email textbox also needs name="email" attribute

<form action="savenazar.php" id="contact-form" method="post" enctype="multipart/form-data" >                    
    <fieldset>
        <label><span class="text-form">name</span><input name="name"  type="text" />
        </label>
        <label><span class="text-form">email</span><input name="email" type="text" /></label>   
        <label><span class="text-form">phone</span><input name="mobile" type="text" /></label>     
        <div class="wrapper"><div class="text-form">comment</div><textarea id="nazar"></textarea></div>
        <div class="buttons">
        <a class="button" href="#" onClick="document.getElementById('contact-form').reset()">refresh</a>
        <input type="submit" class="button" value="send" />
        </div>  
    </fieldset>    
</form>

then in savenazar.php you can get the values by using $_POST["x"] where x is the name attribute of the input tag you want to get from. For example you can get name by $_POST["name"] because the name textbox has name="name" attribute. You can get email by $_POST["email"] because the email textbox has name="email" attribute. You can get phone by $_POST["mobile"] because the phone textbox has name="mobile" attribute, and so on.

Alternatively you can also use the <a> tag like in your previous code and set the href attribute to # as mentioned by @Ghost in the comment below

<form action="savenazar.php" id="contact-form" method="post" enctype="multipart/form-data" >                    
    <fieldset>
        <label><span class="text-form">name</span><input name="name"  type="text" />
        </label>
        <label><span class="text-form">email</span><input name="email" type="text" /></label>   
        <label><span class="text-form">phone</span><input name="mobile" type="text" /></label>     
        <div class="wrapper"><div class="text-form">comment</div><textarea id="nazar"></textarea></div>
        <div class="buttons">
        <a class="button" href="#" onClick="document.getElementById('contact-form').reset()">refresh</a>
        <a class="button" href="#" onClick="document.getElementById('contact-form').submit()">send</a>
        </div>  
    </fieldset>    
</form>

you could also just leave the anchor that the OP setup, just leave it as `href="#"` then your action is already correct, anyways, +1 — Kevin, Nov 29 '14 at 08:02

score 2 · Accepted Answer · answered Nov 29 '14 at 08:22

The following code will help you achieve what you are looking for and it does it with AJAX so no need to refresh the page

<form  id="contact-form" method="post" enctype="multipart/form-data">              <fieldset>
   <label><span class="text-form">name</span><input name="name"  id="name" type="text" /></label>
   <label><span class="text-form">email</span><input id="email" type="text" /></label>   
   <label><span class="text-form">phone</span><input id="mobile" name="mobile" type="text" /></label>     
   <div class="wrapper"><div class="text-form">comment</div><textarea id="nazar"></textarea></div>
    <div class="buttons">
        <a class="button" href="#" onClick="document.getElementById('contact-form').reset()">refresh</a>
        <a class="button id="submit">send</a>
    </div>                             
 </fieldset>                        
  </form>

add the following js to your file or include it

$('#submit').click(function() {
name = document.getElementById('name').value;
email = document.getElementById('email').value;
mobile = document.getElementById('mobile').value;
$.post('savenazar.php', {'name': name, 'email': email, 'mobile'" mobile}, function(data) {

   var parsed = JSON.parse(data);

    var html = 'HTML to show when data is passed';
<!-- following are your divs -->
$('#requestStatus').append(html);
 }).success(function() {
    $('#comment').val('');
    $('#sentSuccess').html('data Sent!').show().delay(5000).fadeOut();
}).fail(function() {
    $('#sentFailed').html('data not sent').show().delay(5000).fadeOut();
});

});

// In savenazar.php

<?php
$name = $_GET['name'];

score 0 · Answer 3 · answered Nov 29 '14 at 08:02

You would require some knowledge of server side programming, in this instance PHP.

Handling POST data server-side should be taken seriously as this is easily the most prominent security hole in most new websites.

A simple PHP script to view POST data would be:

<?php

if ($_POST) {
    echo '<pre>';
    var_dump($_POST);
    echo '</pre>';
}

?>

"Security measures" must be taken when it comes to ensuring the validity of client-side input

Prevent SQL Injection (If storing in MySQL use mysqli_real_escape_string())
Form Flooding (Captcha is the most popular choice to prevent this)

Taking what ekad added you can then access the POST data using $_POST['name'] etc.

I recommend looking up some beginner tutorials, here is a good one to get started: PHP Forms

how to get values when using javascript in form

3 Answers3