how to prevent javascript function from changing other values in html form

Question

I have two select blocks in my html form:

<select id="select1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<select id="select2" onchange="someFunc()">
<option>A/option>
<option>B</option>
</select>

I have a validateForm() function called from the form tag @onSubmit. the "someFunc" function populates some innerHTML elsewhere in the form. The issue I'm having, is that when I hit submit, the value of select1 reverts to its original default value, and the validateForm function fails.

the someFunc function is really long, so I didn't post the whole thing, but essentially what it does is check a string value and populate html, like:

if(select2.value = 'A'){
     document.getElementById('anotherElement').innerHTML= '<h1>a new tag</h1>';
}

is there another att besides @onChange?

Ok, here is a complete html form that describes the problem I am having:

<html>
<head>
<title>javascript q</title>
<script>
    function updateTag(){
document.getElementById('newHeading').innerHTML='<p     id="status">updated</p>';

    }


    function validateForm(){
        var s1 = document.getElementById('select1');
        var s2 = document.getElementById('select2');

        if( s1.value = 'please select' ){
                alert('please select a value from the pulldown');
                return false;
            }

        // updated html needs to have been performed and value selected
        if(document.getElementById('status') == null ){
                alert('status does not exist');
            }

    }

</script>

</head>
<body>

<h1>Javascript Q</h1>

<form id="testForm" onSubmit="return validateForm();">

<select id="select1">
    <option>please select</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<select id="select2" onchange="updateTag()">
    <option>please select</option>
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>
<input type="submit" value="submit"/>       
<div id="newHeading">

</div>


</form>
</body>
</html>

what happens is, I select a value from each pulldown, hit submit, then the value of select1 reverts to its orig val, and fails the validation

hope that's better.

thanks, bp

@EudisDuran: it's really long...wasn't sure how much to post. Please see edited q — badperson, Oct 27 '12 at 22:52
@all: added more complete form, hope that question is better and more helpful to others — badperson, Oct 27 '12 at 23:54

score 0 · Answer 1 · answered Oct 27 '12 at 22:52

I think what this does is it sends the info out (Actually submits it) making the feilds go blank again. A tip would be to

return false

On your validateForm() if you just want to populate some div's and whatnot. If you actually want it to submit, then you'd probably want something like this:

$('form').submit(function(e) {
     //Do your checks and innerHTML manipulation here before it sends the info away.
});

score 0 · Answer 2 · answered Oct 27 '12 at 22:59

0

instead of using return mentioned by Robin Jonsson you should use preventDefault() to prevent submitting the form when you hit submit.

answered Oct 27 '12 at 22:59

awenkhh

5,811
1
21
24

no - thats not correct. return false does both preventDefault() AND stopPropagation() – awenkhh Oct 27 '12 at 23:07
No, it is correct. Using `return false;` in a jQuery event handler is the ONLY time both of those are executed. In normal Javascript event handlers, `return false;` is ONLY equivalent of `event.preventDefault();` – Ian Oct 27 '12 at 23:12
ok - so we should not start the discussion again - I think it's easier to read here: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – awenkhh Oct 29 '12 at 08:30
Exactly, the accepted answer explains exactly what I'm saying. Thanks for providing the link though – Ian Oct 29 '12 at 19:00

score 0 · Accepted Answer · answered Nov 03 '12 at 01:41

0

mea culpa, totally stupid oversight on my part

if( s1.value = 'please select' ){

should be

if( s1.value == 'please select' ){

sorry for stupid oversight

answered Nov 03 '12 at 01:41

badperson

1,554
3
19
41

how to prevent javascript function from changing other values in html form

3 Answers3