在表单 action= 中使用 javascript 和 html 表单输入

Question

I have a simple form. A user inputs text and I need that text to be used in the action attribute of form. I also need to use a JavaScript variable in the form attribute action . The other thing I need is to be able to test the form input to make sure it's ok.

<script>
function validate(form){
var formVal=document.forms["myForm"]["test"].value;

simple test code for formVal

return true;
}


var scrt_var=737; //I've got more code to get this variable, I've just hardcoded it for simplicity
</script>

<FORM name="myForm" method="POST" action='http://www.example.com/viewdetails.php?id='+how to get scrt_var + '&page=' + how to get the text input; onsubmit="return validate(this);">

<input type="text" name="test" value="">
<input type="submit" value="Submit">
</form>

So how do I go about getting the variable scrt_var in the action attribute and also the inputted text as well?

Answer 1

This is simple event listener attached to the form onsubmit event. It simply concatenates url string, input value and scrt_var and submits form to given url.

<script>
    var form=document.forms['myForm'];

    form.addEventListener('submit', function(){
        var testVal = this.elements['test'].value,
            scrt_var = 737;
        if(testVal){
            this.action = 'http://www.example.com/viewdetails.php?id=' + scrt_var + '&page=' + testVal;
            this.submit();
        }
    }, false);
</script>

    <form name="myForm" method="POST">
        <input type="text" name="test" value="">
        <input type="submit" value="Submit">
    </form>

I don't know what do you mean by statement: "The other thing I need is to be able to test the form input to make sure it's ok.". "Ok input value" is very subjective and varies depending on what you want to achieve. You have to try to validate it on your own (eg. check if the value is empty) ;)

Answer 2

I think you should use jQuery. It is more simplier. :)

With jQuery:

function validiate(){
    //your validiation
    var testVal = $('#myForm #test').val();
    if(testVal == '' || testVal == ' '){
        alert('Not valid');   
    }else{
        $('#myForm').attr('action','yourUrl');
        $('body').append($('#myForm').attr('action'));
    }
    return true;
}

$('#myForm').submit(function(e){
    e.preventDefault();
    validiate();

Demo: http://jsfiddle.net/kxaAn/

Answer 3

plain and simple

<script>
function validate(){
formVal = document.getElementById('test').value;
var scrt_var=737;
document.forms["myForm"].action='http://www.example.com/viewdetails.php?id='+ scrt_var + '&page=' + formVal;
}

</script>

<FORM name="myForm" method="POST" action='http://www.example.com/viewdetails.php?id='+how to get scrt_var + '&page=' + how to get the text input; onsubmit="validate();">

<input type="text" id="test" value="">
<input type="submit" value="Submit">
</form>