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

嗨我是初学者程序员，需要有关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>

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

来源

2017-02-09 Lewis Park

你介意给你的结果吗？你是否想要从codeigniter获取数据？如果是这种情况，我会建议构建URL为http://ddd.com/index.php?addr1=xxxx&addr2=xxxx codeigniter可以轻松获取这种格式..绑定做它如何做它会使它非常很难得到的信息... –

如果我进入abc和def然后它弹出“http://ddd.com/abc/def”像这样 –

你可以在表单提交时调用一个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。

来源

2017-02-09 06:15:12 vinni

请尝试这样。

1.取得从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

来源

2017-02-09 06:26:17

$('#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这里需要

来源

2017-02-09 06:26:43 pryxen

第一：输入的变量赋值。

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()";

这样，你的动作会在功能被改变后被改变。

来源

2017-02-09 06:29:50

不幸的是，我不能添加评论给你的问题，所以我会在这里回复。

我想你可能会错误地解决问题。如果您使用表单提交给codeigniter，则只需将这些值作为常规GET或POST传递即可。如果你只是“链接”到笨页面，需要传递的路线，那么你可以做到这一点与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>

来源

2017-02-09 06:30:53 creativekinetix

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

回答

相关问题