CODEWITHSUNDEEP
jqueryasp.net-mvc
Paolo B
Paolo B

Reputation: 3354

Add Textbox value to table using jQuery for postback

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>

Upvotes: 0

Views: 1831

Answers (3)

BassMHL
BassMHL

Reputation: 9047

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>');
});
});

Upvotes: 1

Daniel Sanchez
Daniel Sanchez

Reputation: 263

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>

Upvotes: 0

Pete
Pete

Reputation: 58422

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>

Upvotes: 1

Related Questions