jQuery Uncaught TypeError: submit is not a function

Question

I couldn't find a solution to this problem.

I have multiple dynamically generated forms on the same page, with different ids and data-form-id attributes (#form-1, #form-2 etc.) but only one submit button on top of the page. On input i assign the respective data-form-id value to the submit button, and when i click the submit button it should submit the form with the respective id.

All seems to work as planned, but in the end I get an error in the console saying: Uncaught TypeError: formToSubmit.submit is not a function. Is the concatenation the problem? All help is greatly appreciated!

$('.inputs').on("input", function(){
	// get the data-form-id from this textarea
	var this_id = $(this).attr('data-form-id');
	// set the submit button's data-form-id attribute with the textarea's id
	$('#submitBtn').attr('data-form-id', this_id);
});
	
$('#submitBtn').click(function(){
	var formTo = $(this).attr('data-form-id');
	formTo = "$('#" + formTo + "')";
	console.log(formTo);
	formTo.submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="submitBtn" data-form-id="" type="button" value="send">

	<form id="form-1" action="" method="post">
		<textarea name="info" cols="30" rows="10" data-form-id="form-1" class="inputs"></textarea>
	</form>
	
	<form id="form-2" action="" method="post">
		<textarea name="info" cols="30" rows="10" data-form-id="form-2" class="inputs"></textarea>
	</form>

abraham63 · Accepted Answer · 2018-02-27 11:24:29Z

3

Remove the " " on the line : formTo = "$('#" + formTo + "')"; in formTo = $('#' + formTo); because you build a String object and not a Jquery one so you try to submit a string and throw an error

answered Feb 27, 2018 at 11:24

abraham63

4434 silver badges18 bronze badges

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

Comments

Tipu · Accepted Answer · 2019-03-14 18:16:50Z

$('.inputs').on("input", function(){
	// get the data-form-id from this textarea
	var this_id = $(this).attr('data-form-id');
	// set the submit button's data-form-id attribute with the textarea's id
	$('#submitBtn').attr('data-form-id', this_id);
});
	
$('#submitBtn').click(function(){
	var formTo = $(this).attr('data-form-id');
	in formTo = $('#' + formTo);
	console.log(formTo);
	formTo.submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="submitBtn" data-form-id="" type="button" value="send">

	<form id="form-1" action="" method="post">
		<textarea name="info" cols="30" rows="10" data-form-id="form-1" class="inputs"></textarea>
	</form>
	
	<form id="form-2" action="" method="post">
		<textarea name="info" cols="30" rows="10" data-form-id="form-2" class="inputs"></textarea>
	</form>

Collectives™ on Stack Overflow

jQuery Uncaught TypeError: submit is not a function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related