Question

您好我是初学程序员，需要有关java的专业建议。我试图通过输入数据更改我的表单操作。就像，我的表单操作是“http://ddd.com”，如果我输入'abc'，它就会变为 http://ddd.com/abc 这就是我到目前为止......

<body>
  <form action="http://ddd.com"+"/"+"addr1"+"/"+"addr2", id="frm">
  <input type="text" name=addr1>
  <input type="text" name=addr2>
  <input type="submit" onclick=(this.form.frm.value)>
  </form>
</body>

请给我一个答案。谢谢:)）

Answer 1

您可以在表单提交上调用javascript函数，在该函数内部，您可以访问所有输入值以创建新URL，然后进行ajax调用。例如：

<form name="search" onsubmit="return makeSearch()" >
  Name: <input type="text" name="name1"/>
  Age: <input type="text" name="age1"/>
  <input type="submit" name="Submit" value="Submit"/>
</form>

function makeSearch() {
 // Get values from input fields to create your url
  alert("Code to make AJAX Call");
  return false;
}

确保您的javascript函数在任何情况下都应返回false。

Answer 2

试试这样。

1.获取from action属性。

2.当输入字段的值更改时，添加更改EventListener并使用输入字段值创建新的表单操作。并提交表单。

input = document.querySelectorAll('input');//get all input elements
form = document.querySelector('#frm');//get form 
formaction = form.getAttribute('action');//get form's current action
//alert(formaction);
input.forEach(function(input,index){//add event listener for each input
input.addEventListener('change',function(){

var value = this.value;//get changed input field value
var finalaction = formaction+"\/"+value;//make a final action of your form 
console.log(finalaction); 
form.setAttribute('action',finalaction); //set final action as current action
form.submit();//finally submit your from
});
  
 });

<form action="http://ddd.com" id="frm">
  <input type="text" name=addr1>
  <input type="text" name=addr2>
  <input type="submit">
</form>

请参阅JS fiddle here Fiddle

Answer 3

$('#frm).submit(function(ev) {
    ev.preventDefault(); 
    var addr1 = document.getElementsByName("addr1")[0].value;
    var addr2 = document.getElementsByName("addr2 ")[0].value;
    var url = "http://ddd.com"+"/"+addr1+"/"+addr2;
    $.ajax({
     type: 'POST',
     url: url,
     success:function(data){
            //your other codes here
    });

});

你需要jquery

Answer 4

首先：将输入分配给变量。

var input = document.getElementsByTagName("input");
var text1 = input[0].text, text2 = input[1].text;

然后：将表单元素分配给变量。

var form = document.getElementById("frm");

第三步：定义单击submit时要调用的函数，该函数将文本添加到表单的action属性中。

    function sub(){
    form.action += text1 + text2;
 }document.getElementById("submit"). onclick = "sub()";

这样，您的操作将在功能完成后更改。

Answer 5

很遗憾，我无法在您的问题中添加评论，因此我会在此回复。

我认为你可能会错误地解决这个问题。如果您使用表单提交给codeigniter，您只需将值作为常规GET或POST传递。如果您只是“链接”到codeigniter页面并需要传递路线，那么您可以使用location.href

但要回答上面的问题，你会做这样的事情：

var frm = document.getElementById('frm'),
    addr1 = document.getElementById('addr1'),
    addr2 = document.getElementById('addr2'),
    btn = document.getElementById('submit'),
    baseAction = frm.action;

btn.addEventListener('click',function(evt) {
   evt.preventDefault();
  
  var frmAction = baseAction,
      addr1Val = addr1.value.trim(),
      addr2Val = addr2.value.trim();

   
  
  if(addr1Val != '') {
    frmAction += addr1.value.trim();
  }
  
  if(addr2Val != '') {
    frmAction += "/" + addr2Val;
  }
  
  console.log(frmAction);
  
  // Below would be used to submit the form
  // frm.action = frmAction;
  // frm.submit()
  
  // OR you could just link out like this ...
  // location.href = frmAction;
  
});

  <form action="http://ddd.com" id="frm">
  <input type="text" name="addr1" id="addr1">
  <input type="text" name="addr2" id="addr2">
  <input type="button" value="Submit" id="submit">
  </form>

通过输入选项更改表单操作

5 个答案: