How to create field dynamically with jQuery?

Asked

Viewed 877 times

1

I have a Function that I need to validate what the user has typed, if applicable true enables the datepicker. But the way I did, you’re falling for the method POST of asp.net mvc. There is a way to create a textbox dynamically with jQuery ?

My code:

View:

<script>
$(document).ready(function () {
    var senha = $('txtSenha').val();

    $("#lblSenha").hide();
    $('#txtNovaDtVenc').click(function () { <-- Aqui é o Datepicker
        $("#lblSenha").toggle();
        $('#btnOK').click(function () {
            if (senha == "administrador") {
                $("#txtNovaDtVenc").datepicker(
                    "option", "disabled", false);
            }
        });
    });
});

</script>

<div id="lblSenha" style="width:300px">
    <table>
        <tr>
            <td>
                Senha: 
            </td>
            <td>
                @Html.TextBox("txtSenha", "", new { @class = "form-control form-control-custom", style="width:100px" })
            </td>
            <td>
                <input type="submit" id="btnOk" class="" value="Ok" onclick=""/>
            </td>
        </tr>
    </table>
</div>
jquery asp.net-mvc

2 answers

1


Simple example, where a input of the kind text is added to the body

    $('<input>').attr({
        type: 'text',
        name: 'nome_do_campo',
        value: 'teste valor'
    }).appendTo('body');

If you want to add to a specific element, just specify it in the method appendTo().

<form id="frm"></form>

$('<input>').attr({
    type: 'text',
    name: 'nome_do_campo',
    value: 'teste valor'
}).appendTo('#frm');

  • Dude because when I click on my ok button it falls in the post method of Asp.net mvc ? there is no way I can do this only in jQuery ?

  • This is because your button is type Submit, the default behavior of this type of button is just to send the form data (POST or GET). If you want to change this behavior you change the type of button to button for example.

  • Probably because it is a button of type "Submit". Perhaps it is better to switch to type "button".

  • @Danielomine Cara, it worked to change the button, but I have another one and there’s no id ? And also, the time I put in case the right password, does not enable datepicker.

  • There are already another 500.. try to solve and if you have doubt opens new question about datepicker..

1

Here is a ready-made jsFiddle example:

http://jsfiddle.net/kro8mud9/1/

$(document).ready(function(){
     var counter = 2;
		
    $("#addButton").click(function () {
				
	if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
	}   
		
	var newTextBoxDiv = $(document.createElement('div'))
	     .attr("id", 'TextBoxDiv' + counter);
                
	newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' 			 + '<input type="text" name="textbox' + counter + 
	      '" id="idCampo' + counter + '" value="" >');
            
	newTextBoxDiv.appendTo("#TextBoxesGroup");

				
	counter++;
     });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id='TextBoxesGroup'>
	<div id="TextBoxDiv1">
		<label>Textbox #1 : </label><input type='textbox' id='textbox1'>
	</div>
</div>
    
<input type='button' value='Add TextBox' id='addButton'>

  • 2

    Post the Jsfiddle code here so the answer will be eternal independent of external sites.

  • 1

    Thanks for guidance @Ricardo !

Browser other questions tagged jquery asp.net-mvc

You are not signed in. Login or sign up in order to post.