用jQuery创建提交表单
[英]create submit form with jquery
问题描述
i want to make a submit action, so when i click submit the page will not refresh and data i input in div1 will send to kanjiconverter.php and display it to div2 by <?php echo $newkanji ?> . 
我想执行一个提交动作，所以当我单击提交时，页面将不会刷新，并且我在div1输入的数据将发送到kanjiconverter.php并通过<?php echo $newkanji ?>将其显示给div2 。 i have 3 form in these page. 我在这些页面中有3个表格。
here my kanjiconverter.php. 这是我的kanjiconverter.php。 i save a submit code here. 我在这里保存提交代码。
<?php
if(isset($_POST['submit1'])){
$kanji = ($_POST['convertkanji']);
$replacements = [
'class="rt">' => "",
];
$newkanji = strtr($kanji, $replacements);
}
?>
and my form code is here. 我的表单代码在这里。 submit button was in div1 but im using input tag not button tag. 提交按钮在div1但即时通讯使用input标签而不是button标签。
<form id="convertkanji" method="post" action="kanjiconverter.php"></form>
<form>
<div class="form-row">
<!-- START DIV1 HERE -->
<div id="div1" class="form-group col-md-6">
<label for="convertkanji">Kanji Convert</label>
<textarea id="convertkanji1" name="convertkanji" rows="10" form="convertkanji"></textarea>
<input type="submit" name="submit1" class="btn btn-default" form="convertkanji" value="Convert" style="width: 100%; margin-top: 6px;" />
</div>
<!-- Ended DIV1 HERE -->
<!-- START DIV2 HERE -->
<div id="div2" class="form-group col-md-6" style="display: none;">
<label for="kanji">New Kanji</label>
<textarea id="kanji" name="kanji" rows="12" form="tambahposting"><?php echo $newkanji ?></textarea>
</div>
<!-- Ended DIV2 HERE -->
</form>
and heres my jquery script. 这是我的jQuery脚本。 im place it above <html> tag. 我将其放在<html>标记上方。
<script>
$(function() {
$('#div1').show();
$('#div2').hide();
$('input[name="submit1"]').on('click', function(e) {
e.preventDefault();
$('#div1').hide();
$('#div2').show();
$.post('kanjiconverter.php', $('form').serialize(), function(response) {
//Your response from the server-side
})
});
});
</script>
i make div2 hide for first and div1 show. 我首先使div2隐藏，然后使div1显示。 but when i click submit div1 will hide and div2 will show. 但是，当我单击提交div1将隐藏，并且div2将显示。
and i place <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> between <head> and </head> tag. 我将<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>放在<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <head>和</head>标记之间。
the problem is, when i click submit the data i input not showing. 问题是，当我单击提交时，输入的数据没有显示。 only hide and show who was working. 只隐藏并显示谁在工作。 i think the data is not send. 我认为数据未发送。
4 个解决方案
解决方案1
0 2017-12-08 01:34:38
You have two opening form tags. 您有两个打开表单标签。 Bad HTML. 错误的HTML。 Please review. 请查阅。
解决方案2
0 2017-12-08 02:29:12
The button it's not submiting the form because of the e.preventDefault(); 由于e.preventDefault（）;按钮未提交表单； because if this method is called, the default action of the event will not be triggered, so the button will not do what it suppose to do that is to submit the form with the data inside. 因为如果调用此方法，将不会触发事件的默认操作，因此该按钮将不会执行其应该执行的操作，即提交包含内部数据的表单。 So to fix it you most add this after show and hide: 因此，要解决此问题，您最好在显示和隐藏之后添加以下内容：
$( "#convertkanji" ).submit(); $（“ #convertkanji”）.submit（）;
解决方案3
0 2017-12-12 05:06:08
You can't use <?php echo $newkanji ?> on your div2 because it's on a different file. 您不能在div2上使用<?php echo $newkanji ?> ，因为它在另一个文件中。 You should set the newkanji from your ajax response, and fix your html markup first, it's missing closing tag. 您应该从ajax响应中设置newkanji ，并首先修复html标记，因为它缺少结束标记。
解决方案4
0 2017-12-12 05:30:06
You have to change in many things. 您必须在许多方面进行更改。 Your kanjiconverter.php should like 您的kanjiconverter.php应该喜欢
<?php
if(isset($_POST['submit1'])){
$kanji = ($_POST['convertkanji']);
$replacements = [
'class="rt">' => "",
];
echo $newkanji = strtr($kanji, $replacements);
}
?>
Your HTML code should look like : 您的HTML代码应如下所示：
<form>
<div class="form-row">
<!-- START DIV1 HERE -->
<div id="div1" class="form-group col-md-6">
<label for="convertkanji">Kanji Convert</label>
<textarea id="convertkanji1" name="convertkanji" rows="10" form="convertkanji"></textarea>
<input type="submit" name="submit1" class="btn btn-default" form="convertkanji" value="Convert" style="width: 100%; margin-top: 6px;" />
</div>
<!-- Ended DIV1 HERE -->
<!-- START DIV2 HERE -->
<div id="div2" class="form-group col-md-6" style="display: none;">
<label for="kanji">New Kanji</label>
<textarea id="kanji" name="kanji" rows="12" form="tambahposting"></textarea>
</div>
<!-- Ended DIV2 HERE -->
</form>
Your jQuery like this : 你的jQuery是这样的：
<script>
$(function() {
$('#div1').show();
$('#div2').hide();
$('input[name="submit1"]').on('click', function(e) {
e.preventDefault();
$('#div1').hide();
$('#div2').show();
$.post('kanjiconverter.php', $('form').serialize(), function(response) {
$('#kanji').html(response);
})
});
});
</script>
Hope this will work for you. 希望这对您有用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.