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>

Nothing in your code makes any sense. Your have 2 forms, the first with a textbox and a submit button but you dont want to submit it. The second form has a submit button, but nothing to submit. You script tries to loop through the text in the textbox whicj is not a collection. Then all it does is add some text to a table (not a control) so there is nothing will ever be posted. — user3559349
– user3559349, Commented Mar 20, 2015 at 23:17
My best guess is that you want to dynamically build a collection of websites and post back the whole collection (in which case your code is all wrong). If that the case, please update your question with a better explanation and I can give you a solution — user3559349
– user3559349, Commented Mar 20, 2015 at 23:17

Pete · Accepted Answer · 2015-03-20 15:21:06Z

1

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>

answered Mar 20, 2015 at 15:21

Pete

58.8k31 gold badges132 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BassMHL · Accepted Answer · 2015-03-20 15:31:52Z

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

edited Mar 20, 2015 at 15:31

answered Mar 20, 2015 at 15:19

BassMHL

9,11510 gold badges53 silver badges68 bronze badges

Comments

Daniel Sanchez · Accepted Answer · 2015-03-20 15:26:44Z

0

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>

edited Mar 20, 2015 at 15:26

answered Mar 20, 2015 at 15:19

Daniel Sanchez

2631 silver badge7 bronze badges

Collectives™ on Stack Overflow

Add Textbox value to table using jQuery for postback

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related