Identifying which form sends the POST method - javascript

I have been trying to achieve something so that when I receive the POST I know which form sends it
I checked the form attributes and it doesn't seem to be able to have an ID or something similar, I can't think of anything functional inside the router.post() either and what little I have come up with hasn't worked
This is the form
<form action="/dashboard/" method="POST">
<div class="form-group">
<button class="btn btn-success">Do!</button>
</div>
</form>
I want to know if the FORM that sends the post is that one.
This is the way I receive the POST in its respective .js file
router.post("/", async (req, res) => { . . .
I have tried testing some things with req, without any luck
As a little relevant information, I'm using Bootstrap 5, I don't have my own styles or classes.

Add a hidden input field to the form like
<input type="hidden" id="formName" name="formName" value="myDashboardForm">
Then access the "formName" inside the POST variables on the Backend.

A simple approach would be to include a hidden input
<form action="/dashboard/" method="POST">
<div class="form-group">
<button class="btn btn-success">Do!</button>
</div>
<input type="hidden" id="formId" name="formId" value="formType1">
</form>
Then you should be able to get the formType in req.body.formId

Add the input field to be hidden and acess using the form id
<form action="/dashboard/" method="POST">
<div class="form-group">
<button class="btn btn-success">Do!</button>
</div>
<input type="hidden" id="formId" name="formId" value="formType1">
</form>

Related

How to get the data in flask from the HTML input with changing the url of website

I have a input box in HTML and what I want is to get the data that get input in that box when button is clicked. I know how to get data from the form
ex = request.form['example'];
I want to get the data in flask just like above but for the input box which look like this -
<div class="form-inline" id="inputDiv">
<center>
<input class="form-group" id="msg-content" autocomplete="off" placeholder="Send a message" />
<button class="btn btn-lg" onclick="sendMsg()" id="sendBtn"><span class="glyphicon glyphicon-send"></span></button>
</center>
</div>
If you want a form to return data you normally want to put it inside a <form> element.
This tells the browser that it should return the inner elements when the form is submitted by a button with the attribute type="submit". You should give the input attribute name="example" in order to retrieve it in flask. I'm not sure what javascript you are calling with the sendMsg() function, but I am guessing that a <form> element is your best solution. Something like this:
<form action="/url/to/send/form" method="POST">
<center>
<input class="form-group" name="example" id="msg-content" autocomplete="off" placeholder="Send a message" />
<button class="btn btn-lg" type="submit" id="sendBtn"><span class="glyphicon glyphicon-send"></span></button>
</center>
</form>
Then you should be able to retrieve in flask as you describe in your post.
Create your route
#app.route('/yayform',methods = ['POST', 'GET'])
def yayform():
if request.method == 'POST':
result = request.form
return render_template("result.html",result = result)
Making sure to add form action to your HTML,
<form action="http://localhost:5000/yayform" method="POST">
You need to wrap your HTML in a form, something like:
<form id="inputDiv" method="post" action="/your_action">
<!--- Your HTML input and button here --->
</form>
Note method="POST" and action="/your_action" .
method="POST" indicates you are initiating an HTTP Post request to a new page.
action="/your_action" is the URL you want to redirect to. You'll have to replace that with your URL.
To touch on the previous answer, I don't recommend putting "http://localhost:5000" in the action as 1. it is unnecessary and 2. it may not be correct depending on how you're running your application, e.g, if you're running on a port that's not 5000.
In the python code behind:
#app.route('/your_action', methods = ['POST'])
def yourRoute():
#Your code here

How do I access $valid on an Angular Form inside an ng-repeat?

Edit:
As demonstrated in the plunker by Wayne Ellery, the second code sample does actually work. The error was somewhere else in the page.
http://plnkr.co/edit/rtmwOzhiWn0695OGwS9b?p=preview
Original
I'm trying to disable the 'submit' button on a form using AngularJS, however I run into trouble if the form is inside an ng-repeat.
This following code works fine:
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form>
however this doesn't, even if there's only one item in the array:
<div ng-repeat="item in data.Items">
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form>
<div>
Presumably this is because the name of the form is somehow altered by the repeat. I saw a post which suggest adding {{$index}} to the form name
AngularJs dynamic name for a form inside ng-repeat
But if I do this I'm not sure how to then access the form name within the ng-disabled tag - obviously this won't work:
<div ng-repeat="item in data.items" ng-init="formName = 'myForm' + $index">
<form name="{{formName}}">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="{{formName}}.$invalid">Save</button>
</form>
</div>
How do I access the correct form to check the validation of the current form?
I'm not sure what the error in my code actually was, but after deleting the ng-repeat and then re-typing the whole thing it now just works as expected, so I'll put an answer here for clarity.
As pointed out by pankajparkar and WayneEllery in the comments, the correct syntax for accessing $valid inside an ng-repeat is simply:
<div ng-repeat="item in data.Items">
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form>
<div>

Input value from different form

I have two forms on my page...
<form method="post" action="">
<input type="text" name="name" id="name"/>
<input type="submit" name="form1_submit_pushed"/>
</form>
<form method="post" action="">
<input type="submit" name="form2_submit_pushed/>
</form>
On my php side I want to be able to know the value of the text input "name" when I push the submit button of the second form. Kind of like....
if(isset($_POST['form2_submit_pushed']))
{
echo $_POST['name']; //or something else?
}
The reason behind is that first form has a bunch of data that I don't want in the second form submission.
You could do something like this...this code uses jQuery:
<form id="form1" method="post" action="">
<input type="text" name="name" id="name"/>
<input type="submit" name="form1_submit_pushed"/>
<input type="hidden" name="form2_submit_pushed" id="form2_submit_pushed">
</form>
<form id="form2" method="post" action="">
<input type="submit" name="form2_submit_pushed"/>
</form>
<script>
$('#form2').submit(function(event) {
//prevent form2 from submitting and submit form1 instead...
event.preventDefault();
//before submitting, indicate that the "form2_submit_pushed" button was pushed
$('#form2_submit_pushed').val(true);
//submit form1
$('#form1').submit();
});
</script>
...but why you would want to I don't know. Why not make all the controls part of the same form? HTML is designed to send info from only one form (at a time) to the server...
UPDATE: Sorry, I didn't notice your line where you explain your reason for wanting to do this. If you want more explicit control over what gets sent to the server I recommend using AJAX to submit the form. Look at https://api.jquery.com/serializeArray/ and https://api.jquery.com/jQuery.ajax/
Correct me if I am wrong here, but I beleive normal HTML will only post the inputs from the form you are posting from. One option would be to have a hidden input on the second form which gets updated via javascript during the input's change event.
So, you could do something like this (I don't recommend inline javascript but it should get you in the right direction):
<form method="post" action="">
<input type="text" name="name" id="name" onchange="document.getElementById('hiddenname').value=this.value"/>
<input type="submit" name="form1_submit_pushed"/>
</form>
<form method="post" action="">
<input type="hidden" name="hiddenname" id="hiddenname"/>
<input type="submit" name="form2_submit_pushed/>
</form>
Then you just need to get it using
$_POST['hiddenname'];

How do I post values obtained from an html form to an URL using javascript?

I'm new to html and JS and I have a form with a few fields that I need posted to a URL.
<form>
<div>
<label style="font-size:16px" for="title">Title:</label>
<input type="text" id="title" maxlength="128"/>
</div>
<div>
<label style="font-size:16px" for="description">Description:</label>
<textarea id="description" maxlength="1999"></textarea>
</div>
<div>
<label style="font-size:16px" for="idnumber">IDNumber:</label>
<input type="number" id="idnumber"/>
</div>
</form>
I need the values entered into this form to be posted to a URL that already knows how to process the input. I'm sure this is easy to do but I'm new and I'm having trouble finding a solution. Apologies for any incorrect terminology. Thanks!
You can use the action attribute:
<form action="some/url" method="post">
<!-- ... -->
<input type="submit" value="Submit" /> <!-- Submit button -->
</form>
You have to add an action to your form tag that points to a server side script.
<form action="myscript.php" method="post">
Alternatively, you can use JavaScript to post it as an AJAX request which submits the request without a page refresh.
I'd say you're on the right track. This would be perfectly easy using basic HTML: Add an action="mySubmitPage.php" to the form element. It sounds like you want to do it without refreshing/changing the page, though (at least, that's how it sounds by "with Javascript")
That will involve an "asynchronous" submit. The fancy term is "AJAX". That part can be a lot easier using some form of Javascript framework, especially if you want to support all browser quirks. Here's an example of doing it using JQuery, for instance:
jQuery - Send a form asynchronously

html form trying to http get when a button is pressed

Ive got a html form with a few select lists and a text box in it. I also have a submit button which is outside of the form. The reason for this is I want to construct the parameters myself, as I dont want the content of all of the select lists. The problem I am having is, that when I press my submit button,The form automaticly trys to redirect to the same page, but with a ? at the end with all the contents of the form. I am also having problems where window.location.href is not working inside the submit() javascript method, but I am not sure if this is caused by the form issue or not. Example code:
<form>
<input name="cName" type="text" class="input-xlarge" id="input01" placeholder=
"Enter title" />
<div class="control-group">
<hr />
<label class="control-label" for="select01">Select box 1</label>
<div class="controls">
<select id="select01" name="type" onChange="reportModification(this.value)">
<option>One</option>
</select>
</div>
</div>
</form>
<button class="btn btn-primary" onClick="next()">Next</button>
This is not the exact code from the page, just a replica.So it might not be valid html in some places. Thanks for the help :)
The reason you get parameters in the url is that a get request is used instead of a post request. you should use:
<form method="POST" action="">
Also why is your button outside the form? you could have this instead:
</div>
<input class="btn btn-primary" type="submit" value="Next" onClick="next()" />
</form>
I think your button has to be inside the form element. You could use an onsubmit in the form element to intercept the form before it gets sent to the server. Here you could manipulate the values before they go. You would also need an action attribute in the form. If your function returns true, the data will be submitted, false and it won't.

Categories

Resources