Add Textbox value to table using jQuery for postback

Question

have tried searching for this with no success. I want to be able to add urls to a table from textbox values then return these to a MVC controller POST action. Have tried the below but the submit click is triggering the post back to the server rather than executing the jquery code.

<h2>Index</h2>

@using (Html.BeginForm())
{
   <input type="text" name="input" id="Text1"/>
   <input type="submit" value="Submit" id="submit"/>
}

<div class="table-responsive">
   <table class="table" id="table1">
         <tr>
            <th>Site</th>
        </tr>
        <tr>
            <td>www.example.com</td>
        </tr>
    </table>
</div>

@using (Html.BeginForm("WebDriver", "Home", FormMethod.Post))
{
  <input type="submit" value="Complete" id="complete" />
}

<script type="text/javascript">
  $(document).ready(function () {
    $('#submit').click(function(){
        var val1 = $('input[id="Text1"]').val();
        for (var i = 0; i < val1; i++) {
            $('table[id="table1"]')
                .append(' <tr class="row">' + val1 + '</tr>');
        }
    });
});
</script>

Answer 1

The issue in your case is that you are reloading the page when you fire the "click" event. This is why you have to prevent the default behaviour of the submit button, this way :

$(document).ready(function () {
  $('#submit').click(function(e){
    //this prevents the form submission
    e.preventDefault();
    //this updates the table info 
    var val1 = $('input[id="Text1"]').val();
    $('#table1').html( $('#table1').html()+' <tr class="row"><td>' + val1 + '</td></tr>');
});
});

Answer 2

try this:

 $('#submit').click(function(e){ e.preventDefault(); // this is how to stop the form submitting var val1 = $('#Text1').val(); // us an id selector - it is much better performance if (val1 != '') { // check if textbox was empty (not sure what your loop did) $('#table1').append('<tr class="row"><td>' + val1 + '</td></tr>'); //apend new row to table } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action="./" method="post"> <input type="text" name="input" id="Text1"/> <input type="submit" value="Submit" id="submit"/> </form> <div class="table-responsive"> <table class="table" id="table1"> <tr> <th>Site</th> </tr> <tr> <td>www.example.com</td> </tr> </table> </div> 

Answer 3

You could instead change the "submit" button to just a "button", and on your click handler, you can submit the form after processing if needed. You should also add an ID to your form.

@using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { id = "myForm" }))
{
   <input type="text" name="input" id="Text1"/>
   <input type="button" value="Submit" id="submit"/>
}

<script type="text/javascript">
  $(document).ready(function () {
    $('#submit').click(function(){
        var val1 = $('input[id="Text1"]').val();
        for (var i = 0; i < val1; i++) {
            $('table[id="table1"]')
                .append(' <tr class="row">' + val1 + '</tr>');
        }
        $('#myForm').submit();
    });
});
</script>