CODEWITHSUNDEEP
jqueryajaxjson
user2635001
user2635001

Reputation: 173

refresh input after ajax submit form

I searched all over but couldn't find how to refresh specific input field via js/jquery/ajax.

This my input that change on every post :

<input type='hidden' id='nonce' name='nonce' value=''>
<input type='hidden' id='key' name='key' value=''>

I need after ajax form submit to refresh this inputs, any idea?

A better explanation : This php code generates random hashed keys.

<form action="#">

<?php $n->generateFormFields() ?>

</form>

I send this generated key via ajax POST, the problem is when I send the code to the ajax, the key changes in server side, so after next submit the key will be wrong because it didn't change after the ajax response, so I need to refresh this code after ajax submit/ refresh the inputs above.

edit 2 :

I am using this php script :

http://github.com/greatwitenorth/php-nonce

The script is working on php POST, but I am using AJAX post so I need to refresh the keys with ajax somehow.

edit 3:

The form ex:

<form action="#">

<?php $n->generateFormFields() ?>

</form>

The php function above is creating Hashed keys. These hashed keys I send via ajax json POST, after I send them, I verify that the key is the same as the database key . - if ok continue, if not show error. now the problem is the key changes every time the form submitted. So it changes but in the input on the form, its not changed because ajax is not refreshing the page, so it will be sending the same key value that was before.

Upvotes: 2

Views: 13891

Answers (2)

Optimus Prime
Optimus Prime

Reputation: 6907

.html file

<!DOCTYPE html>

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
    $("#check").click(function(){
        $("#keyvalue").text($("#key").val());
    });
    $("#submit").click(function(){
    var text = $("#text").val();
    var key = $("#key").val();
        $.ajax({
            url: 'trial.php',
            data: {text: text, key:key},
            type: 'POST',
            dataType: 'json',
            success: function(data) {
                if(data.status == "fail"){
                    $("#status").html(data.message);
                }else{
                    $("#status").html(data.message);
                    $("#key").val(data.key);
                    $("#keyvalue").text('');
                }
            }
        });
        return false;
    });
 });
</script>
</head>
<body>
    <form method="post" action="trial.php" onsubmit="return send_form();">
        <input type="text" name="text" id="text"/>
        <input type="hidden" id="key" name="key" value="xsaigoehf7118191"/>
        <button id="submit">Send data and get new key</button>
    </form>
    <br><br>
    <div id="status"></div>
    <br><br>
    <button id="check">What's current value of key?</button> --------> <span id="keyvalue"></span>

    <div id="response"></div>
</body>

</html>

.php

<?php

//You get the form contents here.

$key = isset($_POST['key']) ? $_POST['key'] : "error";
$text = isset($_POST['text']) ? $_POST['text'] : "empty";

//Check them if it matches with DB's entry, if doesn't you set $key = "error";

if($key=="error"){
    $status = "fail";
    $message = "There was some error processing your form.";
    exit;
} else{

    //You generate another random key.
    $random ='';
    for ($i = 0; $i < 10; $i++) {
        $random .= chr(mt_rand(33, 126));
    }

    //Now here in steps save it to your DB. So that when next form is submitted you can match it.
    //And send back response to html file, where ajax will refresh the key.
    $status = "success";
    $message = "
    Your form was processed succesfully<br>
    The text you sent was ".$text.", and the key you sent was ".$key.".
    The new key sent to you can be seen by pressing the button below, has value, ".$random."<br><br>
    ";
    }

    echo json_encode(array("status" => $status, "message" => $message, "key" => $random));

?>

Hope this helps you.

Upvotes: 1

Optimus Prime
Optimus Prime

Reputation: 6907

Since you are using ajax to return the value, save the new value to a varibale say new_input,

then simply use,

$("#target_input_id").val(new_input);

Or your .done() function in ajax call should be like,

.done(function ( data ) {
  $("#target_input_id").val(data); //assuming the php file only returns the value for input
});

Since you have to return multiple values, look at this two links.

json - Jquery return undefined for multiple values in ajax call

How to return multiple values from JQuery AJAX call?

Now .done() would be,

.done(function ( data ) {
      $("#key").val(data.key); 
      $("#nonce").val(data.nonce);
    });

Upvotes: 0

Related Questions