How to submit form field values with a link? - javascript

How can I submit the values of the textbox and radio button with "testLink1" in the following code:
<cfform name="frmEdit" method="POST" >
<INPUT type="text" name="txtName" value ="" >
<INPUT type="radio" name="typeA" value ="exempt" checked> Exempt
<INPUT type="radio" name="typeA" value ="non_exempt"> Non-exempt
testLink1
</cfform>
I have my own reason to use <a> tag instead of a submit button.

In order to submit the form via a link you will need to use JavaScript. I have rewritten your code below:
<form name="frmEdit" action="test1.cfm" method="POST">
<input type="text" name="txtName" value="" >
<input type="radio" name="typeA" value="exempt" checked="checked"> Exempt
<input type="radio" name="typeA" value="non_exempt"> Non-exempt
testLink1
</form>
Or as Travis suggested below, change the <a> tag like so:
testLink1
This should work for your simple example. All of the fields will be available to you in the FORM scope in ColdFusion.
There is also no reason to use cfform if you are not using any of it's functionality (which your example is not).

Related

Remove INPUT field from SUBMIT with Javascript if value is zero

I have a submit form like this.
<form method="post" id="formCard" name="formCard">
<input type="radio" name="name[]" value="0">
<input type="radio" name="name[]" value="1">
<input type="radio" name="name[]" value="2">
</form>
I want to know if it is possible to remove with javascript the name[] from the POST if value selected was == 0. Remember the form still need to submit, but it can not send name in the POST.
In other words, if in my PHP page i do isset($_POST[name]) it should return not exist, since javascript remove this from submission
$( "#formCard" ).submit();
Disabled controls do not submit their values.
So you can disable the control before the form submits, which allows the user to still select it.
$("form").submit(() => {
$("[name='name[]'][value='0']").attr("disabled", "disabled");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="formCard" name="formCard">
<input type="radio" name="name[]" value="0">
<input type="radio" name="name[]" value="1">
<input type="radio" name="name[]" value="2">
<button type='submoit'>
submit
</button>
</form>
Select 1 or 2, submit, check network tab and payload, the value will be included. Then select 0, submit, check network tab and payload and it won't be included.
Depending on your requirement, you might need to re-enable the radio button (by removing the disabled attribute), eg if the submit does not go ahead due to other validation checks.
This one removes the "name" attribute from the element with value="0"
document.body.querySelector('[value*="0"]').removeAttribute('name');

Autosubmit multiple checkboxes as comma separated string in url?

I've looked through some topics but they either have auto-submit where each checkbox is as a separate parameter in the URL or they need submit button. What I am trying to achieve is:
My current HTML form:
<form name="status" id="status" method="get">
<input type="checkbox" name="status[]" value="0" onchange="document.getElementById('status').submit()" />
<input type="checkbox" name="status[]" value="1" onchange="document.getElementById('status').submit()" />
<input type="checkbox" name="status[]" value="2" onchange="document.getElementById('status').submit()" />
</form>
With this, I have auto-submit whenever a checkbox is checked, but I have an URL like ...&status%5B%5D=0&status%5B%5D=1
What I need is a comma-separated parameter in the URL like &status=0,1 while keeping the auto-submit option. Also, there are some more parameters in the URL, so this must be appended at the end while keeping the rest parameters.
Is this possible? I'm not familiar with javascript but I think there might be a way ...

AngularJS Form validating even though input is invalid

I have a form where there are some required inputs that are not within the form tag. The form is validating even though these inputs are not valid.
How can I fix this without moving all inputs inside the form tag?
Specifically I need to have the form be invalid when any inputs associated with the form are invalid. Not just those contained within the element.(i.e. any input with it's form attribute pointing to the form)
example:
http://jsfiddle.net/v6QkB/
<div class="radio-group">
<input type="radio" form="testForm" name="test2" value="a" ng-model="formData.test2" ng-required="true">
<input type="radio" form="testForm" name="test2" value="b" ng-model="formData.test2" ng-required="true">
</div>
<form name="testForm">
<div class="radio-group">
<input type="radio" name="test1" value="a" ng-model="formData.test1" ng-required="true">
<input type="radio" name="test1" value="b" ng-model="formData.test1" ng-required="true">
</div>
<input type="submit" value="submit" ng-disabled="testForm.$invalid">
</form>
You can use the ngForm directive to wrap all elements (outer inputs and form).
According to the docs ngForm is a "nestable alias of form directive. [...] It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determined."
Furthermore, "the purpose of ngForm is to group controls, but not to be a replacement for the <form> tag with all of its capabilities (e.g. posting to the server, ...)".
<div ng-form="outerForm">
<div class="radio-group">
...
</div>
<form name="testForm">
<div class="radio-group">
...
</div>
<input type="submit" value="submit" ng-disabled="outerForm.$invalid" />
</form>
</div>

How to disable only one field in form using javascript?

I have a form with multiple text fields.
In the form at the top is a question of two radio buttons:
Go direct or go public.
Go direct means you have to supply an email address.
Go public means the email box is disabled.
<input type="radio" name="target" value="public" />
<label for "public">Open to anyone </label></br>
<input type="radio" name="target" value="direct"/>
<label for="newEmail">Email address of the person:</label>
<input type="text" name="newEmail" id='newEmail'>
</br>
</br>
</br>
<label for="title">Book title:</label>
<input type="text" name="title" id='title'></br>
<label for="location">Location:</label>
<input type="text" name="location" id='location'>
No other form fields must be affected
You can do stuff like this
$('input:radio').on('click',function(){
if(this.checked && this.value == "public") // this.checked is not necessary as checking value already
$("#newEmail").prop("disabled",true);
else
$("#newEmail").prop("disabled",false);
});
Fiddle
Side Note: I would suggest click instead change() because radio buttons are often toggled in a group, you do not need to add more than one case or conditional logic like you do with checkboxes. though change can also be used
This will trigger the disabled state of the email input based on which radio button is selected.
var $radios = $('input[type="radio"]');
$radios.change(function() {
$('#newEmail').prop('disabled', $radios.first().is(':checked'));
});
JSFiddle

JavaScript value not set during form submit

I've searched for a solution to this issue all over the web. After no success, here I am. I have a form that where I have 3 fields that should contain data. Field 1 is the Zip Code, Field 2 and 3 are City and State respectively.
The JS function getCityByZipHome and getStateByZipHome dynamically return the city and state and insert the values into the the city2 and state2 input fields.
For whatever reason, when I submit the form via mouse-click.. I see the data via $_POST. If the users presses ENTER, the data is never captured and I never see that data from the hidden fields.
Any idea what's wrong here? Note, I've tried almost all the event handlers onblur, onclick, onchange..etc.
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onkeypress="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
I've tried adding onsubmit # the form level as such:
<form method="post" name="something" action="xxSome.php" onsubmit="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
And I've tried onblur without any luck # the input level as such:
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onblur="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
After all the messing around, I actually never solved the issue; rather, I disabled the ENTER key as a submit method.
I have some pretty serious time constraints, but I'm sure this will come up later and I will definitely come back to this issue.
You should do the getcitybyzip and getstatebyzip in the form onSubmit.
Change the type of the submit to button and then add on onClick method to it. ie instead of make it but you need an id on the form to do that. I would be interested though in finding the cause of what is going wrong. Did you try firebug?

Categories