How to add URL data (variables) when submiting a form? - javascript

I have this form on my web page:
<form action="my_target_file.py">
<!-- some input textboxes here -->
<input type="submit" value="Go!" />
</form>
When the form is submitted, I can access those values (the ones in the textboxes and other controls) easily. But I want to add some data to the my_target_file.py URL. For example, using Javascript, I can check if there's a checkbox checked or not. If it's checked, then I want to call my_target_file.py?checked=1 when submiting the form, along with all those values which the user has entered at the textboxes.
My current solution is to have a hidden textbox which I fill using Javascript when the checkbox is checked, for example. Then I read the hidden textbox from my_target_file.py, but that's not too clean.
How can I achieve this?

Simply name the checkbox "checked" and set its value to "1"--JavaScript is not needed.
<input type="checkbox" name="checked" value="1" />
When added to the form code that you provided, the above checkbox will add a query string value of checked=1 within the existing query string if and only if the user has checked the checkbox.
As per your comment below, you can append hidden fields within a form like this:
var box = document.createElement('input');
box.type = 'hidden';
box.value = '1';
box.name = 'checked';
form.appendChild(box);
Do this for each parameter name and value that you want to store, and replace form with the JavaScript object that represents your form, e.g., document.forms[0] or document.getElementById("formid").

Related

Cant submit my button with form

I am trying to submit my button with a form. Im not trying to make my button submit the form. I want to be able to see my button value in the POST variable after the form submits. From my understanding all I need is to give my element a name and value. I should be able to see all the form variables once my form is submitted.
<input name='MC[]' type='text' size='51' placeholder='Enter In Question'>
<br/>
<input name='MC[]' type='button' value='Incorrect'>
<input name='MC[]' id='Options' size='40' placeholder='Enter In Option A'>
I'm new to this site not sure if I'm providing enough information but I simply want to submit this button inside a form and to be able to add the value of my button to a file. For some reason I cant see the button once the form is submitted. Are type button not sent to POST when submitted?
Note, I am able to see my other input elements. The type button one is the only one I cant see.
You can use Javascript that fills in the value of a hidden input from the value of the button that was clicked.
HTML:
<input type="hidden" name="answer" id="answer">
JS:
document.querySelectorAll("input[name='MC[]']").forEach(function(el) {
el.addEventListener("click", function() {
document.getElementById("answer").value = el.value;
}
}
Then you'll be able to get the button's value in $_POST['answer'].
That's not how buttons work... they perform an action, they don't get included in the post data. What you need is a checkbox, or a disabled input perhaps?

jQuery, input elements with the same data attribute value but one is hidden, fill in same data on keyup

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();
})

How to Submit a Javascript Value in an Input Field

Simply, how can I do this?
<input type="hidden" value="some javascript value" />
I have a form whereby when a user clicks on Add More, more input fields are added via javascript.
I'm also using javascript-declared values to track and limit the number of fields a user can add.
I need a way for my php code to retrieve these javascript values.
Use append
$('#hidden').val('my Text');
input field should be
<input type="hidden" id="hidden"/>
the question is a bit vague, but i will give it a go
try adding a name as an array and then you can use get or post
<input name="myjavascriptinputs[]" type="hidden" value="some javascript value" />
in your php you will be able to use
foreach($_GET['myjavascriptinputs'] as $ajavascriptinput)
From the button you must be calling a javascript to add these fields dynamically. Simply append the code to that function to hand over these values to the field.
<input id="myinputfield[]" type="hidden" value="" />
<script>
function addOneMore(){
var newField = // code to add one more field
newField.value = newValue;
}
</script>
Will solve your purpose.

how can i toggle a <p:password> field to text and password with a checkbox check uncheck

I am using p:password tag for registration. I want to toggle the field to text when it is checked with check box, it change to password type mode when it is unchecked. How to solve the problem with primefaces component. I am using primefaces 3.0 and jsf 2.0.
under the cover generates the <input type="PASSWORD"/> field (with other attribute name etc..)
So now if you need to show password have a check box like
<input type="checkbox" id="showPassword" onclick="showPassword()"/> Show password
in javascript
function showPassword(){
var showPasswordCheckBox = document.getElementById("showPassword");
if(showPasswordCheckBox.checked){
document.getElementById("ID_FOR_YOUR_PASSWORD_FIELD").type="TEXT";
}else{
document.getElementById("ID_FOR_YOUR_PASSWORD_FIELD").type="PASSWORD";
}
}

Submitting the value of a disabled input field

I want to disable an input field, but when I submit the form it should still pass the value.
Use case: I am trying to get latitude and longitude from Google Maps and wanna display it, but I don't want the user to edit it.
Is this possible?
I wanna Disable an Input Field on a
form and when i submit the form the
values from the disabled form is not
submitted.
Use Case: i am trying to get Lat Lng
from Google Map and wanna Display it..
but dont want the user to edit it.
You can use the readonly property in your input field
<input type="text" readonly="readonly" />
I know this is old but I just ran into this problem and none of the answers are suitable. nickf's solution works but it requires javascript. The best way is to disable the field and still pass the value is to use a hidden input field to pass the value to the form. For example,
<input type="text" value="22.2222" disabled="disabled" />
<input type="hidden" name="lat" value="22.2222" />
This way the value is passed but the user sees the greyed out field. The readonly attribute does not gray it out.
you can also use the Readonly attribute: the input is not gonna be grayed but it won't be editable
<input type="text" name="lat" value="22.2222" readonly="readonly" />
Input elements have a property called disabled. When the form submits, just run some code like this:
var myInput = document.getElementById('myInput');
myInput.disabled = true;

Categories

Resources