2015-11-19 66 views
2

我有一個用於更新記錄的表單,在底部有一個提交按鈕。我希望它顯示一條消息,說「更新記錄:」以及是和否框。提交按鈕顯示是或否

我發現的每一種方法都只是爲了確認彈出窗口,但我不想要彈出窗口,我希望它是按鈕。所以目前我有下面這給了我一個確認彈出

<form class=\"searchForm\" action=\"cd_update.php\" method=\"post\" onsubmit=\"return confirm('Are you sure you want to submit?');\"> 

<button type="submit" id="editButton">Update</button> 

這是可能的嗎?我需要它來cd_update.php的「是」,並保持頁上的「否」

感謝

+1

有上千種方法可以做到這一點。所以是的,這是可能的。 – PeeHaa

回答

0

Working fiddle

您可以創建將包含兩個按鈕確認消息,新div你想沒有,之後添加js代碼,將顯示此確認divUpdate按鈕,用戶點擊後。

HTML:

<form class="searchForm" action="cd_update.php" method="post"> 
    <div id="confirmation-msg" style="display:none"> 
     Update Record? 
     <button type="submit" id="yesButton">Yes</button> 
     <button type="button" onClick="$('#confirmation-msg').hide()">No</button> 
    </div> 

    <button type="button" id="editButton">Update</button> 
</form> 

JS:

$('#editButton').click(function(){ 
    $('#confirmation-msg').show(); 
}); 

希望這有助於。

+0

提問的用戶正在尋找讓兩個按鈕進行確認而不是使用確認彈出窗口的方法。 – TheGrandPackard

0

我相信這個代碼就是你要找的。如果您願意,可以移除onsubmit處理程序,並將no按鈕上的onClick事件替換爲其他操作。這將允許這些按鈕無需確認彈出窗口即可處理您的表單。

 <form class="searchForm" method="post" onsubmit="alert('Record Updated');"> 

     Update? 
     <button type="submit" id="yesButton">Yes</button> 
     <button id="noButton" onClick="alert('Not Updated')">No</button> 
</form> 
0

您將不得不使用模式來定製它的樣子。這可能是因爲做自己(見下文)或使用jQuery的模式(這也是簡單地簡單,但可能是矯枉過正。

http://jsfiddle.net/m7w0fcmf/1/

樣式

#confirm { 
    display:none; 
} 

HTML

<form id="form" class="searchForm" action="cd_update.php" method="post"> 

    <div id="confirm"> 
     Update Record: 
     <button id="yes">Yes</button> 
     <button id="no">No</button> 
    </div> 

    <button type="submit" id="editButton">Update</button> 
</form> 

JavaScript

document.getElementById('editButton').addEventListener('click', showConfirm); 
document.getElementById('no').addEventListener('click', clickNo); 

function showConfirm(e) { 
    e.preventDefault(); 
    document.getElementById('confirm').style.display = 'block'; 
} 
function clickNo(e) { 
    e.preventDefault(); 
    document.getElementById('confirm').style.display = 'none'; 
}