Send two variable with send()

[lurtnowski]

I have a form,

when I press the add power button, Im trying to get the values of both select boxes.
But only 1 seems to go through

my form

<form method="post" action="add_power_1.php">
<h4 class='mt-4'>Plug #1</h4>
<hr>
<div class="row">
<div class="col">
<label for="ps1">Power Strip:</label>
<select class="form-control" id="ps1" name="Power_Strip1"><option value="">Select</option><option value="1">3Com, J58890CH1L1</option>
<option value="">N/A</option></select>
</div>
<div class="col">
<label for="out1">Outlett Placement:</label>
<select class="form-control" name="power_strip_position1" id="out1">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">#</span>
</div><option value="">Select</option>
</div></select>
</div><div class="col" id="result_1">
<button type="button" class="btn btn-outline-dark btn-block btn-lg mt-4" id="plug_1" ><span class="icon-bolt"></span>&nbsp;&nbsp;Add Power</button>
<input type="hidden" name="network_standard_id" value="1">
</div>
</div>
</form>

heres where I use send()

      xhr.send("Power_Strip="+document.getElementById('ps1').value
	  ,"0utlett_Placemen0="+document.getElementById('out1').value);

[Thallius]

It’s long ago I used xhr because there are much better alternatives since decades but if I remember right send is not accepting multiple arguments but you have to merge the arguments in one string

xhr.send("Power_Strip="+document.getElementById('ps1').value+"&0utlett_Placemen0="+document.getElementById('out1').value);
``ˋ

[mabismad]

@lurtnowski

      xhr.send("Power_Strip="+document.getElementById('ps1').value
	  ,"0utlett_Placemen0="+document.getElementById('out1').value);

Don’t write out code for every possible field. If you had 30 form fields, would writing out (copy/pasting/overtyping) that code 30 times make sense?

Instead, use a general-purpose method that will get all the successful form field values at once, including file uploads, and will work for any number of forms on a page. Create a FormData object that references the current form that was submitted.

Add the following to any input or button that you are using to submit the form (or add an event listener to the page for the same element(s) to call the submit_form() function) -

onclick="return submit_form(this.form);"

And here’s a version of the submit_form() javascript function that happens to use a XMLHttpRequest object -

<script>
function submit_form(e)
{
	// get all the 'successful' form data from the current form
	var formData = new FormData(e);
	
	// setup the ajax request
	var xhr = new XMLHttpRequest;
	xhr.open("POST", "save.php");

	// display the text reply
	xhr.onreadystatechange = function() {
		if(xhr.readyState==4) {
			alert(xhr.responseText);
		}
	}

	// make the ajax request
	xhr.send(formData);
	
	// prevent the form from being submitted a second time
	return false;
}
</script>

[dennisjn]

Long time since I did this type of form, but if the button is a submit button the form will be sent to the add_power_1.php file in the $__POST super variable.
It may need to be

<input type = "submit" > 

rather than a button.