Question

The following HTML markup is a form for inserting dates.

If the day is Sunday, the user shouldn't be able to submit the form, otherwise the form should be submitted normally.

But, I haven't mentioned the form action and method.

How can I do this with JavaScript?

CREATE TABLE Users
  (`id` int, `name` varchar(20))
;

CREATE TABLE Addresses
  (`id` int, `city` varchar(20),`user_name` varchar(20))
;

INSERT INTO Users
  (`id`, `name`)

VALUES
  (1, 'sarah'),
  (2, 'harry'),
;

INSERT INTO Addresses
  (`id`, `city`, `user_name`)

VALUES
  (1, 'denver', 'sarah'),
  (2, 'anchorage', 'sarah'),
  (3, 'providence', 'harry'),
  (4, 'new york', 'harry')
;

Answer 1

你可以在输入值中使用getDay()这是一个简单的例子

已更新，现在正在使用主流浏览器

function whatsTheDay() {
var inDat = document.getElementById('dateInput').value;
var inDate = new Date(inDat)
    if(inDate.getDay() == 0){ // 0 = sunday , 1 = monday ..etc
//alert('sunday');
// do any thing
document.getElementById('submit').disabled = true;
document.getElementById('submit').value = 'disabled';
document.getElementById('err').innerHTML ='sunday not allowed'
}else{
//alert('not sunday');
document.getElementById('submit').value = 'submit';
document.getElementById('err').innerHTML = 'this day is allowed';
document.getElementById('submit').disabled = false;
}
}

 function sumitable(){
var inDate = document.getElementById('dateInput').valueAsDate;
if(inDate.getDay() != 0){
document.forms["myform"].submit();
}
}

input{
display:block;
margin:10px;
width:200px;
border-radius:15px 0 15px 0;
border:none;
padding:5px;
border:solid 2px green;
font-size:18px;
color:green;
}
input#submit{
background:gold;
}

<form id="myform">
<input type="text" placeholder="user data"/>
<input id="dateInput" type="date" onchange="whatsTheDay()"/>
<input id="submit" type="submit" value="submit" onclick="sumitable"/>
</form>
<p id="err"></p>

Answer 2

基本上，这个想法是：

从字段中获取数据
将提取的数据传输到后端服务

你可以使用jQuery和PHP简单地完成它：（要使用此代码，您必须将jQuery脚本集成到您网站的代码中： https://code.jquery.com/jquery-1.11.3.min.js ）

submit.js（Jquery）：

/ *来自领域的FETCH数据并通过AJAX POST发送给他们* /

//点击按钮，ID =＆＃34; button_submit＆＃34;做以下

$(document).on('click', '#button_submit', function () {

    //GET DEPARTING FIELD'S VALUE
    var departing = $("[name='departing']").val();

    //GET RETURNING FIELD'S VALUE
    var returning = $("[name='returning']").val();

    //FOR DEBUG CASES YOU CAN PRINT THE VALUES FOR THE CONSOLE (REMOVE OR COMMENT IT WHEN YOU DONE DEVELOPMENT)
    console.log('Departing date: ' + departing);
    console.log('Returning date: ' + returning);

    //OPTIONAL VALIDATION SCRIPT HERE

    //SEND THE DATA TO THE BACKEND SERVICE WITH AN AJAX POST
    $.ajax({
        url: '/path/to/your_form_processor.php', //URL OF THE BACKEND SERVICE (use PHP here)
        type: 'POST',
        data: {
            departing: departing,
            returning: returning
        } //FIRST TAG: Data name, SECOND TAG: Value
    })
        .done(function () {
        //YOU CAN PROVIDE FEEDBACK HERE ON A SUCCESSFUL POST
        console.log("success");            
    })
        .fail(function () {
        //OR YOU CAN PROVIDE FEEDBACK HERE ON A FAILED POST
        console.log("error");            
    });
});

在服务器端，您可以使用

$变量名= $ _ POST [＆＃34;数据名＆＃34;];

方法。

your_form_processor.php（PHP）：

<?php
echo 'Departing date: ' . htmlspecialchars($_POST["departing"]) . '!';
echo '<br>'
echo 'Returning date: ' . htmlspecialchars($_POST["returning"]) . '!';
?>

您可以检查JSFiddle上的脚本： http://jsfiddle.net/dizajner/gLt3e7bw/1/

快乐的编码！

How to submit a form only if a date input is not Sunday?

2 个答案: