Selecting the value of a form element on submit with jquery

JavaScript
1

I am new-ish to javascript and jquery, and not so great at html either.

I am trying to get a form field value, but there are a few catches.

The form is more complicated than this (so an answer shouldn’t be unique to this form), but these are the basic features:

(There are several extra inputs to the form not featured.)

<form class="promote_person" id="promote_person" name="promote_person" method="POST" action="(my site url)">
				
	<input type="hidden" name="url" id="url" value="(my url)" />
	
	<button type="submit" class="button" name="promote_person_button"  id="promote_person_button " value="promote_person_button ">Promote Person</button>
</form>

I want to collect a specific input field on the form, “url”, when it is submitted. Here is my code:

<script>
$(document).ready(function() {

var my_form = $('#promote_person);
		
	my_form.submit(function (ev) {
			// none of these worked for me or are incomplete in someway			

			var url1 = my_form.val(url);
						
			var url2 = my_form.valueOf('url');
						
			var values = $(this).serialize();
			
									
			// this did work, but I am afraid it may capture the wrong element since it relies on an ID, so it may capture the wrong url field in another form.
			var url3 = $("#url").val(); 
			
			// I couldn’t figure out how to access the form element I wanted with this. It also seemed a very roundabout way of getting to it.
			var serialized_form_data = my_form.serialize();			
			var url4 = serialized_form_data['url']; // did not work
			
			// This shows in console.log as [Object, Object, Object, Object, Object] and I can’t figure out what the contents of the objects are
			var serialized_array = my_form.serializeArray();
			
		
			
			
			var jsonstringify = JSON.stringify($this.serializeArray);
			var url7 = jsonstringify["url"];
			var url8 = jsonstringify.url;
			var url9 = jsonstringify[0];
						
			ev.preventDefault();
		});
});
</script>

This form is repeated multiple times on the same page. Each form has the same ID. The form is auto-generated alongside a user’s name in an admin interface so that an admin can see a list of users to promote and do so in one click. It works, but it doesn’t seem like best practice to have multiple identical IDs on the same page

I could generate the forms with different IDs in the back end, but I wouldn’t know how to use javascript/jquery to catch it if I can’t specify an ID. I didn’t think it mattered as long as js/jq was using the contents of the form the user is actually submitting, but I don’t know if this is the best practice.

Can someone please tell me the correct way to do this, and possibly what went wrong in the above examples? I am having a very hard time here due to unfamiliarity, and spending a great deal of time of searching stack overflow for clues and answers. I don’t usually do this sort of work, so even debugging is hard for me.

I can see in firebug that the form elements I want to capture are there when I console.log the jquery capture (my_form) but I don’t know how to access them.

Any advice on best practices or other errors I am making would be helpful, too.

2

You have some typos in your code. E.g.

var my_form = $('#promote_person);

This is also a problem you need to address. IDs must be unique to a page. It sounds like you need to use a class.

Try this:

<form class="promote_person">
  <input type="hidden" name="url" value="http://example.com" />
  <button type="submit">Promote Person</button>
</form>

JavaScript (placed at the bottom of the page):

var $myForm = $(".promote_person");
$myForm.on("submit", function(e) {
  e.preventDefault();
  console.log("The url is: " + this.url.value);
});

If you want to submit the form after doing whatever, you can use this.submit();

1 Like
3

Thanks for the example and comments. I’ll give this a try and see how it works.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.