2012-08-15 65 views
1

我有一個表單,我需要兩個字段相同。我試圖使用JavaScript來使第二個與第一個相同,第一個設置後。Javascript複製表單輸入

這裏是JavaScript(我上面的標籤)

<script type="text/javascript" charset="utf-8">  
     function updateDate(){   
     startDate = document.getElementById("startdate").value;  
     document.getElementById("enddate").value = startDate; 
} </script> 

和HTML如下:

<span class="em-events-search-dates em-date-range"> 
<input type="text" id="startdate" class="em-date-input-loc em-date-start" onchange="updateDate();" /> 
<input type="hidden" class="em-date-input" name="scope[0]" value="<?php if(!empty($_REQUEST['scope'][0])) echo $_REQUEST['scope'][0]; ?>" /> 
<input type="text" id="enddate" class="em-date-input-loc em-date-end" /> 
<input type="hidden" class="em-date-input" name="scope[1]" value="<?php if(!empty($_REQUEST['scope'][1])) echo $_REQUEST['scope'][1]; ?>" /> 
</span> 

我遇到的問題是,當您單擊窗體域,它打開日期選擇器。我很確定它使用了這個確切的插件http://jqueryui.com/demos/datepicker/

不幸的是,這意味着在選擇日期之後你永遠不會真正點擊表單域,並且你從不輸入任何內容。

我試過的onmouseout在第二場(隱藏一個帶班EM-日期輸入) 我試圖平變化與ID開始日期的第一個元素

有一些的工作,只有當你回去然後點擊所選日期的可見字段。問題是,用戶永遠不會這樣做。

我甚至試着把onsubmit =「updateDate();」在提交按鈕上,希望當你點擊它時,它會改變提交表單之前的第二個日期..沒有運氣。有什麼建議麼?

編輯:添加警報,看看有什麼是工作,什麼不是

<input type="text" onchange="alert('first');" id="startdate" class="em-date-input-loc em-date-start" /> 
<input type="hidden" onchange="alert('second');" class="em-date-input" name="scope[0]" value="<?php if(!empty($_REQUEST['scope'][0])) echo $_REQUEST['scope'][0]; ?>" /> 
<input type="text" onchange="alert('third');" id="enddate" class="em-date-input-loc em-date-end" /> 
<input type="hidden" onchange="alert('fourth');" class="em-date-input" name="scope[1]" value="<?php if(!empty($_REQUEST['scope'][1])) echo $_REQUEST['scope'][1]; ?>" /> 

當我改變在第二個框(ID =「結束日期」)之日起,將觸發第三警報。即使我多次更改第一個框中的日期或打字,也不會有其他警報發生。

+0

注意,這裏不需要'charset =「utf-8」'。另外,你「非常確定」它使用jQuery UI datepicker?你不知道嗎?如果是這樣,你就可以輕鬆掌握所有的jQuery。 – j08691 2012-08-15 20:53:40

+0

我不知道它是用名爲Events Manager的wordpress插件生成的,我仍然沒有找到它的文件在哪裏生成日期選擇框。 – 2012-08-15 20:59:20

+0

你想要在這兩個領域相同的價值,或者你只是想兩個領域? – 2012-08-15 20:55:30

回答

1

如果我明白你的問題,那麼你可能需要這個(困惑你的問題有點)

$(function(){ 
    $('#startdate, #enddate').datepicker(); 
    $('#startdate').on('change', function(e){ 
     $('#enddate').val($('#startdate').val()); 
    }); 
});​ 

DemoThis One.

+0

工作完美的小提琴..不適合我。 http://altitudevip.com/events/它是頁面上的第二個表格 – 2012-08-15 21:41:57

+0

控制檯'Uncaught SyntaxError:Unexpected token?'出現錯誤? '試着修復它。 – 2012-08-15 21:45:08

+0

也不要使用'onchange =「updateDate();'。 – 2012-08-15 22:36:37

0

您需要將onchange事件掛接到textbox,然後在數據觸發後複製數據。它應該在日期選擇器更新值時觸發。

+0

那就是了,當我添加onchange =「updateDate();」到id =「startdate」的文本框並更改日期,它根本不更新第二個框 – 2012-08-15 21:05:35

+1

在那裏發出警報,看看它是否觸發。 – 2012-08-15 21:07:45

+0

甚至沒有火..第二個日期框,但第一個從來沒有。 – 2012-08-15 21:22:11

2

使用表格前提交事件:

的onsubmit = 「返回YOUR_FUNCTION_HERE()」

只是將它加入你的提交按鈕。

然後設置FUNC內的值:

var YOUR_FUNCTION_HERE = function(){ 
    //set your hidden inputs 
} 
+0

onsubmit的作品,當我把它放在

標籤上。它填充第二個字段,但在提交表單時不會使用這些信息。這是因爲它在處理字段後添加它嗎? – 2012-08-15 21:09:24