form.submit() not working

Question

I need to do something to use the ruby cgi to output something. As such form must be submitted first followed by the js to alter the element values. Using the form.submit() does not work in my case.

Using the simple below example below to output the click me values after submitting the form. When the form.submit() function is run,the js will not work on click me.

Form onsubmit method cannot be used as it calls the javascript function first before submitting the form(Must submit the form first then call the JS function to carry out something)

Any idea to resolve this: NOTE:MUST SUBMIT FIRST

$(document).on('click','#afterbutton',function() {
    var form = document.getElementById("myForm");
    //form.submit();
    document.getElementById("test").innerHTML = "afterbutton";
    
    });
    
     $(document).on('click','#beforebutton',function() {
    var form = document.getElementById("myForm");
    //form.submit();
    document.getElementById("test").innerHTML = "beforebutton";
    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
     <input type="submit" value="formSubmitbutton" id="submit"><br>
     <button id="beforebutton">beforebutton</button><br>
     </form>
     <button id="afterbutton">afterbutton</button><br>
     <p id="test">click me</p>

I read the question now... it seems you would be best to use ajax. Submit the form, then when you get a response code ( when you know it has submitted ), you can do another action. — Gary Hayes, Dec 28 '17 at 05:46
Unforunately this cannot be achieved as i am using purely Ruby.Need to use ruby CGI as some sort of "server scripting". — Thomas Koh, Dec 28 '17 at 05:53
You don't have RUBY in the tags for the question, so how is anyone supposed to know this? — Gary Hayes, Dec 28 '17 at 05:54
It is complicated.I am using RUby CGI and there is a need to submit the form first the CGI will be able to receive the input check box values.So i am just using a simple problem example to ask for help if this can be achieved. — Thomas Koh, Dec 28 '17 at 05:57
do not use "submit" name OR id of any element as mostafa mentioned. — Dharmang, Dec 28 '17 at 06:53

score 1 · Answer 1 · answered Dec 28 '17 at 06:07

OK easy problem , you make a simple mistake when you give an input the id submit you override the form.submit method if you look at the console in the devtool you'll see something telling you that

form.submit is not a function

so to solve this problem change the id of your first input instead of submit to something else like submit123

<input type="submit" value="formSubmitbutton" id="submit123"><br>

look at the code below and tell me what you think

$(document).on('click','#afterbutton',function(event) {
    event.preventDefault();
    var form = document.getElementById("myForm");
    form.submit();
    document.getElementById("test").innerHTML = "afterbutton";
    
    });
    
     $(document).on('click','#beforebutton',function(event) {
     event.preventDefault();
    var form = document.getElementById("myForm");
    form.submit();
    document.getElementById("test").innerHTML = "beforebutton";
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
     <input type="submit" value="formSubmitbutton" id="submit123"><br>
     <button id="beforebutton">beforebutton</button><br>
     </form>
     <button id="afterbutton">afterbutton</button><br>
     <p id="test">click me</p>

Unfortunately when the click here changes to the desired output values,it changes back to the click here value again.Any idea why the attribute values changes back to the original value? — Thomas Koh, Dec 28 '17 at 07:13
the problem is when you submit a form the browser will reload and every value will back to its default so you need to prevent the default behavior and there are many patterns for this google it — mostafa tourad, Dec 28 '17 at 07:37

form.submit() not working

1 Answers1