양식을 동적으로 작성하여 제출
jQuery에서 양식을 만들어 제출하는 방법이 있습니까?
아래와 같은 것:
<html>
<head>
<title>Title Text Goes Here</title>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function(){alert('hi')});
$('<form/>').attr('action','form2.html').submit();
</script>
</head>
<body>
Content Area
</body>
</html>
이게 작동하는 건가요 아니면 다른 방법이 있는 건가요?
당신의 코드에 두 가지 문제가 있었습니다.첫 번째는 당신이 포함시킨 것입니다.$(document).ready();요소를 생성하는 jQuery 객체를 포장하지 않았습니다.
두 번째는 당신이 사용하고 있는 방법이었습니다.jQuery는 셀렉터(또는 셀렉터를 일반적으로 놓을 위치)가 작성하려는 요소로 대체될 때 모든 요소를 작성합니다.그러면 그냥 몸에 붙여서 제출하시면 됩니다.
$(document).ready(function(){
$('<form action="form2.html"></form>').appendTo('body').submit();
});
여기 작동 중인 코드가 있습니다.이 예제에서는 폼 요소를 추가한다는 것을 증명하기 위해 자동으로 제출하지 않습니다.
여기 자동 제출 코드가 있습니다.잘 풀립니다.Jsfiddle은 서버에 "form2.html"이 존재하지 않기 때문에 404 페이지로 안내합니다.
네, 가능합니다.해결책 중 하나는 아래와 같습니다(jsfiddle을 증명합니다).
HTML:
<a id="fire" href="#" title="submit form">Submit form</a>
(보기, 위에는 양식이 없습니다.)
자바스크립트:
jQuery('#fire').click(function(event){
event.preventDefault();
var newForm = jQuery('<form>', {
'action': 'http://www.google.com/search',
'target': '_top'
}).append(jQuery('<input>', {
'name': 'q',
'value': 'stack overflow',
'type': 'hidden'
}));
newForm.submit();
});
위의 예에서는 양식 작성 방법, 입력 추가 방법 및 제출 방법을 보여 줍니다.결과 표시가 금지되는 경우가 있습니다.X-Frame-Options, 그래서 준비했습니다.target로._top, 메인 윈도우의 내용을 대체합니다.또는 설정할 경우_blank, 새 창/탭에 표시할 수 있습니다.
jQuery가 없는 My 버전으로, 간단한 기능을 사용할 수 있습니다.
기능:
function post_to_url(path, params, method) {
method = method || "post";
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
for(var key in params) {
if(params.hasOwnProperty(key)) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
용도:
post_to_url('fullurlpath', {
field1:'value1',
field2:'value2'
}, 'post');
Purmou처럼 하지만 제출할 때 양식을 제거하면 됩니다.
$(function() {
$('<form action="form2.html"></form>').appendTo('body').submit().remove();
});
Josephra의 예는 내가 필요로 하는 것에 적합합니다.하지만 저는 선을 추가해야 했습니다.form.appendTo(document.body)그것이 작동하기 위해서요.
var form = $(document.createElement('form'));
$(form).attr("action", "reserves.php");
$(form).attr("method", "POST");
var input = $("<input>")
.attr("type", "hidden")
.attr("name", "mydata")
.val("bla" );
$(form).append($(input));
form.appendTo(document.body)
$(form).submit();
네, 방금 인용문을 잊어버리셨군요...
$('<form/>').attr('action','form2.html').submit();
이 코드를 사용해 보십시오. 완전히 동적인 솔루션입니다.
var form = $(document.createElement('form'));
$(form).attr("action", "reserves.php");
$(form).attr("method", "POST");
var input = $("<input>").attr("type", "hidden")
.attr("name", "mydata")
.val("bla");
$(form).append($(input));
$(form).submit();
왜 직접 안 해요?
GET요청:
$.get(url, data, callback);
POST요청:
$.post(url, data, callback);
그럼 양식은 필요 없고, 데이터 오브젝트에 있는 데이터만 보내주세요.
$.post("form2.html", {myField: "some value"}, function(){
alert("done!");
});
Jquery 사용하기
$('<form/>', { action: url, method: 'POST' }).append(
$('<input>', {type: 'hidden', id: 'id_field_1', name: 'name_field_1', value: val_field_1}),
$('<input>', {type: 'hidden', id: 'id_field_2', name: 'name_field_2', value: val_field_2}),
).appendTo('body').submit();
수행할 단계:
- 먼저 양식 요소를 작성해야 합니다.
- 양식을 사용하여 탐색할 URL을 전달해야 합니다.
- 지정합니다.
method폼을 입력합니다. - 폼 본문을 추가합니다.
- 드디어 전화를 합니다.
submit()양식상의 방법.
코드:
var Form = document.createElement("form");
Form.action = '/DashboardModule/DevicesInfo/RedirectToView?TerminalId='+marker.data;
Form.method = "post";
var formToSubmit = document.body.appendChild(Form);
formToSubmit.submit();
일부 매개변수로 양식을 만들고 POST 통화를 하고자 할 경우
var param1 = 10;
$('<form action="./your_target.html" method="POST">' +
'<input type="hidden" name="param" value="' + param + '" />' +
'</form>').appendTo('body').submit();
원하신다면 한 줄로 다 하실 수도 있습니다 :-)
이 기능은 제출 시 양식으로 사용하실 수 있습니다.
하지만 이건 자바스크립트로 되어 있어서 jquery로 변경하고 싶습니다.
온라인으로 검색해봤는데 DOM이 남아있지 않아서 제출 후 제거가 가능합니다.
const trimTypes = ['email', 'hidden', 'number', 'password', 'tel', 'text', null, ''];
function submitTrimmedDataForm(event) {
event.preventDefault();
let currentForm = event.target;
var form = document.createElement("form");
form.style.display = "none";
form.method = currentForm.getAttribute('method');
form.action = currentForm.getAttribute('action');
Array.from(currentForm.getElementsByTagName('input')).forEach(el => {
console.log("name :" + el.getAttribute('name') + ", value :" + el.value + ", type :" + el.getAttribute('type'));
var element = document.createElement("input");
let type = el.getAttribute('type');
if (trimTypes.includes(type)) {
element.value = trim(el.value);
}
element.name = el.getAttribute('name');
element.type = el.getAttribute('type');
form.appendChild(element);
});
Array.from(currentForm.getElementsByTagName('select')).forEach(el => {
console.log("select name :" + el.getAttribute('name') + ", value :" + el.value);
var element = document.createElement("input");
element.value = el.value;
element.name = el.getAttribute('name');
element.type = 'text';
form.appendChild(element);
});
document.body.appendChild(form);
form.submit();
document.body.removeChild(form); // this is important as well
}
언급URL : https://stackoverflow.com/questions/8003089/dynamically-create-and-submit-form