I'm trying to keep track every time someone submits a name using data-name only. How do I alert the user to let them know that the contents were posted to the website or not and what other names have been submitted.
<div id="container">
<form method="POST" action="#">
<label class="large">Please enter your name
<input id="textbox" class="name" data-name="" pattern="[a-zA-Z0-9]{1-45}">
</label>
</form>
</div>
This is the JQuery I'm using:
//When the form is submitted
$("#form").submit(function(){
//get the value of the input
var input = $('#textbox').val();
//insert it into the data-name attribute
var name = $("#textbox").attr("data-name", input);
//Aler the user
$("input[data-name]").val(function(){
alert($(this).data('name'));
});
});
I think that your jquery selector is incorrect.
$("#form") means that it is targeting an element with the id of "form". In order to make that work, you would need to give your form element an id of form. E.g.
<form id="form" method="POST" action="#">
In order to alert the value of the textbox however, you do not need to put the value into a data-name attribute but instead get the value out of the form when submitting.
$('#myForm').submit(function(e){
alert(e.target.foo.value);
})
See the following fiddle, for an example:
https://jsfiddle.net/dgw3bw63/
Related
I'm trying to get data from an API and post it to a database, the form I have worked when you manually input data. but when you set the data from the API request - it updates on the page. Although shows blank when it posts.
I'm using
document.getElementById('Title').value = item.volumeInfo.title;
to get the "Value" in an Input.
and
<div class="form-group">
<label for="name">Authors</label>
<input class="form-control" type="text" value="" id="Author" ng-model="book.Author" required="required"/>
</div>
to attach to form.
<button class="btn btn-primary" ng-disabled="AddNewForm.$invalid ||
isUnchanged(book)" id="add-new-btn"
ng-click="New_Book(book)">Add</button>
Why is it submitting as blank?
Your form elements submit their value via their “name” attribute... does you input element generate a name attribute? If not, this is why it won’t work.
Eg
<input name=“foo” value=“bar”/>
Submits as:
?foo=bar
Your question isn't clear enough for me. But I've tried to make a quick example and make it as general as possible to let you work with your form inputs!
Here is a Live Preview
HTML
<form action="post" id="myForm">
<input type="text" id="title">
<input type="submit" value="Click To Update">
</form>
<h2 id="result"></h2>
JavaScript
// Select our main elements (form, text input, result heading)
const form = document.getElementById("myForm");
const titleInput = document.getElementById("title");
const result = document.getElementById("result");
form.onsubmit = function(e) {
// Don't refresh the page
e.preventDefault();
// Set the input value into the result heading
result.innerHTML = titleInput.value;
}
This solution allows you to write anything in your input, and after submitting your form. You can use that data elsewhere.
jQuery, input elements with the same data attribute value but one is hidden, fill in same data on keyup.
I have 2 forms on a page with dynamically created form fields from a database via .NET MVC.
I have one form visible and one form that is hidden.
I know how to copy, on keyup, the values from one form field to another IF I have known element classes or Id's. This is not the case on dynamically created fields. I can not guarantee that all fields will come back in the same order in each form.
So what I did was I created a 'data' attribute and output the "Model.Name" on the input field. In my case I am lucky enough that the 2 forms have fields with the same "Model.Name" values. So I am able to do a match on that. But since the forms are built dynamically I need a few things to happen and I need some pointers.
I need to know how to copy field inputted values from the visible form fields to their matching hidden form fields with the same "data" attribute value. I won't necessarily know the actual data-attribute value since the input fields are getting created dynamically.
How would this work to get the matching form fields.
I have a basic JS Fiddle set up.
https://jsfiddle.net/mb91ktbg/6/
HTML
<!--I know the class of the wrapping form -->
<!--All data values are dynamic, so I don't know then on page load-->
<div class="masterFieldWrapper">
<!--Need to copy these input values to the sub field wrapper input values-->
<label>Field one</label>
<input type="text" data-myattribute="dynamicvalue" />
<label>Field Two</label>
<input type="text" data-myattribute="dynamicvalue2" />
<label>Field Three</label>
<input type="text" data-myattribute="dynamicvalue3" />
<!--I know the class of the sub field wrapper-->
<!--I would like to copy the inserted values from the parent wrapper fields to the sub field wrapper fields with the same data-myattribute value-->
<!--I can not assume the fields come back in the same order. This is why I need to use the data attribute value-->
<div class="subFieldWrapper">
<label>Field One</label>
<input type="text" data-myattribute="dynamicvalue" />
<label>Field Two</label>
<input type="text" data-myattribute="dynamicvalue2" />
<label>Field Three</label>
<input type="text" data-myattribute="dynamicvalue3" />
</div>
</div>
jQuery Started but not working. need some help please.
$(".masterFieldWrapper input").each(function() {
var fieldVal = $(this).val();
var fieldDataAttr = $(this).data("myattribute");
console.log(fieldDataAttr);
$(this).keyup(function() {
$(this).parent('.masterFieldWrapper').find(".subFieldWrapper input").data("myattribute").val($(this).val());
});
});
Don't know if this would help but, you could dynamically add a class or id to the element and then access like so:
$(".bodyWrapper").on("change", ".form-control", event => {
let value = $('.dynamicValueInput').val();
$('.dynamicValueInputCopy').val(value);
console.log(`body-input-has-changed`);
});
//Try this :)
var mainForm = $(".masterFieldWrapper");
var Input_type = $("input[type='text']");
var Totalinputs = mainForm.find(Input_type).length;
var Visible_inputs = Totalinputs/2;
var auto_fulfill = function(){
for(i=Visible_inputs; i<Totalinputs;i++){
Input_type.eq(i).val(Input_type.eq(i-Visible_inputs).val());
}
}
Input_type.keyup(function(){
auto_fulfill();
})
i'm trying to add value of a div into the URL, then submit the form using GET so i can retrieve the data from the URL to display on my result page. But i'm not sure how to do that.
For example:
Code:
<form action="Receipt.html" method="GET">
<input type= "text" id="Name" name="txtName"/>
<div id="total">30</div>
<input type="submit" value="Purchase" class="submit"/>
</form>
I need to pass the value of "total" along with Name to the URL when user hit submit button.
I hope that make sense. Thank you very much!
With use of jquery we can do this. Try this one...
Html:
<form action="Receipt.html" method="GET">
<input type= "text" id="Name" name="txtName"/>
<div id="total">30</div>
<input type= "hidden" id="txttotal" name="txttotal"/>
<input type="submit" value="Purchase" class="submit"/>
</form>
Javascript: in document ready function
$('#txttotal').val() = $('#total').text();
In next page you can get txttotal
You can get your url from form by using:
var url = $("form").attr("action");
// add value
url+= "?divValue=" + $("#total").html();
// then you use jquery/ajax get as you planed.
if your value in div is fixed or changes once so you can directly place in action, like
<form action="Receipt.html?total=30" method="GET">
Also, using ajax will be a better option if value changes with some changes in form.
I want to change form post data before send. i use some java script code to get some user inputs and want to attach those to request post data.
I wanna a normal post that cause to display result as a an HTML page.
its may be useful that i linked JQuery and can use its functions.
Thanks very much!
You can use onSubmit event as shown below -
<form action="test.php" name="testform" onSubmit="return TestDataCheck()" >
<input type="text" value="hello" name="testinput" />
<form>
Define a function as shown below -
<script type="text/javascript">
function TestDataCheck(){
//Here do whatever you want to do with the form or it's values.
//I am changing the value of input field in the form for your reference in same way you
//can change any elements value.
$('input[name="testinput"]').val("bye");
return true.
}
</script>
html
<form action="test.php" name="testform" id="testForm">
<input type="text" value="hello" name="testinput" />
<form>
javascript
//handle form submit
jQuery("#testForm").submit(function(e){
//prevent default action
e.preventDefault;
//get form
var _data=jQuery("#testForm").serialize();
//add custom props
_data['customProp1']='customValue1';
_data['customProp2']='customValue2';
//now just submit form or call ajax
});
I have an html form that I would like to add inputs fields to using javascript. Originally I had the input fields by themselves underneath the 'body', and the following was able to add the fields:
// Create number input field
var phoneInput = document.createElement("INPUT");
phoneInput.id = "phone" + instance;
phoneInput.name = "phone" + instance;
phoneInput.type = "text";
// Insert that stuff
document.body.insertBefore(document.createElement("BR"), element);
document.body.insertBefore(phoneLabel, element);
document.body.insertBefore(phoneInput, element);
I then added a 'form' element around the original inputs in the html file.
<body>
<form action=searchform.php method=GET>
<LABEL for="phone1">Cell #: </LABEL>
<input id="phone1" type="text" name="phone1">
<input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
</form>
</body>
Now the button doesn't add new text boxes. Have I structured this incorrectly?
Thanks!
This is because you are appending the elements to the body, which means that insertBefore cannot find element (because it's in the <form>, not the <body>), so it never gets inserted.
A quick way to fix this would be to use document.body.firstChild.insertBefore. However, if the form is no longer the first element in the body, this will no longer work.
A cleaner, better way would be to give your form an ID (e.g. <form id="myform">), and then access the form using: document.getElementById("myform").insertBefore. Then you can place your form anywhere, and it will still be accessible using the ID.
Easiest would be to use jQuery. Add an ID to your form, for easier reference:
<form id="myform" action="action" method="GET">
<input type="hidden" name="a" value="1"/>
<input type="hidden" name="b" value="2"/>
</form>
<script type="text/javascript">
$("#myform").append('<input type="hidden" name="c" value="3"/>');
</script>
You can later change the value of your new input, by easily referring to it:
$("#myform input[name='c']").val(7);
Gve the form an id
<form id="myForm" action="searchform.php" method="GET">
Create the JavaScript elements just as you used to, then you can just add the elements like so:
var f = document.getElementById('myForm');
f.appendChild(document.createElement('br'));
f.appendChild(phoneLabel);
f.appendChild(phoneInput);
(insertbefore would work on f as well, although I think this is more readable.)