如何在使用 javascript 发送表单和 GET 变量之前更改它？

Question

我想从我的表单中获取一些字段，修改它们然后发送表单，但我不知道该怎么做。

我有一个这样的表格：

<form action="http://myurl.com" method="GET">
    <input type="text" name="date">
    <input type="name" name="name">
    <input type="submit" value="Submit">
</form>

日期字段是一个字符串，我想提取其中的一部分来制作这样的网址。用户在点击提交按钮时必须转到此网址。

http://www.myurl.com?name=name@day@month@year

Example : http://www.myurl.com?name=paul@01@12@2016

我尝试在日期上使用getInnerHTML 来获取它的子字符串。然后我尝试在名称旁边解析它以“生成” url。

（编辑：但它不起作用）

name.getAttribute('value')+"@"+day+"@"+month+"@"+year);

一个真正像这样工作的 URL 示例

http://premium.secureholiday.net/reservation.asp?nc=2864&lg=fr&re=L@02@07@2016@09@07@2016

Edit2 : 不能使用 JQuery ！

    <script type="text/javascript">
//Get the field "re" and put it the converted date @j@m@a@j@m@a
function dateParser(){

    var champs = document.getElementById('resa_type_resa');
    var dateDebut = document.getElementById('resa_date_debut_resa').getInnerHTML;
    var dateFin = document.getElementById('resa_date_fin_resa').getInnerHTML;
    var jour = dateDebut.value.substring(0,1);
    var mois = dateDebut.value.substring(4,5);
    var annee = dateDebut.value.substring(7,10);
    var jourFin = dateFin.value.substring(0,1);
    var moisFin = dateFin.value.substring(4,5);
    var anneeFin = dateFin.value.substring(7,10);

    champs.setAttribute('value', champs.getAttribute('value')+"@"+jour+"@"+mois+"@"+annee+"@"+jourFin+"@"+moisFin+"@"+anneeFin);

    alert(champs);
}
</script>

<form id="reservation_crique" action="recup.php" method="GET" target="_blank" onSubmit="dateParser()">

    <p style="text-align: center;"><strong><strong><img src="images/stories/reservez.png" alt="" /></strong></strong></p>
    <p><strong>Location ouverte<br /></strong>du 15/03 au 15/11</p>
    <p><span class="form-label">Type de r&eacute;servation :</span>
        <select id="resa_type_resa" name="re" style="width: 143px;">
            <option value="E">Emplacement</option>
            <option value="L">Location</option>
        </select>
    </p>
    <span class="form-label">Date de d&eacute;but : </span>
    <input id="resa_date_debut_resa" name="date_debut" type="text" /><br /><span class="form-label">
    Date de fin : 
    </span>
    <input id="resa_date_fin_resa" name="date_fin" type="text" />
    <input id="resa_re" type="hidden" name="re" />
    <input id="lg" type="hidden" name="lg" value="fr" />
    <input id="nc" type="hidden" name="nc" value="2865" />
    <input id="mo" type="hidden" name="mo" value="1129" />
    <input id="site_frame" type="hidden" name="site_frame" value="1" />
    <input id="bloc_recherche" type="hidden" name="bloc_recherche" value="1" />
    <br />
    <input type="submit" value="Envoyer">
    <!--<div style="text-align: center;"><a href="#" id="resa_button_validate">Voir les r&eacute;servations</a></div>-->
</form>

Answer 1

您可以通过以下方式获取日期值，并根据您输入的日期格式将日期、月份和年份分开。

document.getElementsByName('date')[0].value

Answer 2

您可能还考虑使用正则表达式 (RegEx) 来解析日期元素。请参阅下面的包含示例：

var url_year, url_month, url_day = "";
var base_url = "http://www.example.com";

function getElement(id) {
  (typeof id != "string")
  return (typeof id != "string") ? id : document.getElementById ? document.getElementById(id) : document.all ? document.all(id) : document.layers[id];
}


function valiDate(dateval) {
  var myregexp = "";
  var match = null;

  myregexp = /([\d]{4,4})-([\d]{1,2})-([\d]{1,2})/i; // YYYY-MM-DD
  match = myregexp.exec(dateval);
  if (match != null) {
    url_year = match[1];
    url_month = ((match[2].length < 2) ? '0' : '') + match[2];
    url_day = ((match[3].length < 2) ? '0' : '') + match[3];
    return true;
  }
  myregexp = /([\d]{1,2}).([\d]{1,2}).([\d]{4,4})/i; // DD.MM.YYYY
  match = myregexp.exec(dateval);
  if (match != null) {
    url_year = match[3];
    url_month = ((match[2].length < 2) ? '0' : '') + match[2];
    url_day = ((match[1].length < 2) ? '0' : '') + match[1];
    return true;
  }
  myregexp = /([\d]{1,2}).([\d]{1,2}).([\d]{4,4})/i; // MM/DD/YYYY
  match = myregexp.exec(dateval);
  if (match != null) {
    url_year = match[3];
    url_month = ((match[1].length < 2) ? '0' : '') + match[1];
    url_day = ((match[2].length < 2) ? '0' : '') + match[2];
    return true;
  }
  alert("Date format not valid\nAllowed are: YYYY-MM-DD | DD.MM.YYYY | MM/DD/YYYY");
  return false;
}

function doSubmit() {
  var f_name = getElement("myForm_name");
  if (typeof f_name == "undefined") {
    alert("No 'name' field in form");
    return false;
  } else {
    v_name = f_name.value;
    if (v_name.length < 1) {
      alert("Name field must not be empty");
      return false;
    }
  }
  var f_date = getElement("myForm_date");
  if (typeof f_date == "undefined") {
    alert("No date field in form");
    return false;
  } else {
    v_date = f_date.value;
    if (v_date.length < 1) {
      alert("Date field must not be empty");
      return false;
    }
  }
  if (!valiDate(v_date)) return false;
  var xpar = "name=" + escape(v_name) + "@" + url_day + "@" + url_month + "@" + url_year;
  // window.location.href = base_url + "?" + xpar;
  alert("URL=" + base_url + "?" + xpar);
  return true;
}

<form action="" method="GET" name="myForm" onsubmit="return doSubmit(); return false;">
  <section style="display: table;">
    <div style="display: table-row;">
      <div style="display: table-cell;">Name:&nbsp;</div>
      <div style="display: table-cell;">
        <input type="name" id="myForm_name" name="myForm_name">
      </div>
    </div>
    <div style="display: table-row;">
      <div style="display: table-cell;">Date:&nbsp;</div>
      <div style="display: table-cell;">
        <input type="text" id="myForm_date" name="myForm_date">
      </div>
    </div>
    <div style="display: table-row;">
      <div style="display: table-cell;padding-top:4px;"></div>
      <div style="display: table-cell;padding-top:4px;">
        <input type="submit" value="Submit">
      </div>
    </div>
  </section>

</form>

Answer 3

如果您需要根据用户输入生成日、月和年，为什么不使用他们的数据实例化一个新的 Date 对象，然后使用 Date 函数来获取您需要的信息。

类似这样的：

var date = new Date($('form input[name="date"]').val());

var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();