Bootstrap form doesn't retrieve SolveMedia POST data

问题

I have created a form in a Bootstrap modal for user account registration:

<div class="modal-body">
    <form class="form-horizontal" id="registerForm">
      <div class="form-group">
        <label for="newUsername" class="control-label col-xs-3">Username</label>
        <div class="col-xs-9">
          <input type="text" class="form-control" id="newUsername" required>
        </div>
      </div>
      <div class="form-group">
        <label for="newPassword" class="control-label col-xs-3">Password</label>
        <div class="col-xs-9">
          <input type="password" class="form-control" id="newPassword" required>
        </div>
      </div>
      <div class="form-group">
        <label for="newPassword2" class="control-label col-xs-3">Password</label>
        <div class="col-xs-9">
          <input type="password" class="form-control" id="newPassword2" required>
        </div>
      </div>
      <div class="form-group">
        <label for="newEmail" class="control-label col-xs-3">E-mail</label>
        <div class="col-xs-9">
          <input type="email" class="form-control" id="newEmail" required>
        </div>
      </div>
    </form>
</div>

Ajax

$(document).on('submit', '#registerForm', function () {
        var username = $("#newUsername").val();
        var password = $("#newPassword").val();
        var email = $("#newEmail").val();

        $.post("registration.php", { new_user: username, new_psw: password, new_email: email}, function(data) {
                var result = $.parseJSON(data);
                if (result.error) {
                        if (result.err_code == 1) {
                                $('#newUsername').css({"border": "2px solid red", "box-shadow": "0 0 3px red"});
                        }
                        else if (result.err_code == 2) {
                                $('#newEmail').css({"border": "2px solid red", "box-shadow": "0 0 3px red"});
                        }
                }
        });
        event.preventDefault();
});

I want to integrate the SolveMedia captcha and i follow these steps to do it: https://portal.solvemedia.com/portal/help/pub/php/

So i added the following code before </form> tag:

<div class="form-group">
    <label class="control-label col-xs-3">Captcha code</label>
    <div class="col-xs-9">
        <?php echo solvemedia_get_html("my_key"); ?>
    </div>
</div>

HTML output of <?php echo solvemedia_get_html("my_key"); ?>

<textarea name="adcopy_challenge" rows="3" cols="40"></textarea>
<input type="hidden" name="adcopy_response" value="manual_challenge"/>

The problem is that the form processing file doesn't retrieve the SolveMedia POST fields:

$_POST["adcopy_challenge"]
$_POST["adcopy_response"]

that are in the SolveMedia library file (that i included in my PHP file).

So my form send all values except the SolveMedia POST values. According to the help section (https://solvemedia.zendesk.com/hc/en-us/articles/203660514-Always-Receiving-incorrect-solution-) i have to be sure that the form includes a POST method. Could the missing method="POST" in the Bootstrap form be the problem?

回答1:

Following is the Ajax code to submit the form

$(document).on('submit', '#registerForm', function () {
        var username = $("#newUsername").val();
        var password = $("#newPassword").val();
        var email = $("#newEmail").val();

        $.post("registration.php", { new_user: username, new_psw: password, new_email: email}, function(data) {
                var result = $.parseJSON(data);
                if (result.error) {
                        if (result.err_code == 1) {
                                $('#newUsername').css({"border": "2px solid red", "box-shadow": "0 0 3px red"});
                        }
                        else if (result.err_code == 2) {
                                $('#newEmail').css({"border": "2px solid red", "box-shadow": "0 0 3px red"});
                        }
                }
        });
        event.preventDefault();
});

If you look closer, you have created 3 var each for username, password and email but there are no var for SolveMedia POST fields you need to create SolveMedia POST fields like

var username = $("#newUsername").val();
var password = $("#newPassword").val();
var email = $("#newEmail").val();
var challenge  = $("[name='adcopy_challenge']").val();
var response  = $("[name='adcopy_response']").val();

once you will create SolveMedia POST fields var post it's values with Ajax here along with other input values

$.post("registration.php", { new_user: username, new_psw: password, new_email: email, challenge: adcopychallenge, response: adcopyresponse }

and on PHP side fetch values of SolveMedia POST fields

$_POST["adcopychallenge"]
$_POST["adcopyresponse"]

来源：https://stackoverflow.com/questions/32837590/bootstrap-form-doesnt-retrieve-solvemedia-post-data