When I use form action URL with 'www' prefix, by pressing the submit button (or enter key) the form does not work: submits but won't send any variables. It does work, however, with JS submit by clicking the magnifier, even though JS code does not affect the URL (at least as far as I know).
When I remove 'www' it works both ways. Any idea what the reason is behind this?
http://www.hasznaltfaiparigep.hu/fr/index2.php
I made a gray div above the form to display POST variables.
Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Bonjour! :)</title>
<meta http-equiv="content-language" content="hu" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="tabs.css">
<link rel="shortcut icon" href="images/favicon.ico?v=1.2">
<script>
function addElementAndSubmitForm(formName,actionUrl,elName,elValue) {
var form = document.forms[formName];
form.action = actionUrl;
var el = document.createElement("input");
el.type = "hidden";
el.name = elName;
el.value = elValue;
form.appendChild(el);
form.submit();
}
</script>
</head>
<body>
<div id="page-wrap">
<form name="myForm" method="POST" action="http://www.hasznaltfaiparigep.hu/fr/index2.php">
<div id="debug" style="border:solid 1px black;padding:10px;margin:10px;background:#ccc;color:#555;width:96%">
<font style="font-weight:bold">POST vars:</font>
<?php
if( count($_POST) > 0 ) {
echo "<br/><span style=\"padding-left:4px\"> ";
print_r($_POST); echo "</span>";
}
?>
</div>
<div style="float:left;">
Chercher un mot: <input type="text" id="cherfield" name="chercher" />
<img style="padding: 0 5px; margin: 0 0 -8px 0;" src="images/chercher.jpg" onClick="javascript:addElementAndSubmitForm('myForm','#','chercher',document.getElementById('cherfield').value);"/>
<br />
<input type="submit" value="envoi" />
</div>
<input type="hidden" name="hidden_input" value="whatever">
</form>
</div>
</body>
</html>
Related
Whenever I click on the enter button, it seems the page either shows me
Bad Request
Did not attempt to load JSON data because the request Content-Type was not 'application/json'.
or rarely if enter is pressed it creates duplicates each chat by itself and adds it to the div
I have removed the key event of enter but for some odd reason the enter function still works, I presume this is due to bootstrap but im not too certain.
<!DOCTYPE html>
<html lang="en" style="height: 500px">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Lexend" rel="stylesheet" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/stylesheet.css') }}">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://www.unpkg.com/spltjs#1.1.0"></script>
<script src="https://releases.jquery.com/git/jquery-git.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/5.0.2/typeit.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
<button type="button" class="btn btn-light" style="height:34px">click me</button>
<p style="color:white; font-family: Lexend;font-size: 15px;font-weight: 400;text-align: center;">AI for a healthier you</p>
<button type="button" class="btn btn-light" style="height:34px">click me</button>
</nav>
<br>
<center>
<div class="container" style="background-color:white ; border-radius: 20px;height:80%;-webkit-box-shadow: 10px 10px 79px -7px rgba(0,0,0,0.22);-moz-box-shadow: 10px 10px 79px -7px rgba(0,0,0,0.22);box-shadow: 10px 10px 79px -7px rgba(0,0,0,0.22);">
<p style="color:black" id="hello"></p>
<form method="post">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Type here...." aria-label="Recipient's username" aria-describedby="basic-addon2" name="userid" id="textinput">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" value="hello world" id="button">Submit</button>
</form>
</div>
</div>
</div>
</center>
<script>
document.getElementById("button").addEventListener("click", insertText);
// CREATES A DIV AND SENDS THE USERS TEXT
function insertText() {
let div = document.createElement("div");
let usertext = document.getElementById('textinput').value;
const usertext2 = 'Patient: ' + usertext;
let text = document.createTextNode(usertext2);
div.appendChild(text);
document.getElementById("hello").appendChild(div);
/////////////// submit JSON TO APP
var json_entry = usertext
fetch('/dashboard', {
method: 'POST',
body: JSON.stringify({
user_text: json_entry
}),
headers: {
'Content-Type': 'application/json'
}
});
let apiData;
fetch('/dashboard/api').then((response) => response.json()).then((data) => {
apiData = data;
let div = document.createElement('div');
let robot_reply = document.createTextNode(apiData);
div.appendChild(robot_reply);
document.getElementById("hello").appendChild(div);
});
////// ENTER BUTTON ////
///////////////////////
/////////////////////// allows the ability to hit the enter button
var input = document.getElementById("textinput");
}
</script>
</div>
</div>
</body>
</html>
When you hit enter, it triggers the submit event on the <form>, which will cause a page refresh. This is basically baked in browser functionality. Any enter keypress in a field inside a <form> tag, causes a form submission. If that form submission is not handled, it will attempt to POST the form to the current URL.
You need to attach everything to the submit event on the <form>, not the button click. And you also need to call e.preventDefault to prevent the browsers default form action handling.
Additionally, you need type="submit" on the button so the click on that button also submits the form.
Using form submit event is also better for accessibility. It means users can press enter in a field or click the button, and it will be handled.
<!DOCTYPE html>
<html lang="en" style="height: 500px">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Lexend" rel="stylesheet" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/stylesheet.css') }}">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://www.unpkg.com/spltjs#1.1.0"></script>
<script src="https://releases.jquery.com/git/jquery-git.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/5.0.2/typeit.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
<button type="button" class="btn btn-light" style="height:34px">click me</button>
<p style="color:white; font-family: Lexend;font-size: 15px;font-weight: 400;text-align: center;">AI for a healthier you</p>
<button type="button" class="btn btn-light" style="height:34px">click me</button>
</nav>
<br>
<center>
<div class="container" style="background-color:white ; border-radius: 20px;height:80%;-webkit-box-shadow: 10px 10px 79px -7px rgba(0,0,0,0.22);-moz-box-shadow: 10px 10px 79px -7px rgba(0,0,0,0.22);box-shadow: 10px 10px 79px -7px rgba(0,0,0,0.22);">
<p style="color:black" id="hello"></p>
<form method="post" id="form">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Type here...." aria-label="Recipient's username" aria-describedby="basic-addon2" name="userid" id="textinput">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit" value="hello world" id="button">Submit</button>
</form>
</div>
</div>
</div>
</center>
<script>
document.getElementById("form").addEventListener("submit", insertText);
// CREATES A DIV AND SENDS THE USERS TEXT
function insertText(e) {
e.preventDefault();
let div = document.createElement("div");
let usertext = document.getElementById('textinput').value;
const usertext2 = 'Patient: ' + usertext;
let text = document.createTextNode(usertext2);
div.appendChild(text);
document.getElementById("hello").appendChild(div);
/////////////// submit JSON TO APP
var json_entry = usertext
fetch('/dashboard', {
method: 'POST',
body: JSON.stringify({
user_text: json_entry
}),
headers: {
'Content-Type': 'application/json'
}
});
let apiData;
fetch('/dashboard/api').then((response) => response.json()).then((data) => {
apiData = data;
let div = document.createElement('div');
let robot_reply = document.createTextNode(apiData);
div.appendChild(robot_reply);
document.getElementById("hello").appendChild(div);
});
////// ENTER BUTTON ////
///////////////////////
/////////////////////// allows the ability to hit the enter button
var input = document.getElementById("textinput");
}
</script>
</div>
</div>
</body>
</html>
I am trying to make a search using an input submit type field. Once user enters something, it should look through the value in the divs. If it matches one of them then it should highlight that div background in yellow, if it doesnt we add the new value in the bottom of the div list.
I was able to highlight the background when it matches, but the highlight only stays for a second and disappears.Also, it doesn't match the second element of the list "Machine Learning". For the second part for adding in the bottom of the list, I tried push the new value in the list but that didn't work either.
Any suggestions ?
HTML and JS:
`
function searchList() {
var searchCourse = document.getElementById("search").value;
var courseList = document.getElementById("courselist").getElementsByTagName("DIV");
for(var i=0; i<courseList.length; i++) {
var course = courseList[i];
var coursecheck = course.innerHTML;
if(searchCourse == coursecheck){
course.style.backgroundColor = 'yellow';
}
}
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> SOEN 287 NEW Exercise </title>
<style type="text/css">
fieldset {border:0px;}
#courselist {width:300px;}
#courselist div {border: 1px black solid;padding:10px;}
</style>
</head>
<body>
<div id="container">
<h2>Search a Course</h2>
<form action="" method="post" onsubmit="return searchList()">
<fieldset>
Enter the Course Name<br />
<input type="text" id="search" size="20" /><br />
<input type="submit" value="Search List" id="sub" />
<br /><br />
</fieldset>
</form>
<div id="courselist">
<div id="first"> </div>
<div> Machine Learning </div>
<div> Image Processing</div>
<div>Design and Analysis of Algorithms</div>
<div>Web Programming II </div>
<div>Advanced JAVA</div>
<div>Pattern Recognition</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Please try this:
function searchList() {
var searchCourse = document.getElementById("search").value,
courseList = document.getElementById("courselist").getElementsByTagName("div"),
found = false;
for (var i = 0; i < courseList.length; i++) {
var course = courseList[i];
//Get the the div content (course) and trim it
var coursecheck = course.innerHTML.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "");
if (searchCourse === coursecheck) {
course.style.backgroundColor = 'yellow';
//Match found so we don't need to add new element
found = true;
} else {
//Reset the background color
course.style.backgroundColor = 'transparent';
}
}
//New element add it to the list
if(!found) {
var newDiv = document.createElement("DIV");
newDiv.innerHTML = searchCourse;
document.getElementById("courselist").appendChild(newDiv);
}
return false;
}
Demo: https://jsfiddle.net/iRbouh/jpor2eb3/
I hope this will help.
Please check this code.
JavaScript
function searchList() {
var searchCourse = document.getElementById("search").value;
var courseList = document.getElementById("courselist").getElementsByTagName("DIV");
for (var i = 0; i < courseList.length; i++) {
var course = courseList[i];
var coursecheck = course.innerHTML;
console.log(coursecheck)
if (searchCourse == coursecheck) {
course.style.backgroundColor = 'yellow';
}
}
return false;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> SOEN 287 NEW Exercise </title>
<style type="text/css">
fieldset {border:0px;}
#courselist {width:300px;}
#courselist div {border: 1px black solid;padding:10px;}
</style>
</head>
<body>
<div id="container">
<h2>Search a Course</h2>
<form action="" method="post" onsubmit="return searchList()">
<fieldset>
Enter the Course Name<br />
<input type="text" id="search" size="20" /><br />
<input type="submit" value="Search List" id="sub" />
<br /><br />
</fieldset>
</form>
<div id="courselist">
<div id="first"> </div>
<div>Machine Learning </div>
<div>Image Processing</div>
<div>Design and Analysis of Algorithms</div>
<div>Web Programming II </div>
<div>Advanced JAVA</div>
<div>Pattern Recognition</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Can you add a data-value attribute on the divs? if so you can do something like this:
function searchList() {
var searchCourse = document.getElementById("search").value,
highlight = document.querySelectorAll("[data-value='" + searchCourse + "']")[0] // <~~ only want the first
highlight.style.backgroundColor = 'yellow';
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> SOEN 287 NEW Exercise </title>
<style type="text/css">
fieldset {border:0px;}
#courselist {width:300px;}
#courselist div {border: 1px black solid;padding:10px;}
</style>
</head>
<body>
<div id="container">
<h2>Search a Course</h2>
<form action="" method="post" onsubmit="return searchList()">
<fieldset>
Enter the Course Name<br />
<input type="text" id="search" size="20" /><br />
<input type="submit" value="Search List" id="sub" />
<br /><br />
</fieldset>
</form>
<div id="courselist">
<div id="first"> </div>
<div data-value='Machine Learning'>Machine Learning </div>
<div data-value='Image Processing'>Image Processing</div>
<div data-value='Design and Analysis of Algorithms'>Design and Analysis of Algorithms</div>
<div>Web Programming II </div>
<div>Advanced JAVA</div>
<div>Pattern Recognition</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
If you make the button a link with an href='#something' then it won't page reload, or add an event listener to the button and do event.preventDefault()
I am workng on a project in which I have to put back button functionality. Unfortunatly I can't seem to work it out. I have created a back button and it works. But if the user wants to edit the previous form and then submit data again, so it edits the query. I have tried it in my project but it adds another record in the database and doesn't update the previous one. I know I am not using any update query here. Now I am stuck how would it works I can't think of a good logic. I have made a simple form for example. It is written below.
<?php
$con = mysqli_connect('localhost','root','','test1');
if (isset($_POST['sub'])) {
$first_name = $_POST['fname'];
$second_name = $_POST['lname'];
$sql = "INSERT INTO `tbl`(`first_name`, `last_name`) VALUES
('$first_name', '$second_name')";
$run = mysqli_query($con, $sql);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form method="POST" action="nextpage.php">
First_name: <input type="text" name="fname">
Second_name: <input type="text" name="lname">
<input type="submit" name="sub" value="submit">
</form>
</body>
</html>
nextpage.php
<?php
$con = mysqli_connect('localhost','root','','test1');
?>
<html>
<body>
<h1>Next Page</h1>
<p>The query is submitted press ok to forward and back if you want to go back</p>
<button>OK</button>
<button onclick="history.go(-1);">Back</button>
</body>
</html>
Thanks for your expert advice in advance.
If I understand correctly.. ..you have a lot of work to do to be able to to 'UPDATE' a record that you have just created.
Dont bother trying to go 'back' to the original form, go forwards to a new 'edit' form, passing the ID from the record that you have just created.
Use the ID to SELECT that record from the DB and pre-populate the 'edit' form. Add a hidden ID field to the form. Then on submission of the 'edit' form, UPDATE the existing record, using the ID.
I think you are taking the "back" button too literally. you are emulating the browser's back button. Instead, update your link text to "edit the submitted record", and either modify the submit page with the capability of editing it, (eg. a hidden input field with the index value of the last created item), or redirect to a page dedicated to editing the submitted record. the user will see it as going back, but the functionality will be different.
submitform:
<?php
$edit = false;
if(isset($_GET['editid']){
$edit = true;
//get the record, and display it in the fields below
}
$con = mysqli_connect('localhost','root','','test1');
if (isset($_POST['sub'])) {
$first_name = $_POST['fname'];
$second_name = $_POST['lname'];
$sql = "INSERT INTO `tbl`(`first_name`, `last_name`) VALUES
('$first_name', '$second_name')";
$run = mysqli_query($con, $sql);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form method="POST" action="nextpage.php">
First_name: <input type="text" name="fname" <?=($edit)?"value=\"".$req["fname"]."\":""?>>
Second_name: <input type="text" name="lname">
<input type="submit" name="sub" value="submit">
</form>
</body>
</html>
nextpage.php
<?php
$con = mysqli_connect('localhost','root','','test1');
?>
<html>
<body>
<h1>Next Page</h1>
<p>The query is submitted press ok to forward and back if you want to go back</p>
<button>OK</button>
<button onclick="submitform.php?editid=<?=mysqli_last_return_id()?>">Back</button>
</body>
</html>
Here's the answer to my own question..Hope it would help someone..
test.php
<?php
session_start();
$con=mysqli_connect('localhost','root','','test1');
if(isset($_POST['sub'])){
$first_name=$_POST['fname'];
$second_name=$_POST['lname'];
$sess_username=$_SESSION['user_name'];
$sql="INSERT INTO `tbl`(`first_name`, `last_name`,`sess_username`)
VALUES ('$first_name','$second_name','$sess_username')";
$run=mysqli_query($con, $sql);
header("location:nextpage.php");
}
if(isset($_POST['upd'])){
$first_name=$_POST['fname'];
$second_name=$_POST['lname'];
$id=#$_GET['id'];
$upd="UPDATE `tbl` SET
`first_name`='$first_name',`last_name`='$second_name' WHERE `id`='$id'";
$query=mysqli_query($con, $upd);
header("location:nextpage.php");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
if(window.location.href.indexOf("id") > -1) {
$('.submit').hide();
$('.update').show();
}
});
</script>
<title>Untitled Document</title>
</head>
<body>
<form method="POST" action="">
First_name:<input type="text" name="fname">
Second_name:<input type="text" name="lname">
<input class="update" type="submit" value="Update" name="upd"
style="display:none;">
<input class="submit" type="submit" name="sub" value="submit">
</form>
</body>
</html>
nextpage.php
<?php
session_start();
$con=mysqli_connect('localhost','root','','test1');
$sql="SELECT * FROM `tbl` WHERE
`sess_username`='".$_SESSION['user_name']."'";
$run=mysqli_query($con, $sql);
while($res=mysqli_fetch_assoc($run)){
$id=$res['id'];
$firstname=$res['first_name'];
$lastname=$res['last_name'];
$sess=$res['sess_username'];
}
?>
<html>
<body>
<h1>Next Page</h1>
<p>The query is submitted press ok to forward and back if you want to go
back</p>
<button >OK</button>
<form method="POST" action="test.php">
<?php echo "<a href='test.php?id=$id;'>Back</a>"; ?>
</form>
</body>
</html>
I am trying to find the size of file but it is display nothing please help me
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
div {
padding: 1px;
border-bottom: ridge;
width: 600px
}
this function is use to check whether or not user enter a image.
</style>
<script language="javascript">
function checkImage() {
if (document.form2.path.value == "") {
alert("Enter path of Image");
return false;
}
return true;
};
this function is not working properly
here i am try to check the size of file but it is not
working
function checkSize(){
var images=document.form2.path.value;
if (images != "") {
var f =document.getElementById("loadImage").files[0];
alert(f.size);
return false;
}
}
</script>
</head>
<body>
<center>
<div>
<h2>Image Management Utility</h2>
</div>
</center>
<br>
<br>
<br>
<form name="form2" action="images" method="post" onsubmit="return checkImage()">
<table width="800" align="center">
<tr>
<td>Please select an image file (maximum size 1MB)</td>
</tr>
<tr>
<td><input type="file" name="path" id="loadImage" /></td>
<td align="right"><input type="submit" name="submit"
value="submit" onclick="return checkSize()" /></td>
</tr>
</table>
</form>
</body>
</html>
i got got confused when i run the static js and html below
i want to dynamicly add option by clicking button, but when i put it under the form , it will do acition post, unless i put it out of form ,it works. what's the reason? i didn't set type as "submit" for the add button, does any button clicked in form will cause form action?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>作业管理</title>
</head>
<body>
<form enctype="multipart/form-data" method="POST" >
<div id="postform">
本次作业标题
<input type="text" name="title" />
<br>
<div class="postoption">
添加项目
<input type="text" name="option[]" />
音频文件
<input type="file" name="radio[]" />
答案
<input type="text" name="answer[]" />
</div>
</div>
<button id="add">添加输入项</button>
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
window.onload = function(){
var add = document.getElementById("add");
add.onclick = function(){
addOption();
}
}
function addOption(){
var postForm = document.getElementById("postform");
var postoptions = document.getElementsByClassName("postoption");
var op = postoptions[0];
var optionClone = op.cloneNode(true);
postForm.appendChild(optionClone);
};
</script>
</body>
</html>
The <button> element is a submit button by default. You can change this with the type="button" attribute, which makes it do nothing by default, or calling preventDefault on the event. But I'd go with the attribute since then your intention is semantically clear without actually running the script.