구인 웹 사이트가 있는데 광고가 게재되는 페이지에서 "친구에게 팁 보내기"양식을 만들고 있습니다.
따라서 원하는 사람은 친구에게 이메일 주소로 광고 팁을 보낼 수 있습니다.
양식이 PHP 페이지에 제출되어야한다고 생각합니다. 맞습니까?
<form name='tip' method='post' action='tip.php'>
Tip somebody: <input name="tip_email" type="text" size="30" onfocus="tip_div(1);" onblur="tip_div(2);"/>
<input type="submit" value="Skicka Tips"/>
<input type="hidden" name="ad_id" />
</form>
양식을 제출할 때 페이지가 새로 고침됩니다 ... 원하지 않습니다 ...
다시로드하지 않고 메일을 보낼 수있는 방법이 있습니까? 바람직하게는 ajax 또는 jquery없이 ...
감사
<iframe>그리고 target속성이 그것을 할 것입니다.
답변:
페이지를 다시로드하지 않고 이메일을 보내려면 ajax 요청을 제출해야합니다. http://api.jquery.com/jQuery.ajax/를 살펴보십시오.
코드는 다음과 같은 내용이어야합니다.
$('#submit').click(function() {
$.ajax({
url: 'send_email.php',
type: 'POST',
data: {
email: 'email@example.com',
message: 'hello world!'
},
success: function(msg) {
alert('Email Sent');
}
});
});
양식은 send_email.php요청을 처리하고 이메일을 보내야하는 페이지에 백그라운드로 제출됩니다 .
return false;지면 마지막 닫는 대괄호 앞에 추가하십시오
더 쉬운 방법이라고 생각하는 것을 찾았습니다. 페이지에 Iframe을 삽입하면 액션의 이탈을 리디렉션하여 표시 할 수 있습니다. 물론 아무것도 할 수 없습니다. 이 경우 iframe 표시를 없음으로 설정할 수 있습니다.
<iframe name="votar" style="display:none;"></iframe>
<form action="tip.php" method="post" target="votar">
<input type="submit" value="Skicka Tips">
<input type="hidden" name="ad_id" value="2">
</form>
action="about:blank"
$_POST["ad_id"]
AJAX를 사용하거나
<form id="myGiswebForm" method="post" action="https://******/saveForm.asp" target="myiframe">및<iframe style="display:none;" src="" name="myiframe"></iframe>
가장 빠르고 쉬운 방법은 iframe을 사용하는 것입니다. 페이지 하단에 프레임을 넣으십시오.
<iframe name="frame"></iframe>
그리고 당신의 형태로 이것을하십시오.
<form target="frame">
</form>
CSS에서 프레임을 보이지 않게 만듭니다.
iframe{
display: none;
}
display:none;하지 border:0px. 편집을 시도했지만 편집 주석을 보는 데 신경 쓰지 않는 검토 자에 의해 편집이 거부되었습니다. 코드를 수정하려면 답변을 수정하세요.
양식이 제출되면 작업이 실행되고 다시로드 할 특정 iframe을 대상으로합니다.
<iframe name="content" style="">
</iframe>
<form action="iframe_content.php" method="post" target="content">
<input type="text" name="Name" value="">
<input type="submit" name="Submit" value="Submit">
</form>
<?php
if (isset($_POST['Submit'])){
$Name = $_POST['Name'];
echo $Name;
}
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js">
</script>
<script type="text/javascript">
function clickButton(){
var name=document.getElementById('name').value;
var descr=document.getElementById('descr').value;
$.ajax({
type:"post",
url:"server_action.php",
data:
{
'name' :name,
'descr' :descr
},
cache:false,
success: function (html)
{
alert('Data Send');
$('#msg').html(html);
}
});
return false;
}
</script>
<form >
<input type="" name="name" id="name">
<input type="" name="descr" id="descr">
<input type="submit" name="" value="submit" onclick="return clickButton();">
</form>
<p id="msg"></p>
<?php
$name = $_POST['name'];
$descr = $_POST['descr'];
echo $name;
echo $descr;
?>
jquery-ajax이 경우 도움을 받아야합니다 . 이 없으면 ajax현재 해결책이 없습니다.
먼저 양식이 제출 될 때 JavaScript 함수를 호출하십시오. 그냥 설정하십시오 onsubmit="func()". 함수가 호출 되더라도 제출의 기본 작업이 수행됩니다. 수행되는 경우 페이지 새로 고침 또는 리디렉션을 중지 할 방법이 없습니다. 따라서 다음 작업은 기본 동작을 방지하는 것입니다. 시작 부분에 다음 줄을 삽입합니다 func().
event.preventDefault()
이제 리디렉션 또는 새로 고침이 없습니다. 그래서, 당신은 단순히 ajax 전화를 func()걸고 전화가 끝났을 때 원하는 것을 할 수 있습니다.
예:
형태:
<form id="form-id" onsubmit="func()">
<input id="input-id" type="text">
</form>
자바 스크립트 :
function func(){
event.preventDefault();
var newValue = $('#input-field-id').val();
$.ajax({
type: 'POST',
url: '...',
data: {...},
datatype: 'JSON',
success: function(data){...},
error: function(){...},
});
}
이것이 바로 jQuery 및 AJAX없이 작동 할 수있는 방법이며 간단한 iFrame을 사용하여 매우 잘 작동합니다. I LOVE IT는 Opera10, FF3 및 IE6에서 작동합니다. 저에게 올바른 방향을 알려주는 위의 포스터 덕분에 제가 여기에 게시하는 유일한 이유입니다.
<select name="aAddToPage[65654]"
onchange="
if (bCanAddMore) {
addToPage(65654,this);
}
else {
alert('Could not add another, wait until previous is added.');
this.options[0].selected = true;
};
" />
<option value="">Add to page..</option>
[more options with values here]</select>
<script type="text/javascript">
function addToPage(iProduct, oSelect){
iPage = oSelect.options[oSelect.selectedIndex].value;
if (iPage != "") {
bCanAddMore = false;
window.hiddenFrame.document.formFrame.iProduct.value = iProduct;
window.hiddenFrame.document.formFrame.iAddToPage.value = iPage;
window.hiddenFrame.document.formFrame.submit();
}
}
var bCanAddMore = true;</script>
<iframe name="hiddenFrame" style="display:none;" src="frame.php?p=addProductToPage" onload="bCanAddMore = true;"></iframe>
위에서 호출되는 페이지를 생성하는 PHP 코드 :
if( $_GET['p'] == 'addProductToPage' ){ // hidden form processing
if(!empty($_POST['iAddToPage'])) {
//.. do something with it..
}
print('
<html>
<body>
<form name="formFrame" id="formFrameId" style="display:none;" method="POST" action="frame.php?p=addProductToPage" >
<input type="hidden" name="iProduct" value="" />
<input type="hidden" name="iAddToPage" value="" />
</form>
</body>
</html>
');
}
print를 사용 하여 HTML 코드를 인쇄 하지 마십시오 . php 태그를 닫고 ?>뒤에 html 코드를 추가하십시오. 그리고 exit그것을 사용하지 마십시오 그것은 필요하지 않습니다 (치명적인 오류, ...)
이것은 당신의 문제를 해결할 것입니다.
제출 버튼을 클릭 한 후이 코드에서 jquery ajax를 호출하고
POST / GET
데이터 유형 을 게시하는 URL을 전달 합니다. 데이터 정보는 입력 필드 또는 기타 항목을 선택할 수 있습니다.
sucess : 서버
함수 매개 변수 텍스트, html 또는 json 에서 모든 것이 정상이면 콜백 , 서버의 응답
이 성공하면받은 데이터가 어떤 종류의 상태에 있으면 경고를 쓸 수 있습니다. 또는 다음에 수행 할 작업을 코드를 실행하십시오.
<form id='tip'>
Tip somebody: <input name="tip_email" id="tip_email" type="text" size="30" onfocus="tip_div(1);" onblur="tip_div(2);"/>
<input type="submit" id="submit" value="Skicka Tips"/>
<input type="hidden" id="ad_id" name="ad_id" />
</form>
<script>
$( "#tip" ).submit(function( e ) {
e.preventDefault();
$.ajax({
url: tip.php,
type:'POST',
data:
{
tip_email: $('#tip_email').val(),
ad_id: $('#ad_id').val()
},
success: function(msg)
{
alert('Email Sent');
}
});
});
</script>
양식이있는 동일한 페이지에 제출하는 경우 작업없이 양식 태그를 작성할 수 있으며 다음과 같이 제출합니다.
<form method='post'> <!-- you can see there is no action here-->
위의 jquery와 비슷한 작업을 수행했지만 양식 데이터 및 그래픽 첨부 캔버스를 재설정해야했습니다. 그래서 여기에 내가 생각 해낸 것이 있습니다.
<script>
$(document).ready(function(){
$("#text_only_radio_button_id").click(function(){
$("#single_pic_div").hide();
$("#multi_pic_div").hide();
});
$("#pic_radio_button_id").click(function(){
$("#single_pic_div").show();
$("#multi_pic_div").hide();
});
$("#gallery_radio_button_id").click(function(){
$("#single_pic_div").hide();
$("#multi_pic_div").show();
});
$("#my_Submit_button_ID").click(function() {
$("#single_pic_div").hide();
$("#multi_pic_div").hide();
var url = "script_the_form_gets_posted_to.php";
$.ajax({
type: "POST",
url: url,
data: $("#html_form_id").serialize(),
success: function(){
document.getElementById("html_form_id").reset();
var canvas=document.getElementById("canvas");
var canvasA=document.getElementById("canvasA");
var canvasB=document.getElementById("canvasB");
var canvasC=document.getElementById("canvasC");
var canvasD=document.getElementById("canvasD");
var ctx=canvas.getContext("2d");
var ctxA=canvasA.getContext("2d");
var ctxB=canvasB.getContext("2d");
var ctxC=canvasC.getContext("2d");
var ctxD=canvasD.getContext("2d");
ctx.clearRect(0, 0,480,480);
ctxA.clearRect(0, 0,480,480);
ctxB.clearRect(0, 0,480,480);
ctxC.clearRect(0, 0,480,480);
ctxD.clearRect(0, 0,480,480);
} });
return false;
}); });
</script>
그것은 저에게 잘 작동합니다. html 양식의 응용 프로그램의 경우 다음과 같이 jquery 코드를 단순화 할 수 있습니다.
<script>
$(document).ready(function(){
$("#my_Submit_button_ID").click(function() {
var url = "script_the_form_gets_posted_to.php";
$.ajax({
type: "POST",
url: url,
data: $("#html_form_id").serialize(),
success: function(){
document.getElementById("html_form_id").reset();
} });
return false;
}); });
</script>
추가 가능성은 함수에 직접 자바 스크립트 링크를 만드는 것입니다.
<form action="javascript:your_function();" method="post">
...
자바 스크립트를 사용하지 않으려면 페이지가 다시로드됩니다.
<iframe name="ew" />와 같은 못생긴 일을하세요<form target="ew" />
function Foo(){
event.preventDefault();
$.ajax( {
url:"<?php echo base_url();?>Controllername/ctlr_function",
type:"POST",
data:'email='+$("#email").val(),
success:function(msg) {
alert('You are subscribed');
}
} );
}
나는 좋은 해결책을 위해 여러 번 시도했고 @taufique의 답변은이 답변에 도달하는 데 도움이되었습니다.
주의 : event.preventDefault(); 함수 본문의 시작 부분에 입력하는 것을 잊지 마십시오 .
다음은 PHP 페이지에 게시하고 html을 다시 가져 오는 jQuery입니다.
$('form').submit(function() {
$.post('tip.php', function(html) {
// do what you need in your success callback
}
return false;
});