www.webdeveloper.com
Results 1 to 6 of 6

Thread: submit button refreshes the whole page

  1. #1
    Join Date
    Aug 2011
    Posts
    3

    submit button refreshes the whole page

    I have the following JS. In this, when I press the submit button, I have a JS function that will create 2 input boxes and one more submit button.

    When I type the values in those input boxes and click on the newly created submit button, the addition of the above input values should display. But the entire input boxes and submit button gets lost and the old page is getting displayed.

    Please let me know what is wrong.

    My JS:

    <html>
    <head>
    <title>Javascript Exercises
    </title>
    <script type="text/javascript">

    function maxInput(){
    var maxInputForm = document.createElement('form');
    var maxInputA = document.createElement('input');
    maxInputA.setAttribute('type','textbox');
    maxInputA.setAttribute('id','maxInputA');
    maxInputA.setAttribute('value',3);
    var maxInputB = document.createElement('input');
    maxInputB.setAttribute('type','textbox');
    maxInputB.setAttribute('id','maxInputB');
    maxInputForm.innerHTML+= 'A: ';
    maxInputForm.appendChild(maxInputA);
    maxInputForm.innerHTML+= '</br>';
    maxInputForm.innerHTML+= 'B: ';
    maxInputForm.appendChild(maxInputB);
    maxInputForm.innerHTML+='</br>';
    var addButton = document.createElement('input');
    addButton.setAttribute('type','submit');
    addButton.setAttribute('value','add');

    var max=function (){
    maxInputA.setValue(maxInputA.getValue()+maxInputB.getValue());
    };

    addButton.addEventListener('click',max,false);
    maxInputForm.appendChild(addButton);
    maxInputForm.addEventListener('submit',max,false);
    var max_2_nos_doc = document.getElementById('max_2_nos');
    max_2_nos_doc.parentNode.insertBefore(maxInputForm,max_2_nos_doc.nextSibling);
    return;
    }
    </script>
    </head>
    <body>
    <div id="title">
    <h1>Javascript Exercises</h1>
    </div>
    <div id="contents">
    <div id="max_2_nos">
    <h3>Max of 2 Numbers</h3>
    </div>
    <div id="submit">
    <input type="submit" onClick="maxInput();"/>
    </div>
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,097
    I don't know about that, but wouldn't it be better to have two submit buttons or include those two boxes that could pop up with a checkbox than making a user submit a form twice?

    That's annoying for users.

  3. #3
    Join Date
    Aug 2011
    Posts
    3
    Hi,

    Thanks for your reply.

    User experience is one problem, I agree. But here the functionality itself is not working.

    I am not able to capture the inputs entered by the user in the newly created form. Thats what I want to solve.

  4. #4
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,097
    Quote Originally Posted by karthkri View Post
    Hi,

    Thanks for your reply.

    User experience is one problem, I agree. But here the functionality itself is not working.

    I am not able to capture the inputs entered by the user in the newly created form. Thats what I want to solve.
    -----------------------------------------------
    If I understand your question correctly, there are two ways to do it...
    I do not know java, but one of these basic methods should work. This is what I do in PHP:


    PHP Code:
    foreach($_POST as $key=>$value) {                                 //Captures previously sent data and enters into new form variables for HTML Generation.
        
    echo "<input type=\"hidden\" name=\"$key\" value=\"$value\">";



    If you cannot find a Java equivalent to that, you can try this method:

    PHP Code:
    echo '<form method="post" action="http://www.YourURL.com/form/">';
    echo 
    "<input type=\"hidden\" name=\"privacy\" value=\"$privacy\">
    <input type=\"hidden\" name=\"whatever\" value=\"
    $whatever\">
    <input type=\"hidden\" name=\"something\" value=\"
    $something\">
    </form>"


  5. #5
    Join Date
    Apr 2006
    Location
    Perth
    Posts
    154
    A SUBMIT button is for submitting a FORM and usually changing the page location. Since
    there is no FORM tag declaring an action URL, the default action of loading the current
    page is taking place. So everything is working as expected.

    What you should have used was a BUTTON.

    <input type="button" value="ADD">

    Why have you done to the trouble of programmatically creating all the form information
    and inserting it into the document? It seems the point of the script was to investigate
    object creation and document insertion rather than making a form to add two numbers.

    What is the main focus of this?
    Colin Fiat Simple Solutions To Complex Problems

  6. #6
    Join Date
    Aug 2011
    Posts
    3
    Hi Colin,

    The purpose is to create a form with a set of questions. On clicking a question a form will open with a textarea, a submit and cancel button.

    Once you press the submit button the content in the text area should be taken for processing and the expanded form disappears.

    This is something I wanted to try out. Hence I wrote this piece of code.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles