change form element before submit with javascript - javascript

In the below code I am able to get the alert message to display correctly displaying the message and the number "3". Does anyone know how to use that passes variable/number to declare a form element named "priority" to be passed to the form before submitting?
My goal is to use $_POST["priority"] and generate the number 1, 2, or three based on which link/button is clicked.
<script language="JavaScript">
function submitForm(priority)
{
alert("Changing to Priority " + priority);
document.frm.submit();
}
</script>
<span class="label">Low</span>
<span class="label">Medium</span>
<span class="label">High</span>

Add a hidden field in the form:
<input id='priority' name='priority' type='hidden'/>
Before the last form submit call, add something like this:
document.getElementById('priority').value = priority;

You don't need any script, use 3 submit buttons:
<button type="submit" name="priority" value="1">Priority 1</button>
<button type="submit" name="priority" value="2">Priority 2</button>
<button type="submit" name="priority" value="3">Priority 3</button>
Only the one that is clicked will send it's value to the server.

Related

queryselector onclick function gets rejected by DOM

Okay so here is the thing. I added a simple form like this:
<form class="form form--character">
<h1 class="title title--characters">Choose Players</h1>
<div class="form--inputs">
<input type="text" class="input input--players" placeholder="Player 1"><br>
<input type="text" class="input input--players" placeholder="Player 2"><br>
<input type="text" class="input input--players" placeholder="Player 3"><br>
<input type="text" class="input input--players" placeholder="Player 4"><br>
</div>
<br>
<button class="btn btn--add-characters">Add Player</button>
<button class="btn btn--continue">Continue</button>
</form>
The button called btn--add-players has the job to add another input into the div of inputs, which looks something like this:
window.onload =function(){
var players=[];
var playerInputCount=4;
var form = document.querySelector(".form--inputs");
document.querySelector(".btn--add-characters").onclick=function(){
playerInputCount+=1;
form.innerHTML = form.innerHTML + "<input type='text' class='input input--players' placeholder='Player " + playerInputCount + "'><br>";
}
}
The problem now is.. when I click the button, the input gets added to the page, but within milliseconds the DOM seems to get resettet and the Input isnt there anymore.
I put a console log into the function to have a look if it still lands in the console after clicking.
It lands in the console but also within milliseconds the console log is away.
How to fix that issue?
The button is inside a form, so when you click the button, it submits the form. Add type="button".
<button class="btn btn--add-characters" type="button">Add Player</button>
When element is placed within a , its default action will be as a form submit button unless type="button" attribute is specified.
The additional elements created are dismissed because the button submits the . To prevent that from happening, add type="button" attribute for the button with "btn btn--add-characters" class, and it'll be okay.

Hide form on submit with Angular JS

Trying to wrap my head around some Angular items and working thru a tutorial to edit and learn.
Clicking the below button shows the below form. How do I reverse this once the form is submitted? Meaning hiding the form on submit until the button is clicked once more.
<button ng-click="addNewClicked=!addNewClicked;" class="btn btn-sm btn-primary">
<i class="fa fa-plus"></i>Add Task
</button>
Basically, the form appears, I enter something and submit, but would like the form to dissapear upon submit? Thinking something to do with ng-hide, but can I do this using only Angular? Or do I need to do something with javascript/css?
<div id="addForm" class="margin-full-5">
<form ng-init="addNewClicked=false; " ng-if="addNewClicked" id="newTaskForm" class="add-task">
<div class="form-actions">
<div class="input-group">
<input type="text" class="form-control" name="comment" ng-model="taskInput" placeholder="Add New Task" ng-focus="addNewClicked">
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="addTask(taskInput)">
<i class="fa fa-plus"></i> Add Task
</button>
</div>
</div>
</div>
</form>
You can also achieve this using a combination of Angular form's attribute $submitted, ng-hide and ng-submit
<form name="myForm" ng-hide="myForm.$submitted" ng-submit="submit()">
<button>Submit</button>
</form>
Read about it here: https://docs.angularjs.org/api/ng/type/form.FormController
Somewhere in your view.
<button ng-click="showTheForm = !showTheForm">Add a Task</button>
<form ng-show="showTheForm" ng-submit="processForm()">
<button>Submit</button>
<button type="button" ng-click="showTheForm = false">Cancel</button>
</form>
Somewhere in your controller
$scope.processForm = function() {
// execute something
$scope.showTheForm = false;
}
Your form is displaying IF the addNewClicked value evaluates to true, which occurs when you click the add task button. If you want the form to disappear on submit, you just need to make the onClick to that button change your addNewClicked to false.
AngularJS Docs for Ng-If
You can do that by using ng-show/ng-hide as per example below :
<form ng-init="addNewClicked=false; " ng-if="addNewClicked" ng-hide="hideform" id="newTaskForm" class="add-task">
and modify the submit method to make the hideform = true;
$scope.addTask = function(input){
... your things
$scope.hideform = true;
}
You can also do the same using jQuery :
$("#newTaskForm").hide();
This should do the trick:
$scope.addTask = function(taskInput) {
...
$scope.addNewClicked = false;
}
You could use ng-show as you can see in this jsfiddle
This will show and hide the div element based on clicking the button. When the button is clicked it will toggle the boolean, hence acting as an on/off switch for ng-show

Result from JS function shows up and dissapears

I have a JavaScript function:
function SaskaitisanasFunkcija(){
var x = document.forms[0].elements[0].value;
var y = document.forms[0].elements[1].value;
var saskaitisana = parseFloat(x)+parseFloat(y);
document.forms[0].elements[6].value = saskaitisana;}
And a form, that includes this:
<form>
Pirmais skaitlis: <input type="text"><br>
Otrais skaitlis: <input type="text"><br>
Matemātiskā darbība:
<button onclick="SaskaitisanasFunkcija()">+</button>
<button onclick="AtnemsanasFunkcija()">-</button>
<button onclick="ReizinasanasFunkcija()">*</button>
<button onclick="DalisanasFunkcija()">/</button><br>
<b>Rezultāts</b><input type="text">
</form>
What happens is that when I press the button, that has the function "SaskaitisanasFunkcija()" attached to it, the result shows up in the "Rezultāts" input window (not sure how to call it any other way) and dissapears instantly. Can anyone explain why does that happen and give me a hint how to fix the problem?
It happens because the form gets submitted and the page reloads, add the parameter type="button" to the button element
<button type="button" onclick="SaskaitisanasFunkcija()">+</button>
and the form should no longer submit and reload when you click it

Why does the value is displayed and then disappear after I click on the button in JavaScript?

Whenever I click on the button I get the output for a second in the text-field "Result" and then it's gone.. why does it disappear? (I have tried to place the function in the body.. it doesn't help..)
<html>
<head>
<script>
function someFunction()
{
with (document.formy)
{
resultsBox.value= "In " + yearsBox.value + "you will be" + ageBox.value + yearsBox.value +" years old.";
}
}
</script>
</head>
<body>
<form name="formy">
Enter your current age: <input id="ageBox" type="text" value="18" />
<br/>
Enter number of years: <input id="yearsBox" type="text" value="5" />
<br/>
Click this button: <button onclick="someFunction()">Click me! </button>
<br/>
Results: <input id="resultsBox" type="text" />
</form>
</body>
</html>
The default type for buttons is submit. When you click the button the form is submitting and reloading the page. You can avoid this by setting the type attribute on the button:
<button type="button" onclick="someFunction()">Click me!</button>
Add an attribute to your form button called type. Specifically, something like:
type="button"
The reason is the default behavior of a button within a form is to act as a submit button. Submitting, results in the page being reloaded and thus the text field is cleared.
That submits the form & reloads, to prevent it:
onclick="someFunction(); return false;">
Also you should avoid with().

jquery select form elements without ids

I have two forms in a html site and each form has an inputbox and a submit button
<div id="ausgabe">
<form class="forms">
<input type="text" placeholder="bla">
<button type="submit" class="btn btn-primary btn-small">TestA</button>
</form>
<form class="forms">
<input type="text" placeholder="bla">
<button type="submit" class="btn btn-primary btn-small">TestB</button>
</form>
</div>
$(".forms").submit(function(event)
{
event.preventDefault(); // Prevent the form from submitting via the browser
var test = $(this);
var wert = test.parent().find(":input:first").val();
alert("Button pressed"+wert);
});
Then i type "TestA" in the first inputbox and press the submit-button for this form and get an "Button pressed TestA" alert.
Then i type "TestB" in the second inputbox which belongs to the second form and i expect this result "Button pressed TestB" but i get "Button pressed TestA" again
How can i get the value of the inputbox which belongs to the its form?
My idea was to get the parent of the button which is pressed and find an inputbox there.
I'am generate this forms dynamicly from a java servlet backend and i not want to create ids for each form.
Best Regards
rubiktubik
When targeting the form, you don't want to find the first input in the parent element, but in the form itself:
$(".forms").on('submit', function(event) {
event.preventDefault();
var test = $(this);
var wert = test.find(":input:first").val();
alert("Button pressed"+wert);
});

Categories

Resources