I need to write data to two api tables using a form. One writes to one table, and one action writes to another. However, since this is in the same page, I want only one submit button and I know its impossible to have two different actions. But at the same time, I know in order to use two different forms I need AJAX and for my first form in the following code, I can't do anything but I want to know how I use AJAX to post the following forms to two different tables using multiple actions. So can someone tell me exactly how I can do that?
<div id="login">
<div id="triangle"></div>
<h1>Opt in</h1>
<form method="post" action="http://<ipaddress>/api/table1">
<input type="user_email" name = "user_email" placeholder="Email" />
<input type="user_name" name = "user_name" placeholder= "Your name" />
<input type="user_skills" name = "user_skills" placeholder="Skills" />
<input type="user_bio" name = "user_bio" placeholder = "Biography" />
<input type= "user_other" name = "user_other" placeholder = "Other Information" />
</form>
</div>
<div id="whitelist">
<h1>Register</h1>
<form method = "post" action = "http://<ipaddress>/api/table2">
<input type = "device_id" name = "device_id" placeholder = "Device ID" />
<input type = "device_description" name = "device_description" placeholder = "Describe your Device" />
<input type = "device_name" name = "device_name" placeholder = "Type of Device" />
<input type = "submit" value = "Submit" />
</form>
</div>`
okay there's gonna be a lot of work, I'll try to explain it in a way that you can easily understand:
HTML:
in order to do an ajax call you'll not need a form, so you may as well remove it or at least remove the action and method attributes from it:
<div id="login">
<div id="triangle"></div>
<h1>Opt in</h1>
<form>
<input type="user_email" name = "user_email" placeholder="Email" />
<input type="user_name" name = "user_name" placeholder= "Your name" />
<input type="user_skills" name = "user_skills" placeholder="Skills" />
<input type="user_bio" name = "user_bio" placeholder = "Biography" />
<input type= "user_other" name = "user_other" placeholder = "Other Information" />
</form>
</div>
<div id="whitelist">
<h1>Register</h1>
<form>
<input type = "device_id" name = "device_id" placeholder = "Device ID" />
<input type = "device_description" name = "device_description" placeholder = "Describe your Device" />
<input type = "device_name" name = "device_name" placeholder = "Type of Device" />
<input type = "submit" value = "Submit" />
</form>
</div>
jQuery:
before we get to the jQuery code, I suggest you read a bit about jQuery-AJAX.
now let's get to the interesting part of the code:
on the click event of the submit button we call the ajax and send the values to the correspondent tables as defined below:
$(document).on('click','input[type=submit]',function(e){
e.preventDefault();
$.ajax({
type:'post',
url:"http://<ipaddress>/api/table1",
data:$('form:eq(0)').serialize(),
success:function(resp){
alert('first table sent');
},
fail:function(resp){
alert('couldn\'t send the first table');
}
});
$.ajax({
type:'post',
url:"http://<ipaddress>/api/table2",
data:$('form:eq(1)').serialize(),
success:function(resp){
alert('second table sent');
},
fail:function(resp){
alert('couldn\'t send the second table');
}
});
});
NOTE:
this may not entirely work as expected, since there might be a variety of possibilities to make this go wrong, that's actually why I suggested you reading about jQuery-AJAX beforehand. although you can always ask any follow up questions again here at StackOverflow.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments