如何从javascript访问表单数据

我是一个javascript newb,所以对此事的任何帮助都将不胜感激!</ p>

< p>我试图在提交后让用户提交数据。
我有一个javascript函数,用一个表单替换另一个表单。 一个stackoverflow用户帮我创建了这个函数。</ p>

  function Vanish(event){

event.preventDefault();

//指定id的id form。
var IDofForm =“quest”;

//指定包含表单的div的id。
var IDofDivWithForm =“question”;

//指定包含内容的div的id 用。
var替换表单IDforReplacement =“entryform”;

if(document.getElementById(IDofDivWithForm).innerHTML = document.getElementById(IDforReplacement).innerHTML){
return true;
}
else {\ n返回false;
}
}
</ code> </ pre>

然后我有我的表格:</ p>

 &lt; div  id =“question”&gt; 
&lt; form action =“”method =“POST”name =“quest”id =“quest”onsubmit =“Vanish(event)”&gt;
&lt; textarea name =“question”class =“问题字段”占位符=“提出问题...”&gt;&lt; / textarea&gt;&lt; br&gt;&lt; br&gt;
&lt; input type =“submit”name =“qsubmit”onclick =“更改( );“&gt;
&lt;! - Change()仅在屏幕上交换图像 - &gt;
&lt; / form&gt;

&lt; / d iv&gt;

&lt;! - 消失形式 - &gt;
&lt; div id =“entryform”style =“display:none;”&gt;
&lt; form action =“”method =“POST”id = “email”&gt;
&lt; input type =“text”name =“fName”placeholder =“First Name”class =“forms”value =“&lt;?echo $ _POST ['question'];?&gt;”&gt ;
&lt; / br&gt;
&lt; input type =“text”name =“sName”placeholder =“Second Name”class =“forms”&gt;
&lt; / br&gt;
&lt; input type =“text”name =“email”placeholder =“Email”class =“forms”&gt;
&lt; / br&gt;
&lt; input type =“image”src =“images / submit.png”name =“esubmit”onclick =“submitForm( )“&gt;
&lt; / br&gt;
&lt; / div&gt;
</ code> </ pre>

从上面我可以看到,我有两种形式。 报名表格在提交后替换了问题表格。
我今天的问题是如何获取输入的数据?
我更喜欢PHP,因为我理解它更多,所以如果有一个PHP方法,这将是伟大的,但所有 解决方案将有所帮助!</ p>

对于PHP,我尝试使用$ _REQUEST和$ _POST方法尝试获取数据,但它不起作用。
我的表单都提交给了 他们所在的页面。</ p>
</ div>

展开原文

原文

I am a javascript newb so any help on this matter would be appreciated!

I am trying to get the user submitted data back after submission. I have a javascript function that replaces one form with another. A kind stackoverflow user helped me create this function.

function Vanish(event) {

event.preventDefault();

// Specify the id of the form.
var IDofForm = "quest";

// Specify the id of the div containing the form.
var IDofDivWithForm = "question";

// Specify the id of the div with the content to replace the form with.
var IDforReplacement = "entryform";

if(document.getElementById(IDofDivWithForm).innerHTML = document.getElementById(IDforReplacement).innerHTML){
 return true;
 }
 else{
 return false;
 }
 }

Then I have my forms :

<div id="question">
<form action="" method="POST" name="quest" id="quest" onsubmit="Vanish(event)">
<textarea name="question" class="question-field" placeholder="Ask your question..."></textarea><br><br>
<input type="submit" name="qsubmit" onclick=" Change();">
<!-- Change() only swaps images on the screen-->
</form>

</div>

<!-- Vanishing Form -->
<div id="entryform" style="display:none;">
<form action="" method="POST" id="email">
<input type="text" name="fName" placeholder="First Name" class="forms" value="<?echo $_POST['question'];?>">
</br>
<input type="text" name="sName" placeholder="Second Name" class="forms">
</br>
<input type="text" name="email" placeholder="Email" class="forms">
</br>
<input type="image" src="images/submit.png" name="esubmit" onclick="submitForm()">
</br>
</div>

As you can see from above I have two forms. the entry form replaces the question form after it has been submitted. My question today is how do I get the entered data? I prefer php as I understand it more so if there was a php method to this that would be great however all solutions will be helpful!.

For PHP I have tried using the $_REQUEST and $_POST methods to try and get back the data but it does not work. My forms all submit to the page they are on.

douxuqiao6394
douxuqiao6394 是的当然:)非常感谢你!@NullPoiиteÑ
5 年多之前 回复
dongsheng4679
dongsheng4679 让我给你回答,等待几分钟
5 年多之前 回复
dongpao1873
dongpao1873 我宁愿拥有它而不重新加载页面。这种方法有什么例子吗?另一个问题是我的javascript函数可以和ajax一起使用吗?
5 年多之前 回复
dqprf0976
dqprf0976 好吧,这取决于,如果你想发送数据而不重新加载页面比ajax是要走的路...如果你想获得值后重定向,你可以使用表单
5 年多之前 回复
dou760663
dou760663 是的,它更好。
5 年多之前 回复
dpdhsq0783
dpdhsq0783 我试图使用表单,因为我没有使用ajax的经验。ajax会是一个更好的解决方案吗?
5 年多之前 回复
dpzff20644
dpzff20644 你的问题很模糊,虽然有几种方法可以做...1.你可以像我们一样通过表格发送数据,2。通过Ajax发送数据3.用参数创建一个链接并通过$_GET在php中获取数据
5 年多之前 回复
drq9991
drq9991 我编辑了代码以添加表单:)希望这有帮助。我不完全明白正在做什么检查。我在document.get..etc周围有一个IF只是为了看看是否这样做会返回false
5 年多之前 回复
douwei7501
douwei7501 发布完整代码..只有javascript没有说什么..+只使用preventDefault,如果需要,所以首先检查检查是否失败,然后防止,否则只是传递..
5 年多之前 回复

1个回答



首先,JavaScript是客户端编程语言,因此要将数据提供给服务器,您需要向服务器发送http / https请求并发送 /接收数据</ p>


良好阅读客户端和服务器端编程有什么区别? </ p>
</ blockquote>

要做到这一点,你可以使用html表格或ajax </ p>


  1. 表格</ li>
    </ ol>

    在表格中你只需要 将数据发送到行动中的url(如果没有指定url,它将向当前页面请求其他指定的动作URL)</ p>


    1. Ajax </ li> \ n </ ol>

      您可以使用ajax发送数据,因为您只需要像下面那样发出ajax请求(强烈建议您使用JavaScript(但如果您擅长JavaScript,则可以使用Jquery框架) </ p>

        var yourFormId = docume  nt.getElementById(“email”); 
      
      

      email.onsumbit = function(e){

      e.preventDefault();

      var formData = new FormData(yourFormId);
      var request = new XMLHttpRequest();
      request.open(“POST”,“your-url”);
      request.send(formData);
      }
      </ code> </ pre>

      //这里通过formData对象,您可以在行</ p>

      的单个代码中获取所有数据并使用jquery查看此帖子它有非常简单的示例使用PHP的jQuery Ajax POST示例 </ p>


      现在几个好的读取</ p>


      1. FormData Objects </ li>
      2. Ajax:MDN </ strong> 是非常好的消息来源</ li>
        </ ol>
        </ div>

展开原文

原文

First of all JavaScript is client side programming language so to get data to server you need to make a http/https request to server and send/receive data

Good read What is the difference between client-side and server-side programming?

and to do that you can either use html Form or ajax

  1. Form

In form you simply send data to url in action ( if no url specified it will make request to current page else specified action url)

  1. Ajax

you can send data using ajax for that you just need to make ajax request like below (i highly recommended to use JavaScript ( but if you are good at JavaScript that you can use Jquery framework too )

var yourFormId = document.getElementById("email");

email.onsumbit = function(e){

   e.preventDefault();

   var formData = new FormData(yourFormId );
   var request = new XMLHttpRequest();
   request.open("POST", "your-url");
   request.send(formData);
}

// here by formData object you can get all data in single code of line

and to do with jquery see this post it has very simple example jQuery Ajax POST example with PHP


Now couple of good Reads

  1. FormData Objects
  2. Ajax : MDN its really good source

duane9322
duane9322 我建议你先进一步阅读JavaScript和Ajax,因为用ajax提交表单是最简单的事情...
5 年多之前 回复
doushu9253
doushu9253 来自PHP和JavaScript是不同的东西,并在不同的地方工作你不能通过JavaScript做PHP的事情(除了你使用node.js).. JavaScript运行在Web浏览器和PHP运行的服务器,如Apache或nginx(说 wamp,lamp,mamp)
5 年多之前 回复
dongzhong5833
dongzhong5833 jquery很容易! 只需使用<scritp src =“myjquery.js”> </ script>将文件绑定到源代码中,然后使用$(document).ready(function(){...}启动“javascript”(实际上包含jquery) ); 您调用的所有内容...将在页面完全加载后触发。 使用jquery让您的生活更轻松。 在jquery中发送帖子是$ .post(“myFile.php”,{data:formDataAsAnArray})。done(function(response){console.log(response)});
5 年多之前 回复
duanjipiao7076
duanjipiao7076 即时尝试使用将数据发送到当前页面的表单。 可悲的是,我不完全理解jQuery,所以我想我会尝试ajax解决方案。 那么如何在我的javascript函数中加入那些ajax代码行呢? 这是代码共享的链接:codeshare.io/PETYl
5 年多之前 回复
doutan2228
doutan2228 您可能在答案中添加的其他信息:应始终尝试拒绝将服务器端语言与客户端语言混合使用。 这使得源更具可读性和结构性!
5 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐