Question

当用户在输入框中填写值时，它应该动态显示在屏幕上... 到目前为止，我创造了一个，但在第二个面临困难，请帮助... 一个提交按钮正在工作，但第二个工作不起作用，即使警报不起作用点击...这是我在控制器中的功能

function mohsin()
    {
        $message = $_POST['message'];
        echo $message;

        // $message1 = $_POST['message1'];
        // echo $message1;
    }

我不知道代码在哪里工作我按照我在第一个程序中执行的相同程序

var counter = 1;
var limit = 4;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]' id='input"+counter+"'><input type='button' value='Submit' id='submit"+counter+"'>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

	  $(document).ready(function(){


    $("#submit0").click(function(){
      //alert('hhh');
        $("#input0").hide();
        $("#submit0").hide();
  
          $.ajax({
           "url": "http://localhost/identity/index.php/verify/mohsin",
           "type": "POST",
           data: {message : $("#input0").val()},
           dataType: "text",  
        success :  function (result) {
               $('#demo0').html(result);
        },
    });
  return false;
    });
});


   $("#submit1").click(function(){
      alert('hhh');
        $("#input1").hide();
        $("#submit1").hide();
  
          $.ajax({
           "url": "http://localhost/identity/index.php/verify/mohsin",
           "type": "POST",
           data: {message : $("#input1").val()},
           dataType: "text",  
        success :  function (result) {
               $('#demo1').html(result);
        },
    });
  return false;
    });
    
    <?php
    function mohsin()
		{
			$message = $_POST['message'];
			echo $message;

			// $message1 = $_POST['message1'];
			// echo $message1;
		}
    ?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>


<form method="POST">
     <div id="dynamicInput">
          <!-- Entry 1 --><br><input type="text" name="myInputs[]" id="input0">
          <input type="button" name="" value="Submit" id="submit0">
     </div>
     <p id="demo0"></p>
     <p id="demo1"></p>
     <input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
</form>

谢谢

Answer 1

将您的第二个活动更新为以下内容：

$(document).on('click', '#submit1', function(){
  alert('hhh');
  $("#input1").hide();
  $("#submit1").hide();
  $.ajax({
      "url": "http://localhost/identity/index.php/verify/mohsin",
      "type": "POST",
       data: {message : $("#input1").val()},
       dataType: "text",  
       success :  function (result) {
         $('#demo1').html(result);
       },
   });
   return false;
});

但您的代码中仍然存在问题，因为您正在增加值counter。因此，当您的计数器设置为2时，它将无法在dom上找到ID value2。

让我们将您的代码更新为以便正常使用：

你的Html：

<form method="POST">
  <div id="dynamicInput">
    <br><input type="text" name="myInputs[]" id="input0">
    <input type="button" name="" value="Submit" id="submit0">
  </div>
  <p id="results"></p>
  <input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
</form>

Javascript：

function addInput(divName){
    if (counter == limit)  {
      alert("You have reached the limit of adding " + counter + " inputs");
    }
    else {
      var newdiv = document.createElement('div');
      newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]' id='input"+counter+"'><input type='button' onclick='addValue("+counter+")' value='Submit' id='submit"+counter+"'>";
      document.getElementById(divName).appendChild(newdiv);
      counter++;
    }
  }


function addValue(counter) {
    alert('hhh');
    $("#input"+counter).hide();
    $("#submit"+counter).hide();
    $.ajax({
      "url": "c.php",
      "type": "POST",
      data: {message : $("#input"+counter).val()},
      dataType: "text",  
      success :  function (result) {
          $('#results').append(result);
      },
    });
    return false;
  }

并将您的php文件更新为：

<?php 
  $message = $_POST['message'];
  echo '<p>'.$message.'</p>';
?>

Answer 2

问题是你的

$（＆＃34;＃submit1＆＃34）。单击（函数（）{

未绑定到future元素。所以点击功能到目前为止还没有绑定。你可以做几件事首先使用future元素绑定函数（这是你的情况）。您需要使用live或on两者都可以使用。第二件事是你正在使用它，所以如果id改变它将不再起作用。最好在这里使用课程。

获取userinput并在ajax和php中显示在屏幕上

2 个答案: