通過輸入選項更改表單動作

嗨我是初學者程序員，需要有關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

通過輸入選項更改表單動作

回答

相關問題