두 개의 제출 버튼과 두 개의 "대상"속성이있는 HTML 양식
하나의 HTML <form>이 있습니다.
양식에는 하나의 action=""속성 만 있습니다.
그러나 target=""양식을 제출하기 위해 클릭하는 버튼에 따라 두 가지 다른 속성 을 갖고 싶습니다 . 이것은 아마도 멋진 JavaScript 코드 일 것입니다.하지만 어디서부터 시작해야할지 모르겠습니다.
각각 동일한 양식을 제출하지만 각 단추는 양식에 다른 대상을 제공하는 두 개의 단추를 어떻게 만들 수 있습니까?
양식에는 하나의 제출 버튼에 연결된 기본 작업과 일반 버튼에 연결된 대체 작업이 있다는 사고 방식으로이 문제에 접근하는 것이 더 적절합니다. 여기서 차이점은 제출 아래에있는 항목은 사용자가 Enter 키를 눌러 양식을 제출할 때 사용되는 반면 다른 하나는 사용자가 명시 적으로 버튼을 클릭 할 때만 실행된다는 것입니다.
어쨌든 그것을 염두에두고 이것은 그것을해야합니다.
<form id='myform' action='jquery.php' method='GET'>
<input type='submit' id='btn1' value='Normal Submit'>
<input type='button' id='btn2' value='New Window'>
</form>
이 자바 스크립트로 :
var form = document.getElementById('myform');
form.onsubmit = function() {
form.target = '_self';
};
document.getElementById('btn2').onclick = function() {
form.target = '_blank';
form.submit();
}
코드를 제출 버튼의 클릭 이벤트에 바인딩하는 접근 방식은 IE에서 작동하지 않습니다.
나는 서버 측에서 이것을한다. 즉, 양식은 항상 동일한 대상에 제출되지만 어떤 버튼을 눌렀는지에 따라 적절한 위치로 리디렉션하는 서버 측 스크립트가 있습니다.
다음과 같이 여러 개의 버튼이있는 경우
<form action="mypage" method="get">
<input type="submit" name="retry" value="Retry" />
<input type="submit" name="abort" value="Abort" />
</form>
참고 : GET을 사용했지만 POST에서도 작동합니다.
그런 다음 어떤 버튼을 눌렀는지 쉽게 확인할 수 있습니다. 변수 retry가 있고 값이 있으면 재 시도를 눌렀고 변수 abort가 있고 값이 있으면 중단을 눌렀습니다. 그런 다음이 지식을 사용하여 적절한 위치로 리디렉션 할 수 있습니다.
이 메소드에는 자바 스크립트가 필요하지 않습니다.
참고 : 일부 브라우저는 버튼을 누르지 않고도 (Enter를 눌러) 양식을 제출할 수 있습니다. 비표준이므로 명확한
default조치를 취하고 버튼을 누르지 않을 때마다 활성화 하여이를 고려해야합니다 . 즉, 누군가가 제출 버튼을 클릭하는 대신 다른 양식 요소를 입력하면 중단되는 것이 아니라 입력 할 때 양식이 합리적인 작업을 수행하는지 확인하십시오 (유용한 오류 메시지를 표시하든 기본값을 가정하든).
HTML5를 사용하는 경우 속성 만 사용할 수 있습니다 formaction. 이를 통해 action각 버튼에 대해 다른 형식을 가질 수 있습니다 .
<!DOCTYPE html>
<html>
<body>
<form>
<input type="submit" formaction="firsttarget.php" value="Submit to first" />
<input type="submit" formaction="secondtarget.php" value="Submit to second" />
</form>
</body>
</html>
이것은 나를 위해 작동합니다.
<input type='submit' name='self' value='This window' onclick='this.form.target="_self";' />
<input type='submit' name='blank' value='New window' onclick='this.form.target="_blank";' />
이 예에서는
http://www.webdeveloper.com/forum/showthread.php?t=75170
버튼 OnClick 이벤트에서 타겟을 변경하는 방법을 볼 수 있습니다.
function subm(f,newtarget)
{
document.myform.target = newtarget ;
f.submit();
}
<FORM name="myform" method="post" action="" target="" >
<INPUT type="button" name="Submit" value="Submit" onclick="subm(this.form,'_self');">
<INPUT type="button" name="Submit" value="Submit" onclick="subm(this.form,'_blank');">
예:
<input
type="submit"
onclick="this.form.action='new_target.php?do=alternative_submit'"
value="Alternative Save"
/>
짜잔. 매우 "멋진", 3 단어 JavaScript!
간단하고 이해하기 쉬우 며 클릭 한 버튼의 이름을 보낸 다음 원하는 작업을 수행하도록 분기합니다. 이것은 두 개의 목표에 대한 필요성을 줄일 수 있습니다. 적은 페이지 ...!
<form action="twosubmits.php" medthod ="post">
<input type = "text" name="text1">
<input type="submit" name="scheduled" value="Schedule Emails">
<input type="submit" name="single" value="Email Now">
</form>
twosubmits.php
<?php
if (empty($_POST['scheduled'])) {
// do whatever or collect values needed
die("You pressed single");
}
if (empty($_POST['single'])) {
// do whatever or collect values needed
die("you pressed scheduled");
}
?>
다음은 대상 유형을 변경하는 양식을 표시하는 간단한 예제 스크립트입니다.
<script type="text/javascript">
function myTarget(form) {
for (i = 0; i < form.target_type.length; i++) {
if (form.target_type[i].checked)
val = form.target_type[i].value;
}
form.target = val;
return true;
}
</script>
<form action="" onSubmit="return myTarget(this);">
<input type="radio" name="target_type" value="_self" checked /> Self <br/>
<input type="radio" name="target_type" value="_blank" /> Blank <br/>
<input type="submit">
</form>
HTML :
<form method="get">
<input type="text" name="id" value="123"/>
<input type="submit" name="action" value="add"/>
<input type="submit" name="action" value="delete"/>
</form>
JS :
$('form').submit(function(ev){
ev.preventDefault();
console.log('clicked',ev.originalEvent,ev.originalEvent.explicitOriginalTarget)
})
http://jsfiddle.net/arzo/unhc3/
<form id='myForm'>
<input type="button" name="first_btn" id="first_btn">
<input type="button" name="second_btn" id="second_btn">
</form>
<script>
$('#first_btn').click(function(){
var form = document.getElementById("myForm")
form.action = "https://foo.com";
form.submit();
});
$('#second_btn').click(function(){
var form = document.getElementById("myForm")
form.action = "http://bar.com";
form.submit();
});
</script>
서버 측에서 할 수 있습니다.
<button type="submit" name="signin" value="email_signin" action="/signin">Sign In</button>
<button type="submit" name="signin" value="facebook_signin" action="/facebook_login">Facebook</button>
내 노드 서버 측 스크립트에서
app.post('/', function(req, res) {
if(req.body.signin == "email_signin"){
function(email_login) {...}
}
if(req.body.signin == "fb_signin"){
function(fb_login) {...}
}
});
각 버튼에는 다음이있을 수 있습니다.
<input type="button" name="newWin" onclick="frmSubmitSameWin();">
<input type="button" name="SameWin" onclick="frmSubmitNewWin();">
그런 다음 몇 가지 작은 js 함수가 있습니다.
<script type="text/javascript">
function frmSubmitSameWin() {
form.target = '';
form.submit();
}
function frmSubmitNewWin() {
form.target = '_blank';
form.submit();
}
</script>
그게 트릭을해야합니다.
두 버튼 모두 현재 페이지에 제출 한 다음 맨 위에 다음 코드를 추가합니다.
<?php
if(isset($_GET['firstButtonName'])
header("Location: first-target.php?var1={$_GET['var1']}&var2={$_GET['var2']}");
if(isset($_GET['secondButtonName'])
header("Location: second-target.php?var1={$_GET['var1']}&var2={$_GET['var2']}");
?>
변수를 보지 않으려면 $ _SESSION을 사용하여 수행 할 수도 있습니다.
Alternate Solution. Don't get messed up with onclick,buttons,server side and all.Just create a new form with different action like this.
<form method=post name=main onsubmit="return validate()" action="scale_test.html">
<input type=checkbox value="AC Hi-Side Pressure">AC Hi-Side Pressure<br>
<input type=checkbox value="Engine_Speed">Engine Speed<br>
<input type=submit value="Linear Scale" />
</form>
<form method=post name=main1 onsubmit="return v()" action=scale_log.html>
<input type=submit name=log id=log value="Log Scale">
</form>
Now in Javascript you can get all the elements of main form in v() with the help of getElementsByTagName(). To know whether the checkbox is checked or not
function v(){
var check = document.getElementsByTagName("input");
for (var i=0; i < check.length; i++) {
if (check[i].type == 'checkbox') {
if (check[i].checked == true) {
x[i]=check[i].value
}
}
}
console.log(x);
}
This might help someone:
Use the formtarget attribute
<html>
<body>
<form>
<!--submit on a new window-->
<input type="submit" formatarget="_blank" value="Submit to first" />
<!--submit on the same window-->
<input type="submit" formaction="_self" value="Submit to second" />
</form>
</body>
</html>
'Programing' 카테고리의 다른 글
| Android 개발자 웹 사이트의 언어는 어떻게 설정하나요? (0) | 2020.10.23 |
|---|---|
| jQuery Draggable 및 오버플로 문제 (0) | 2020.10.23 |
| Java가 크기 0의 배열을 허용하는 이유는 무엇입니까? (0) | 2020.10.23 |
| 캐시 설정 방법 : jQuery.get 호출에서 false (0) | 2020.10.23 |
| VS Code 메뉴 모음 복원 방법 (0) | 2020.10.23 |