如何使用Jquery将值放入输入字段?

时间:2014-03-19 17:01:15

标签: jquery

使用ajax,数字在php echo $response;中回显。然后在Jquery中,我想将这个数字放入一个名为' total one'的字段中。我怎么能这样做?

到目前为止

代码:

在php文件中

echo $response;

在Jquery文件中

jQuery(document).ready(function($) {
    (function($) {
        $(document).ready(function() {
            $('#formsubmit').click(function() {
                $.post(
                PT_Ajax.ajaxurl, {
                    action: 'ajax-inputtitleSubmit',
                    numberofwelds: $('input[name=numberofwelds]').val(),
                    numberofconwelds: $('input[name=numberofconwelds]').val(),
                    nextNonce: PT_Ajax.nextNonce
                }, function(response) {
                    $('#totalone').val(response);
                });
                return false;
            });
        });
    })(jQuery);
});

更新

console.log只会显示我尝试在#totalone字段中显示的号码。 JS控制台中没有任何错误。

创建Ajax响应以发送回Jquery的PHP:

 function myajax_inputtitleSubmit_func() {
        $nonce = $_POST['nextNonce'];   
    if ( ! wp_verify_nonce( $nonce, 'myajax-next-nonce' ) )
        die ( 'Busted!');

    $numwelds = isset($_POST['numberofwelds']) ? $_POST['numberofwelds'] : '';
$numconwelds = isset($_POST['numberofconwelds']) ? $_POST['numberofconwelds'] : '';

if (is_numeric($numwelds) && is_numeric($numconwelds))
{
    $total = $numwelds + $numconwelds;
    $response = json_encode($total);
    header("Content-Type: application/json");  
    echo $response;
    exit;
} 
}

表单HTML

<form action="" method="post" name="formsubmit" id="formsubmit"   >
<h1> Process </h1>
<p> operation type always robot </p>
Number of welds: <input type="number" name="numberofwelds" id="numberofwelds"  >
<br /> <br />
Number of construction welds: <input type="number" name="numberofconwelds" id="numberofconwelds"  >
<br /> <br />
Total one: <input type="text" name="totalone" id="totalone" disabled>
<br /> <br />
<input type="submit"  value="Calculate" id="submit" name="submit" class="ajax-link" >
<div id="result"> </div>
</form>

3 个答案:

答案 0 :(得分:1)

我在你的代码中找到了一些额外的括号等等。以下是可能正常工作的清理版本:

(function($) {
  $(function() {
    $('#formsubmit').click(function(){
        $.post(
            PT_Ajax.ajaxurl,
            {
                action : 'ajax-inputtitleSubmit',
                numberofwelds : $('input[name=numberofwelds]').val(),
                numberofconwelds : $('input[name=numberofconwelds]').val(),
                nextNonce : PT_Ajax.nextNonce
            },
            function( response ) {
                $("#totalone").val(response);
            }
        );
        return false;
    });
  });
}(jQuery));

答案 1 :(得分:0)

试试这个。将val()更改为text()

jQuery(document).ready(function($) {
    (function($) {
        $(document).ready(function() {
            $('#formsubmit').click(function() {
                $.post(
                PT_Ajax.ajaxurl, {
                    action: 'ajax-inputtitleSubmit',
                    numberofwelds: $('input[name=numberofwelds]').val(),
                    numberofconwelds: $('input[name=numberofconwelds]').val(),
                    nextNonce: PT_Ajax.nextNonce
                }, function(response) {
                    $('#totalone').text(response);
                });
                return false;
            });
        });
    })(jQuery);
});

答案 2 :(得分:0)

我将$('#totalone').val(response);中的单引号更改为像$("#totalone").val(response);一样加倍。它似乎现在正在工作,&amp;我不太明白为什么会这样。