Получить значение входного сигнала на контроллер с помощью JQuery Ajax

Question

Вот форма

<form> 
    <input id="amount" type="text" placeholder="Amount in &euro;" name="writtenamount"/> 
    <button class="btn btn-lg" type="submit" id="btn1" >BTN1</button> 
    <button class="btn btn-lg" type="submit" id="btn2">BTN2</button> 
</form> 

который имеет поле ввода, все, что мне нужно сделать, это нажать значение к контроллеру с помощью JQuery Ajax. Но я думаю, что его написано неправильно.

<script type="text/javascript"> 
$('#btn1').click(function() { 
    $.ajax({ 
    url: 'moneyexchange/invest_first_page', 
    type: 'POST', 
    data: { 
     writtenamount: $("#amount").val() 
    }, 
    success: function (result) { 
     alert(result); 
    } 
    }); 

}); 

</script> 

и у меня есть контроллер здесь,

public function invest_first_page(){ 
     $this->load->helper('form'); 
     $this->load->library('form_validation'); 
     $this->load->view('header'); 
     $userProvidedAmount = $this->input->post("writtenamount"); 
     $data = array(
     'userProvidedAmount' => $userProvidedAmount 
     ); 
     $this->load->view("firstPage", $data); 
     $this->load->view('footer'); 
} 

теперь я не могу послать значение от входа к контроллеру, поэтому нужна помощь, чтобы исправить это.

Answer 1

На самом деле все в порядке, просто изменить свой старый код этого

method: 'POST', 
data: { writtenamount: $("#amount").data('value')}, 

Answer 2

Необходимо проверить, что $userProvidedAmount имеет полезную стоимость.

$userProvidedAmount = $this->input->post("writtenamount"); 
if(!empty($userProvidedAmount)) 
{ 
    $data['provided_amount'] = $userProvidedAmount; 
    $this->load->view("firstPage", $data); 
    $this->load->view('footer'); 
} 
else 
{ 
    //load (or reload) the form with a prompt about the amount being required 
} 

Вам действительно нужно, чтобы узнать, как использовать form validation.

В представлении «первая страница» обращайтесь к таким данным.

<div>You entered <?= $provided_amount; ?>. Thanks for your support!</div> 

Answer 3

Не уверен, но он смотрит на меня, как у вас есть две вещи, когда вы нажмете кнопку отправки.

1) вы вызываете метод ajax jQuery, который отправит запрос ajax и предупредит ответ.
2) форма отправляется в обычном режиме (не-аякс). Это связано с тем, что вы не останавливаете поведение кнопки отправки по умолчанию, поэтому перезагрузка страницы.

Итак, вы можете либо добавить preventDefault(); в ваш метод обработчика нажмите Jquery (убедитесь, чтобы добавить аргумент события в этот обработчик):

$('#btn1').click(function(event) { 
    $.ajax({ 
    url: 'moneyexchange/invest_first_page', 
    type: 'POST', 
    data: { 
     writtenamount: $("#amount").val() 
    }, 
    success: function (result) { 
     alert(result); 
    } 
    }); 


    // stop default behavior of form submission 
    event.preventDefault(); 

}); 

Или, так как они на самом деле не представить кнопки в том смысле, что вы хотите отправить форму, используя не-Ajax метод , вы можете изменить тип ввода ваших кнопок «кнопки» вместо «отправить»:

<form> 
    <input id="amount" type="text" placeholder="Amount in &euro;" name="writtenamount"/> 
    <button class="btn btn-lg" type="button" id="btn1" >BTN1</button> 
    <button class="btn btn-lg" type="button" id="btn2">BTN2</button> 
</form> 

Я думаю, что любой из этих методов работы. У меня возникнет соблазн изменить исходные данные, потому что наличие типа «submit» вводит в заблуждение здесь - вы действительно не хотите представлять, когда они выбраны.

Надеюсь, что я правильно понял ваш вопрос и что у меня есть смысл.