dynamically created elements not appearing on submission - javascript

I have code which will dynamically create elements which works great.
But I have two forms on my page .. one to load an image and the other to input data which is ordered as follows
<form name=image>
</form>
<form name=data>
<div id="p_scents">
JavaScript elements are inserted here
</div>
</form>
Now if I have the image form and I submit the form, the javascript created elements are not submitted and do NOT appear in _POST.
But without the image form, these javascript created elements do appear in _POST
Any reason why?
See code below...
<table border=1 cellpadding="1" cellspacing="0" width=80%>
<tr>
<td>
Select image for new banner
</td>
<td>
<form method="post" action="/index.php/dashboard/create/" enctype="multipart/form-data" name=LoadImage>
<input type="file" name="image"/>
<input type="submit" value="upload"/>
</form>
</td>
</tr>
<tr><td colspan=2 align=center>
<form action="index.php/create" method="post" accept-charset="utf-8" name="CreateBanner">
Add Another Input Box
</td>
</tr>
<tr><td>
Give your banner a unique name</td>
<td>
<input type="text" name="name" value="" id="name" autofocus /></td></tr>
<tr><td>Specify email address or domain to brand</td>
<td>
<input type="text" name="domainName" value="" id="domain" /></td></tr>
<tr><td>Status</td>
<td>
<select name="status">
<option value="enabled">Enabled</option>
<option value="disabled">Disabled</option>
</select>
</td></tr>
<tr><td>Give you banner a default URL</td>
<td>
<input type="text" name="url" value="" id="url" /></td></tr>
<tr><td valign=top>Alternate Urls
</td>
<td>
<div id="p_scents">
</div>
<input type=submit>
</form>
</td>
</tr>
</table>

Related

My login page javascript button not working

<center>
<table>
<form method="post" name="login" enctype="application/x-www-form-urlencoded">
<tr>
<td colspan="2" align="center">
<font face="arial" size="5">AreĆ” do Cliente</font>
</td>
</tr>
<tr>
<td>
E-mail:
</td>
<td>
<input type="text" name="credential_0" value="" size="30" maxlength="128" class="formfield">
</td>
</tr>
<tr>
<td>
Senha:
</td>
<td>
<input type="password" naem="credential_1" size="20" maxlength="50" class="formfield">
</td>
</tr>
<tr>
<tr>
<input type="submit" name="Log In" value="Check Mail" onclick="javascript:login.action='https://thewebsite.com/mail/index.bml?s=1';javascript:login.destination.value = '/mailadmin/index.bml?check=1';">
</td>
<td>
<input type="submit" name="Log In" value="Manage Mail" onclick="javascript:login.action='https://thewebsite.com/mailLogin';javascript:login.destination.value = '/mailadmin/index.bml?manage=1';">
</td>
</tr>
<input type="hidden" name="destination">
</form>
</table>
</center>
I am not an expecialist but i don't know much of javascript, also i need a little help on the full code. Check for me if it's all ok!
But my main question is how i make this button open in a new window/tab or set url parent?
https://thewebsite.com/mail/index.bml?s=1';javascript:login.destination.value
= '/mailadmin/index.bml?check=1';" >
<a target="_blank" href="https://www.wikipedia.org/">Wikipedia (opens in a new window)</a>
You can open page in new tab or page by using anchor tag very easily. Like,
The home page will open in another tab.
Read more:
https://html.com/attributes/a-target/#ixzz5Sh13WUpK
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

submit default value if the checkbox is unchecked

i have a html form submitting to my spring java controller. i have a small problem here.
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Sex</th>
<th>District</th>
<th>VDC/MUNICIPAL</th>
<th>Ward No.</th>
<th>Camp Visited?</th>
<th>Consent</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr th:each="persons : ${part}">
<form method="post" th:action="#{/addParticipant}" enctype="multipart/form-data">
<input type="hidden" th:value="${persons.id}" name="id">
<td>
<span class="hidden" th:text="${persons.name}"></span>
<input type="text" name="name" th:value="${persons.name}">
</td>
<td>
<span class="hidden" th:text="${persons.lastName}"></span>
<input name="lastName" type="text" th:value="${persons.lastName}">
</td >
<td>
<span class="hidden" th:text="${persons.age}"></span>
<input name="age" type="text" th:value="${persons.age}">
</td>
<td>
<span class="hidden" th:text="${persons.sex}"></span>
<input name="sex" type="text" th:value="${persons.sex}">
</td>
<td>
<span class="hidden" th:text="${persons.district}"></span>
<input name="district" type="text" th:value="${persons.district}">
</td>
<td>
<span class="hidden" th:text="${persons.vdcMun}"></span>
<input name="vdcMun" type="text" th:value="${persons.vdcMun}">
</td>
<td>
<span class="hidden" th:text="${persons.wardNo}"></span>
<input name="wardNo" type="text" th:value="${persons.wardNo}">
</td>
<td>
<div class="checkbox">
<input type='hidden' value='no' name='attendStatus' id="attendStatusHidden">
<input type="checkbox" value="yes" name="attendStatus" id="attendStatus">
</div>
</td>
<td>
<div class="form-control">
<input type="hidden" name="file" value="null">
<input id="file" type="file" name="file" accept="image/*">
</div>
</td>
<td>
<button type="submit" class="btn btn-success" id="submitButton">Submit</button>
</td>
</form>
</tr>
</tbody>
</table>
so what i am trying to do is whenever my checkbox is checked it should send the value yes else no.
i tried to put the two input fields with one being hidden. but whenever i submit the form it posts both yes and no on my table.
i tried javascript like this.
window.onload = function(){
if(document.getElementById("attendStatus").checked) {
document.getElementById('attendStatusHidden').disabled = true;
}
};
i am trying to disable hidden field whenever i check the checkbox but still it posts both yes,no on my table.
how can i solve this with javascript or HTML itself, if there's any?
You can easily manage like that.
<input type='hidden' value='false' name='attendStatus'>
<input type="checkbox" name="attendStatus" value="true">
if the checkbox is not checked, the value send to the form will be false.
If the checkbox is checked, the value send to the form will be true.
you should have the same 'name' property for both of them, and the order is also important, the hidden input come first and after the checkbox.
I was able to solve this issue by adding a hidden item whose field name starts with an exclamation mark (!).
<input type="checkbox" name="attendStatus" value="true" />
<input type="hidden" name="!attendStatus" value="false" />
This is described in Spring's WebDataBinder API as DEFAULT_FIELD_DEFAULT_PREFIX.
You can use a separate input name for your hidden field:
<input type='hidden' value='no' name='_attendStatus' id="attendStatusHidden">
Then if your parameter attendStatus isn't present you can use the _attendStatus value.
This convention is used in Spring for example.
See this answer for more information about it.
another option to handle this on the client side like this:
<input type='hidden' value='false' name='attendStatus' id="attendStatusHidden">
<input type="checkbox" onchange="document.getElementById('attendStatusHidden').value = this.checked">

Calculation between controls array using jquery

I am creating 2 dynamic controls array.
<input type=text name=quantity[]>
<input type=text name=price[]>
I want to multiply these two inputs and show the result accordingly. I want to do it on frontend using javascript or jQuery.
What will be the best possible way of doing it?
EDIT
#Zeus
As I mentioned in the question it is an array of controls so the code will go like this
<input type="text" name="quantity[]"> <input type="text" name="price[]">
<input type="text" name="quantity[]"> <input type="text" name="price[]">
<input type="text" name="quantity[]"> <input type="text" name="price[]">
Now I will enter quantity in first textfield and price in the second one. For each row I need to multiply these fields and show the result next to them.
Hope it explains the question more.
You can do it like this :
$("button").click(function() {
$("#calc tr").each(function(i) {
var result = $(this).find("input[name*='quantity[]']").val() * $(this).find("input[name*='price[]']").val();
$(this).children("td:nth-child(3)").html(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table id="calc">
<tr>
<th>Quantity</th>
<th>Price</th>
<th>Result</th>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
</table>
<button>Click me after entering values</button>
Run the code to test it.
This is just an example you will be needing to edit the code to make it work for you.

how can i bypass this form? Is there a way to login into any id if i don't know the password?

i have a form which i want to bypass. Is there a way to bypass this using javascript or any other technique? Also how can i make out that this form is sql vulnerable?
<form method="post" action="/auth/login/">
<input type="hidden" name="next" value="">
<input type="hidden" name="csrfmiddlewaretoken" value="Tpy2uWI03EnzWIN3COSUvuVh5GrcUICo">
<fieldset class="fieldset_main">
<table>
<tbody><tr>
<th class="requiredfield">
<label for="id_username">Username:</label></th>
<td colspan="2"><input id="id_username" maxlength="254" name="username" type="text">
</td>
</tr>
<tr>
<th class="requiredfield">
<label for="id_password">Password:</label></th>
<td colspan="2"><input id="id_password" name="password" type="password">
</td>
</tr>
<tr>
<th>
<label for="id_rememberme">Keep me logged in:</label></th>
<td colspan="2"><input id="id_rememberme" name="rememberme" type="checkbox">
</td>
</tr>
</tbody></table>
</fieldset>
<input type="submit" value="login" class="button">
</form>
OK. Here is the serious answer. it's not the FORM that needs to be secure, it's the back-end code that handles the data. If you enter non-sanitized content into queries, or don't properly handle/process/use the entered data, that's where the vector will be. The form is purely aesthetic

Input boxes disable/enable box when there is form specified

I'm trying to get form in table with enabling and disabling inputs by checkbox.
When I realized, that <form> is not working in tables I put form argument in inputs, but now disabling/enabling doesn't working (my js skill is kinda poor)
My checkbox to disable/enable inputs look like:
<td>
<input type="checkbox" onclick="this.form.elements['bleh'].disabled = this.form.elements['bleh2'].disabled = !this.checked" />
<input type="submit" value="Edytuj"/>
</td>
And my input boxes for now are:
<td><input type="text" name="bleh" form="id7" value="default" disabled=disabled></td>
<td><input type="text" name="bleh2" form="id7" value="admin" disabled=disabled></td>
if you give your form a name you can reach the elements like this:
document.FORM_NAME.ELEMENT_NAME.disable
Eg
document.id7.bleh.disabled
So you can change your onclick to
<input type="checkbox" onclick="document.id7.bleh.disabled = document.id7.bleh2.disabled = !this.checked" />
Example
Using form attribute to external form
Demo Fiddle
When you have your table within the form
<form action="#">
<table>
<tr>
<td>
<input type="text" name="bleh" value="default" disabled="disabled" />
</td>
<td>
<input type="text" name="bleh2" value="admin" disabled="disabled" />
</td>
<td>
<input type="checkbox" onclick="this.form['bleh'].disabled = this.form['bleh2'].disabled = !this.checked" />
<input type="submit" value="Edytuj" />
</td>
</tr>
</table>
</form>
When you declare your form elements outside the form
<table>
<tr>
<td>
<input type="text" name="bleh" form="id7" value="default" disabled="disabled" />
</td>
<td>
<input type="text" name="bleh2" form="id7" value="admin" disabled="disabled" />
</td>
<td>
<input type="checkbox" onclick="document.forms['id7']['bleh'].disabled = document.forms['id7']['bleh2'].disabled = !this.checked" />
<input type="submit" value="Edytuj" />
</td>
</tr>
</table>
<form name="id7" id="id7" action="#"></form>

Categories

Resources