各位大大好:
想請問我將
1.收據抬頭,若填其他會跑出一個輸出框填寫資料
2.參訪,若參加參訪1或參訪2,會跑出兩個輸入框填寫身分證跟出生年月日
3.送出確認後,若填其他填寫完框,但身分證或出生年月日未填還是可以照樣送出,但是我有寫判別式,"若有參訪卻沒填身分證資料",應該不能送出,但不知道為什麼還是可以照樣送出,想請問是甚麼問題呢?
謝謝
html
<div class="form-group col-md-6 " >
<label for="recipient-name" class="col-form-label" >職稱:</label>
<input type="text" class="form-control" id="career" name="career" autocomplete="off" placeholder="職稱" />
</div>
<label for="recipient-name" class="col-form-label" >收據抬頭:</label>
<div class="form-check form-check-inline rec">
<input class="form-check-input" type="radio" name="rec" id="rec" value="company" checked/>
<label class="form-check-label" for="inlineRadio1">同服務單位</label>
</div>
<div class="form-check form-check-inline rec">
<input class="form-check-input" type="radio" name="rec" id="rec" value="other"/>
<label class="form-check-label" for="inlineRadio2">其他</label>
<input type="text" class="form-control" id="recother" name="recother" autocomplete="off" placeholder="請填寫收據抬頭" />
</div>
<div class="form-group col-md-12 "><h>9月6日(星期五)會後參訪(免費自由參加),請任選一項</h><br/>
<div class="form-check form-check-inline visit1">
<input class="form-check-input" type="radio" name="visit" id="visit" value="none" checked/>
<label class="form-check-label" for="inlineRadio1">兩活動皆不參加</label>
</div>
<div class="form-check form-check-inline visit1">
<input class="form-check-input" type="radio" name="visit" id="visit" value="sea"/>
<label class="form-check-label" for="inlineRadio2">參訪1</label>
</div>
<div class="form-check form-check-inline visit1">
<input class="form-check-input" type="radio" name="visit" id="visit" value="tpc"/>
<label class="form-check-label" for="inlineRadio2">參訪2</label>
</div></div>
<div class="form-group col-md-6 " >
<label for="recipient-name" class="col-form-label" id="idnumt" >身分證字號:</label>
<input type="text" class="form-control" id="idnum" name="idnum" autocomplete="off" placeholder="身分證字號" />
</div>
<div class="form-group col-md-6 " >
<label for="recipient-name" class="col-form-label"id="bookdatet" >出生西元年月日:</label>
<input type="date" class="form-control" id="bookdate" placeholder="2014-09-18">
</div>
<div class="btn-toolbar">
<button type="submit" id="btnSubmit" class="btn btn-primary btn-sm">確定報名</button>
<button type="reset" id="btnreset" class="btn btn-primary btn-sm">重新設定</button></div>
js
$(document).ready(function() {
if (window.location.href!="http://www.ee.nsysu.edu.tw/pr2019/a.php"){
$( "#content" ).hide();
}
$("#recother").hide();
$('.rec').click(function(){
if($('input[name=rec]:checked').val()=="company"){
$("#recother").hide();
}
if($('input[name=rec]:checked').val()=="other"){
$("#recother").show();
}
});
$("#idnum").hide();
$("#bookdate").hide();
$("#idnumt").hide();
$("#bookdatet").hide();
$('.visit1').click(function(){
if($('input[name=visit]:checked').val()!="none"){
$("#idnum").show();
$("#bookdate").show();
$("#idnumt").show();
$("#bookdatet").show();
}
else{
$("#idnum").hide();
$("#bookdate").hide();
$("#idnumt").hide();
$("#bookdatet").hide();
}
});
});
$("#btnSubmit").on('click',function(e){
if($("#id").val()==""){
$("#id").css ("border", '1px solid red');
alert("學號未填");
e.preventDefault();
}
else if($("#career").val()==""){
$("#career").css ("border", '1px solid red');
alert("職稱未填")
e.preventDefault();
}
else if ($('input[name=rec]:checked').val()=="other")
{
if($("#recother").val()==""){
$("#recother").css ("border", '1px solid red');
alert("收據抬頭未填")
e.preventDefault();
}
}
else if ($('input[name=visit]:checked').val()!="none")
{
if($("#idnum").val()==""){
$("#idnum").css ("border", '1px solid red');
alert("身分證未填")
e.preventDefault();
}
}
});
用return false;可以嗎?
因為你那個按鈕是submit,
或是另外一種用法,
使用普通按鈕,
但是所有條件都沒問題的話,
用js的submit()送出資料.
我測是有跳出 "輸入身分證"的 alert阿
你是指跳出alert 還是照樣送出嗎
不過你用type = "submit" 卻沒有用 form tag
這樣有用嗎
還有我建議先用input 的 'required' Attribute 先檢查一次
在 Submit 前 再用js檢查一次
最後到後端再檢查一次
也許他只是沒有貼出 form tag 而已...
form tag 我沒寫上去..為什麼d大把js 判別的註解掉還是可以顯示壓?
我把那段注解只是為了要讓 required 的效果出來而已
測試得時候沒注解唷
我是寫完其他,身分證沒寫還是會通過@@
你最後這邊 if($("#idnumt").val()=="") id打錯了
難怪就算身分證有打還是一直跳出alert
codePen 我更新可以參考一下
身分證的id打錯了
然後你應該 listen 的是 form submit的event
不是button click 的 event
d大您好:
就是剛剛如果點其他寫入抬頭、職稱也填了、點參訪1或點參訪2
身分證跑出來,但沒填,按送出無法跑出alert..會自動跳下一頁
改好了 判斷邏輯的問題
因為($('input[name=rec]:checked').val() == "other")
選了其他會符合這的條件
導致後面的身分證判斷不會執行到
d大您好:可以用了 謝謝
主要是改if跟return false;嗎? 這跟==(判別的變數做轉換型別的動作)和===有關係嗎?
if 要改是因為你的檢查不是 else 的關係
一旦檢查失敗就不submit
return false 是讓code不再執行下去
e.preventDefault(); 是防止element默認行為
兩個在這都可以達到取消submit的目的
不過我會用return false
因為e.preventDefault()不會中斷code
所以你抬頭 身分證都沒填
會跳兩次alert
== 跟 === 的差別在於
===會比較兩者type
ex:
false == '0' // true
false === '0' // false
所以會比較推薦用=== (否定也是推薦用!==)
所以應該是e.preventDefault(); 是防止element默認行為的關係囉@@
謝謝
呃
你這案例用哪個都沒差
重點是if那邊要修改