CODEWITHSUNDEEP
jqueryhtmlform-submit
Melvin
Melvin

Reputation: 339

jQuery Uncaught TypeError: submit is not a function

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>

Upvotes: 0

Views: 1082

Answers (2)

Tipu
Tipu

Reputation: 11

$('.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>

Upvotes: 1

abraham63
abraham63

Reputation: 443

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

Upvotes: 3

Related Questions