Situation
I have a form
<form action="." method="POST" id="my_form">
<!-- Form stuff here -->
</form>
<p onclick="confirmUpdate();">Update</p>
The confirmUpdate() function generates a confirmation message and the following input tag:
<input type="submit" name="my_name" value="Yes. Update the data.">
using the following JavaScript:
inputYes.type = 'submit';
inputYes.name = 'my_name';
inputYes.value = 'Yes. Update the data.';
inputYes.form = 'my_form';
The page is created as intended, but the input element has no form="my_form" on it.
Condition
The HTML generated with Javascript has to be shown as a nice "HTML pop-up" (not an alert box) to ask the user if the info is correct before submitting.
Questions
Why isn't it working?
The JavaScript generated HTML doesn't appear on the Page Source. Will it be able to submit the data from the form?
Thank you in advance.
You should use setAttribute instead:
inputYes.setAttribute('form', 'my_form');
If the goal is to get your input button to work, then inside your method confirmUpdate(), make the following additions/changes:
Updated fiddle here: http://jsfiddle.net/B7QAc/4/
//add this
var theform = document.getElementById('my_form');
//change this
document.body.appendChild(screenDiv);
//to this
theform.appendChild(screenDiv);
While the previous answers were correct, I found a better solution for my problem. I had to update the question in order to make it more clear. The HTML generated with Javascript was intended to show as a nice "pop-up" to ask the user if the info is correct before submitting.
Therefore, the <input> tag has to be outside of the <form> and reference its id="my_form" via a form="my_form attribute.
Here is the updated JSFiddle for it.
While inputYes.form = 'my_form'; doesn't add the form attribute, inputYes.setAttribute('form', 'my_form'); does the job.
Notice though that it only works at the end of the script, only after it is appended to the HTML Document. It would not work otherwise (at least in this script).
Even though I lack the technical knowledge to explain it better, those are my observations.
This would be the accepted answer. I will promptly accept any other answer that is more complete than this one.
Related
I have a multi-part form, and I was hoping to have an external next/prev navigation for it. However, I need to be able to validate each part of the form when I navigate to next.
I have the following sample form definition:
<form layout="column" name="nProfileForm1">
<md-input-container>
<label>City</label>
<input ng-model="profile.city" required="" name="nCity">
<div ng-messages="nProfileForm1.nCity.$error" ng-if="nProfileForm1.nCity.$touched&&!nProfileForm1.nCity.$valid">
<div ng-message="required">City is required.</div>
</div>
</md-input-container>
</form>
If the field is interacted with,then validation is working find and error text is correctly shown. However, I cant figure out a way to trigger the validation of all the form fields if external event takes place. It seems somewhat wrong to add own submit button to every form part. What I am looking for is something similar to what schema-form does:
$scope.$broadcast('schemaFormValidate')
Any ideas would be appreciated.
Essentially, int he following example I want the field to light up with red once I press next:
http://codepen.io/Vladimir_M/pen/OWEjOd
UPDATE: updated codePen to include one solution that I've found.
After some attempts I've found one way to achieve the effect I was after with minimal code. Getting the form's scope and setting the form's $submitted property to true does the trick. It evaluates the entire form.
$scope.doSubmit = function(){
var formScope = angular.element(nProfileForm1).scope();
formScope.nProfileForm1.$submitted = true;
}
Feel free to suggest better ways.
today I started learning JavaScript and I want to calculate two numbers from a text field, using JavaScript. I want to display the result as HTML on the website itself. When I use a form to submit the values, it keeps resetting my modified HTML (the result section shows the actual result for a second but keeps switching back to the default value).
This does not happen when using a button. But since I want to add radio buttons to choose from a mathematical operation, I'd prefer a form (I'm also not quite sure how to determine which radio button is checked via JS).
this is my HTML-Form
<form name="calcForm" onsubmit="calc(num1.value, num2.value)">
<input type="text" id="num1">
<input type="text" id="num2">
<input type="submit" value="submit">
</form>
This is my resolution-section (which resets when using a form)
<div id="calcRes" style="display:block;">Lorem ipsum dolor sit amet</div>
The actual JavaScript function
function calc(num1, num2) {
var res = Number(num1)+Number(num2);
document.getElementById('calcRes').innerHTML = "Result is " + res;
}
As I said above, the result is being displayed when using a button instead of a 'form'
<button onclick="calc(num1.value, num2.value)">Calculate</button>
I'd like to know why the modified HTML switches back to default, a solution how to avoid this and if there's any "bad practice" in my code. I've also tried to search for this issue but I can't find anything. I guess, this is just a noobish problem but as I said, I'm a complete beginner so please be patient with me.
The form is being submitted and hence the page is being reloaded. To avoid this you need to prevent the form' submission. In your case
<form name="calcForm" onsubmit="calc(num1.value, num2.value); return false;">
should do the trick.
<form> onsubmit default functionality is to submit the form information to the server and resets the page on click of the submit button.
In the above code, on click of the form submit, the function calc is called, but it also resets the page after the function is called, which is why the modified HTML switches back to default.
This default behaviour can be prevented by using event.preventDefault() which cancels the event if it is cancelable. Adding this line to the start your calc function would prevent the default behaviour.
Refer to MDN Docs for more information about event.preventDefault()
You could simply squeeze in the line
document.getElementById("calcForm").reset();
after the line
document.getElementById('calcRes').innerHTML = "Result is " + res;
But you have to add the id="calcForm" to your <form> Tag.
The submit-Action is to understand as simply ending all the user input and do something with it. And after that, you don't need you inputs anymore so it will be deleted automatically. With the button-click, the form does not know that you are actually done with your input. its just a button-click. so it will leave the input as it is.
I need to send a javascript String to a php file when it's called. I am aware of the server-side/client-side relation, but I'm guessing this case is a bit different.
The purpose of this website would be for an user to insert values on INPUT tags (many of them) and have them sent via email through PHPmailer. The problem is, I don't want any blank inputs to be sent AND I want a "label" to appear before the values in the email. The best workaround I thought of was to insert everything I want into a JS String and have it picked up by the phpmailer when the user submits the form.
Sorry for the long story, but if you think there's a better solution than mine, please speak up.
Anyway, here's the piece of code that is being a problem.
<form name="contactform" method="post" action="mailer.php">
I've looked around and it seems that I could send this variable through a function similar to this (which I tested and works fine):
var str = "This is a String variable";
function redirect(){
window.location.href = "mailer.php?values=" + str;
}
If I wanted to get that variable sent by the form's ACTION atribute (If I wanted to get some variables with $_POST I'd need the submit button, right?), how would I do it?
Just to help you visualize it, here's more or less what I want:
<form name="contactform" method="post" action="mailer.php$values"+str>
Thanks in advance for all the answers and suggestions.
#edit: I just realized what I'm basicaly asking is: How to have a SUBMIT button's ACTION changed before it accesses the php page?
I can only finish editing this String right before it's sent. Or I could re-write it every time an input loses focus but I don't think that re-writing this String, which involves an Array of 100+objects, every time something changes would be the best option.
As pointed out in the comments the best way of doing this is to place hidden files in the form via javascript.
var input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", "name_you_want");
input.setAttribute("value", "value_you_want");
//append to form element that you want .
document.getElementById("contactform").appendChild(input);
Add the contactFormId
<form name="contactform" method="post" id="contactForm" action="mailer.php">
Note that doing this will get the values via $POST var instead GET wich makes more sense since you are sending via post your form.
I'm really confused. I want to make a sort of a hotkey that changes the value of a hidden input field and submits the form. How can I do that? I've read numerous blogs and tutorials but all assume that I just want to submit the filled form after pressing enter. While I just don't understand how the very "structure" of a form acts in javascript.
Should I fill the hidden input like this:
document.getElementById('foo').value='bar'
I don't think there's even a way to see if its value was changed so I'm not sure.
And then, how do I submit the form, if I have:
<form name='myform' method='post' action='url.html'>
I tried document.myform.submit() and document.myform.form.submit(), and I've also tried giving the form an id and using document.getElementById('myformid').submit() but none of these work! I usually get the error TypeError: 'undefined' is not an object.
I'm new to javascript, I'm used to working with python but it has a completely different philosophy, and maybe that's the source of my confusion. I'd very appreciate some explanation, not just a code snippet.
Thanks!
You can always check the hidden field with the Development Tools of your Browser - just press F12 and you will see it. Go to the DOM list (within the Development Tool) and then you see the actual value of that field.
To submit a form via JavaScript normally document.name.submit() is enough. Another option is that you use e.g. jQuery to submit a form via AJAX (with the help of jQuery.serialize)
If you want to use document.getElementById('myformid').submit() you have to give an ID to your form like that :
<form name='myform' id="myform" method='post' action='url.html'>
It's the same thing about your hidden field.
document.getElementById('foo').value='bar' assume you have an hidden like that :
<input type="hidden" name="foo" id="foo" />
You can try the following approach
<form name='myform' method='post' action='url.html'>
// your fields here
// then use a input type button to have a button and define an on click event
</form>
<script type = "text/javscript">
use the event in your script
//change your hidden field value here and
// submit the form by
myform.submit();
</script>
You can use ajax or jquery as there is a function named on key up it means after pressing a key on the last field which ever you choose as you leave the key on keyboard it will submit the forms.
check this okay http://www.w3schools.com/php/php_ajax_livesearch.asp
I have a included a Dojo star rating widget (dojox.form.Rating) in a Dojo form but when submitted, it doesn't appear.
<div dojoType="dojox.form.Rating" numStars="5" id="field_3177" value="3"></div>
The documentation doesn't mention adding a name attribute, but even if I add one, it doesn't help.
<div dojoType="dojox.form.Rating" name="field_3177" numStars="5" id="field_3177" value="3"></div>
Examining the rendered HTML in Firebug, it seems the hidden input field has no name attribute - which would explain why it doesn't appear in the POSTed data.
<input type="hidden" dojoattachpoint="focusNode" value="3" id="field_3177" tabindex="0">
Is there something I should do before submitting?
You just need to add a name to the widget, i.e.
<div dojoType="dojox.form.Rating" numStars="5" id="field_3177" name="field_3177" value="3"></div>
This is nothing special to Dojo. All input elements must have a name in order to be submitted back to the server, see http://www.w3schools.com/tags/att_input_name.asp.
UPDATE:
Sorry, didn't see that you'd already tried adding a name param. I'd argue this is a bug in either the Form or (more likely) the rating widget. If you submit your form via XHR using dijit.form.Form.getValues() then you'll get the rating widget included - if you have a name. But if you use the native form submit then you don't.
I've created a test case at hhttp://telliott.net/dojoExamples/dojo-ratingInFormExample.html. You can get this to work for non-XHR form submission by quickly iterating through the values returned by getValues() and building the query string yourself. Not ideal. I suspect the template for the rating should be updated to put the name attribute onto the input node rather than the top level node.
Silly question:
have you added dojo.require("dojox.form.Rating"); to your code?
Hope it helps you.
//Daniel