So I have a form with some vue.js data like
<div class="form-group">
<label class="form-label" for="field_description">Ontology Version</label>
<input type="text" name="ontology-version" class="form-control" disabled :value="ontology">
</div>
When I submit the form by clicking the submit button, there's no data for the ontology-version in the POST request.
I have a submit button like this <button type="submit" class="btn btn-primary ml-auto">Save</button>
Also, When I inspect the element on chrome, I see that no value is set
As said in comments and previous answer if you submit disabled input field .It wont be sent when request is made so pass it as readonly if you are intend to send this value.
<div class="form-group">
<label class="form-label" for="field_description">Ontology Version</label>
<input type="text" name="ontology-version" class="form-control" readonly :value="ontology">
</div>
Disabled input fields are not sent when the request is made.
This is by design, so you can filter fields out.
Related
I have a table in my view that is getting populated from the DB.
<td class='schedule-td' id='vname-<%=index%>'><%=name%></td>
<td class='schedule-td' id='vphone-<%=index%>'><%=phone%></td>
<td class='schedule-td' id='vmeal-<%=index%>'><%=mealDesc%></td>
Each row has the above 3 fields plus a button and when the button is clicked a pop-up comes up where the user can enter that info, if its empty and then I need to update the data on the DB for that entry.
The pop-up is a form which gets submitted to a post route at the pop-up itself.
<div class="popup-div hide" id='volunteerDiv'>
<form action="./<%= id %>" method="POST">
<input type="hidden" name="userID" id='userID'>
<h5 class='header'>Please enter your details</h5>
<div class="input-group">
<label for="name">name:</label>
<input type="text" name="name" id="name">
</div>
<div class="input-group">
<label for="phone">phone#:</label>
<input type="text" name="phone" id="phone">
</div>
<div class="input-group">
<label for="desc">Meal</label>
<input type="text" name="desc" id="desc"
placeholder="What will you be bringing?">
</div>
<button type="submit">Submit</button>
</form>
</div>
The thing is I need to know which row or entry needs to be updated at the moment what I am doing is storing the _id from mongo in a data-attribute on each button and then when the button is clicked I pass that value to the hidden field on the form and submit the form.
Button
<td class='td'>
<button class='btn' id='addBtn-<%=index%>'
data-user_id='<%= userID %>'>Add</button>
</td>
JS
userID.value = event.target.dataset.user_id;
For some reason though I feel like im doing this incorrect and too convoluted and like maybe its violating the MVC principles by having the DB id value in the html.
Also that the id from the db can be seen in the dev tools seems bad to me.
Is there a better way of knowing/identifying what db entry the table row that is being interacted belongs to and sending that to the back-end???
Ive thought of using the index of the row to match to the index of the db which would help with not showing the id from the DB in the view or handling the post with Javascript but both methods still seem like they would be missing something.
I'm trying to reset the values of the fields after sending the data. Does anyone have a hint how can I clear the fields using javascript?
<div class="form-group">
<label>Código da Matéria</label>
<input required class="form-control" type="text" name="codigoMateria"/>
</div>
<div class="form-group">
<label>Nome</label>
<input required class="form-control" type="text" name="nome"/>
</div>
</div>
<div class="row text-left">
<div class="col-md-4 col-md-offset-4">
<button type="button" class="btn btn-primary btn-block">Salvar</button>
Like Jaromanda said there is a reset method for form elements.
To use it you will need to already have a correct form. Then you’re talking about sending the data. For this you need a submit button.
After this to reset your content you can bind the submit event with a function which use the reset method for your form.
here is a fiddle: https://jsfiddle.net/r56nvn51/1/
If you use the input element with the submit type attribute it will send the data and the reset the page which resets the inputs.
Aside from doing that you will need to add some script.
And you do not need the type in your button element.
I have one registration form in my site in which I am saving fields and after saving the form when user again come back to that registration form I want previous field values to be saved in browser auto-fill.
below is my code snippet -
<form class="clearfix">
<input autocomplete="given-name" name="firstName" type="text" placeholder="Enter First Name" class="form-control" value="">
<input autocomplete="family-name" name="lastName" type="text" placeholder="Enter Last Name" class="form-control" value="">
<input autocomplete="email" name="email" type="text" placeholder="Enter Email" class="form-control" value="">
<input autocomplete="tel" name="phoneNumber" type="text" placeholder="Enter Number" class="form-control contactMask" value="">
<input autocomplete="address-line1" name="addressLine1" type="text" placeholder="Street 1" class="form-control">
<input autocomplete="address-line2" name="addressLine2" type="text" placeholder="Street 2" class="form-control" value="">
<a href="javascript:void(0);" className="btn baseBtn primeBtn" onClick={this.signupUser}>Sign Up</a>
</form>
In this code onClick of anchor tag I am doing ajax call via signup user function.
and after that i want that users data to be auto filled in browsers autofill address in chrome.
I have tried below ways : -
1.Few people suggested to use form "submit" button functionality to save data in autofill rather than having ajax call form anchor tag onClick event.
but that is also not working in my case.
2.I have gone through few post in which they told to use proper name and autocomplete attribute for field. but by using that browser can only guess proper field values .
I am answering my own question.
Actually,I just ignored that I am not directly submitting my form.
On backend we are using grails and using it just for REST API's.
on frontEnd we have react.js but request and response are getting served from Nginx .
So form is not getting submitted to grails that's why on form submit data was not getting saved in browser autofill.
Here is my form,
<div id="myForm">
<form method="post" id="contact-form" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<div class="row uniform">
<div class="6u 12u$(medium)">
<input type="text" name="fullname" id="fullname" value="" placeholder="Enter your full name" required />
</div>
<div class="6u 12u$(medium)">
<input type="email" name="email" id="email" value="" placeholder="enter your email address" required />
</div>
<div class="6u 12u$(medium)">
<textarea name="comment" id="comment" value="" placeholder="Enter your message" ></textarea>
</div>
<div class="6u 12u$">
<ul class="actions">
<li><input type="submit" value="Submit" class="special" /></li>
</ul>
</div>
</div>
</form>
</div>
I want to replace form with, thank you for submitting on selecting the submit button, at the moment It just refreshes the page and does not replace the form, I don't want it to refresh the page I want it to just submit and fade in a message saying thank you for submitting your details.
here is my jquery
<script>
$("#contact-form").submit(function(){
$("#myForm").html("thank you for submitting your details.");
});
</script>
Please can you help?
We have to create a ajax call in order to submit without refreshing the page:
$("#contact-form").submit(function(e) {
e.preventDefault();
$.post($(this).attr('action'), $(this).serialize());
$("#myForm").html("thank you for submitting your details.");
});
https://jsfiddle.net/u2gyocj7/1/
Take a look in the network tab to display the POST data
In that case you will want to look at using ajax form. If you submit as it is then it will post back and refresh the page. Ajax will post the data without changing anything on the page.
http://api.jquery.com/jquery.post/
jQuery AJAX submit form
Then, once the data has been sent you can manipulate the DOM as you wish. This will also allow you to show different messages based on whether the data was saved correctly or not, if done correctly.
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.