Conflict using multiple forms javascript - javascript

I'm using two different forms - one is to retrieve radio button, another is as submission form. Problem is, I cannot use both the form actions at a time.
<table id="newImageTable" border="1" style="position:absolute; ">
<?
while($row=mysql_fetch_array($image_query)) {?>
<form name="radioForm">
<tr>
<td><img border="0" src="<?=$row['image_path']?>" /></td>
<td>
<input type="radio" name="imageRadio" id="<?=$row['image_name']?>" />
</td>
</tr>
</form>
<?}?>
<tr>
<td width="60%">
<!--<input type="file" id="image" /><input type="button" id="imagePathButton" value="Upload Image" onclick="uploadImagePath()" />-->
<form name="submitForm" action="http://128.233.104.33/passimagemodels/uploadServer.php?dbname=<? echo $dbname ?>" method="post" target="foo" enctype="multipart/form-data"
onSubmit="window.open('', 'foo', 'width=200,height=200,status=yes,resizable=yes,scrollbars=yes')">
Upload New Image: <input name="myfile" type="file" id="imageBox" />
<input type="submit" name="submitBtn" value="Upload" onclick=""/>
</form></td>
<td width="10%">
<input type="button" value="Use selected image" id="useImageButton" onclick="post_value();"/>
</td></tr>
</table>
javascript code:
function getRadioValue() {
for (index=0; index < document.radioForm.imageRadio.length; index++) {
if (document.radioForm.imageRadio[index].checked) {
var radioValue = document.radioForm.imageRadio[index].id;
return radioValue;
}
}
}
function post_value(){
alert('im');
var selected_Image = getRadioValue();
if (selected_Image == null){
alert('Please Select an Image');
}
else{
window.opener.document.getElementById(imageId).value = selected_Image;
self.close();
}
}
Here if I put the radioForm outside the table, getRadioValue function works fine but Upload button does not submit the submitForm. And if I surround one <tr> with radioForm scenario is just vice-versa. Are there any restrictions on nesting forms?

Scroll to the bottom if you want to skip the explanation, and get to the solution.
You're creating multiple forms with the same name. document.radioForm will only refer to the first form, which is probably not desired. To solve it, place the form tags outside the while loop.
See below for a simplified overview of your problem, without loss of generality):
Current situation (document.radioForm.imageRadio.length = 1):
<!-- Only the first form is selected by JS. All of the others are ignored-->
<form name="radioForm"><input type="radio" name="imageRadio" id="imag1" /></form>
<form name="radioForm"><input type="radio" name="imageRadio" id="imag2" /></form>
<form name="radioForm"><input type="radio" name="imageRadio" id="imag3" /></form>
<!-- Et cetera -->
Desired situation (<form> placed outside the while loop):
<form name="radioForm">
<input type="radio" name="imageRadio" id="image1" />
<input type="radio" name="imageRadio" id="image2" />
<input type="radio" name="imageRadio" id="image3" />
</form>
Fixed code
One form is enough to meet your wishes. The form will only be submitted when you click at the <input type="submit" .. /> button. Since the name attribute of your previous "second" form is obsolete, I've omitted it without breaking any code.
<form name="radioForm"
action="http://128.233.104.33/passimagemodels/uploadServer.php?dbname=<? echo $dbname ?>"
method="post" target="foo" enctype="multipart/form-data">
<table id="newImageTable" border="1" style="position:absolute;">
<?
while($row=mysql_fetch_array($image_query)) {?>
<tr>
<td><img border="0" src="<?=$row['image_path']?>" /></td>
<td>
<input type="radio" name="imageRadio" id="<?=$row['image_name']?>" />
</td>
</tr>
<?}?>
<tr>
<td width="60%">
<!--<input type="file" id="image" /><input type="button" id="imagePathButton" value="Upload Image" onclick="uploadImagePath()" />-->
<input type="submit" name="submitBtn" value="Upload" />
</td>
<td width="10%">
<input type="button" value="Use selected image" id="useImageButton" onclick="post_value();" />
</td>
</tr>
</table>
</form>
I have adjusted only one thing: The onsubmit event handler have been removed. It serves no purpose, and would be a huge annoyance to the user.

nesting form isn't allowed, check How do you overcome the html form nesting limitation?
the result unpreditable but you can use Javascript to workaround with it.
Checkout jQuery serialize example. see how it extract values, and then submit from via DOM.
http://api.jquery.com/serialize/
In your case, file upload form should be the parent, because you need its encode type to work. Or you can optionally iframe it, using the above technique to reorganize data.

Related

In jsp page Confirm only appear on first row form button click. On second row form submit it does not appear and my ajax call is executed

I have developed spring boot web application, on front end I have JSP pages.
I am displaying list of user in table and there are corresponding action(form for each action) like update, reset, delete etc in my each row. On Delete action I am first displaying confirm message. If user press Ok I am making Ajax get call to Controller which delete user from database and return status 0 or 1. I have notice that on first record it show confirm and on OK it send the call and proper response is return back. When I click on second record delete button it does not show confirm message and submit the form which return error 405 Get Method not supported. I have also observe no other record is work as per behavior.
My JSP code is as below
I have tried different way to show confirm message like onclick I have tried to execute it but same is result.
I have remove all other js/css libraries and only j query on my page but it produce same output. I have also tried to create a simple page and simulate same behavior it also show same.
<div id="disabledContent" class="container border rounded bg-light"
style="margin-top: 5px; margin-bottom: 10px;">
<form method="post" action="/createUserDetails">
<button type="submit" value="Add User"
class="btn btn-success btn-lg">+</button>
</form>
<table class="table table-light">
<thead class="thead-light">
<tr>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th colspan="6" scope="col">Actions</th>
</tr>
</thead>
<tbody>
<c:forEach items="${userList}" var="item">
<tr>
<td>${item.firstName}</td>
<td>${item.lastName}</td>
<td>
<form method="post" action="/assignUserLicense">
<input type="hidden" name="userId" value="${item.id}">
<input type="hidden" name="customerUniqueId"
value="${customerUniqueId}">
<button type="submit" value="Assign License"
class="btn btn-warning">Assign License</button>
</form>
</td>
<td>
<form method="post" action="/unassignUserLicense">
<input type="hidden" name="userId" value="${item.id}">
<input type="hidden" name="customerUniqueId"
value="${customerUniqueId}">
<button type="submit" value="UnAssign License"
class="btn btn-warning">Unassign License</button>
</form>
</td>
<td>
<form method="post" action="/modifyUserDetails"
id="modifyUserDetailsForm">
<input type="hidden" name="userId" id="userId"
value="${item.id}"> <input type="hidden"
name="customerUniqueId" id="customerUniqueId"
value="${customerUniqueId}"> <input type="hidden"
name="displayName" id="displayName"
value="${item.displayName}"> <input type="hidden"
name="userPrincipalName" id="userPrincipalName"
value="${item.userPrincipalName}"> <input
type="hidden" name="firstName" id="firstName"
value="${item.firstName}"> <input type="hidden"
name="lastName" id="lastName" value="${item.lastName}">
<button type="submit" value="Modify User"
class="btn btn-warning">Modify User</button>
</form>
</td>
<td>
<form method="post" action="/resetUserUserDetails">
<input type="hidden" name="userId" value="${item.id}">
<input type="hidden" name="customerUniqueId"
value="${customerUniqueId}">
<button type="submit" value="Get User"
class="btn btn-warning">Reset Password</button>
</form>
</td>
<td>
<form id="myDeleteFrom">
<input type="hidden" name="userId" value="${item.id}">
<input type="hidden" name="customerUniqueId"
value="${customerUniqueId}">
<button type="submit" value="Get User"
class="btn btn-warning">Delete User</button>
</form>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<div></div>
</div>
my javascript code
$(document)
.ready(
function() {
$("#myDeleteFrom")
.submit(
function() {
var confirmResponse = confirm("Are you sure you want to delete this user");
if (confirmResponse) {
//Ajax get call
} else {
return false;
}
});
});
I am expecting it should work on any row delete form submit button click.

Ajax HTML FORM not sending input

i've got a problem I can't figure out.
I have a page (index.php) that open a form, includes another page with PHP (indexsearch.php) and close the form.
This included page is working with a script that display some datas from my website, the data are requested on the page with an AJAX function that is linked to search.php, that is working with a table and checkboxes so we can choose which data to work with.
See this schema :
Everything is working fine but the checkboxes are not send even when they are checked. I did added the name and the value in search.php
<td> <input type="checkbox" name="ajout[]" value="<?php echo $result['id']; ?>"/> </td>
I also did not opened another form.
So I guess the problem may come from the fact the AJAX datas work as an independant form that is not included in my page.
Please see the html code :
<body>
<div class="division">
<table id="text-p">
<tr>
<td>
<form action="" method="get" enctype="multipart/form-data">
<textarea id="text-p1" name="text-p1" maxlength="300" placeholder="Text1"></textarea>
</td>
<td>
<textarea id="text-p2" name="text-p2" maxlength="300" placeholder="Text2"></textarea>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
Logo : <input name="logo-p1" type="file" accept="image/*">
</td>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
Logo : <input name="logo-p2" type="file" accept="image/*">
</td>
</tr>
</table>
</div>
<div class="division">
<div width="100%" style="height: 50px;">
<input type="text" name="recherche" id="recherche" style="width: 75%; float:left; display: inline-block;" placeholder="Rechercher...">
<div style="float:right;">
<input type="radio" name="onglet" value="val1" id="act" checked="">Activité
<input type="radio" name="onglet" value="val2" id="sect">Secteur
<input type="radio" name="onglet" value="val3" id="ecr">Ecrans
</div>
</div>
<div width="100%" id="resultats">
<input id="ok" type="button" class="pageselector" name="pageselector" value="1" checked=""><table id="resultat1" width="100%" style="text-align: center;" class="resultatshow">
<tbody><tr>
<td>Cat</td>
<td>Text-1</td>
<td>Text-2</td>
<td>Sélec</td>
</tr>
<tr>
<td>Cat1</td>
<td>NULL</td>
<td>NULL</td>
<td> <input type="checkbox" name="ajout[]" value="1"> </td>
</tr>
<tr>
<td>CAT2</td>
<td>EMPTY</td>
<td>EMPTY</td>
<td> <input type="checkbox" name="ajout[]" value="2"> </td>
</tr>
</table></div>
<input type="submit" value="UPDATE">
</div>
</body>
How can I fix that ?
I am not sure but I guess it can be caused by square brackets in the name attribute of your checkboxes. If you have reason to do it, you have to work with it properly. For example, here is the HTML form field:
<input type='checkbox' name='checkbox[myOption]'>
You have to remember that POST is an array of options. So doing like above you have to access it in the right way on the server side:
$_POST['checkbox']['myOption'];
I don't know if that solves your problem but I hope it helps a little bit

submitting a form automatically using javascript stuck in a continuous loop

I am just wondering where i am going wrong with this code it adds the £95 to the checkout but the problem is it repeatedly does it like its in a loop and i cant seem to figure how to stop it.
<body onLoad="submit1()">
<form method="post" action="" class="jcart" id="foo">
<fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="my-item-id" value="ABC-8" />
<input type="hidden" name="my-item-name" value="Level 1" />
<input type="hidden" name="my-item-price" value="95.00" />
<input type="hidden" name="my-item-url" value="" />
<table>
<tr>
<td width="65%">
<strong>Level 1 all for £95</strong>
</td>
<td width="15%" align="right">
£95.00
</td>
<td>
<input type="text" hidden ="true" name="my-item-qty" value="1" size="3" hidden="true" />
</td>
<td width="20%" align="center">
<input type="submit" name="my-add-button" id="my-add-button" value="add" class="button" />
</td>
</tr>
</table>
</fieldset>
</form>
<script type="text/javascript">
function submit1() {
// It seems that its this causing the problem
document.getElementById("my-add-button").click()// Simulates button click
document.foo.submit() // Submits the form without the button
}
</script>
</body>
Because you call submit1() in body onload it gets executed everytime page is being loaded. Since this function submits form which loads the page again it creates a loop. Delete submit1() function and try this simpler approach:
$("#my-add-button").click(function() {
$("#foo").submit();
});
Try this:
var o = 0;
function submit1() {
if(o === 0){
document.foo.submit() // Submits the form without the button
}
(o === 0) ? o++ : o = 0;
}

Why the text fields are not getting disabled="disabled" in colorbox popup?

I'm using PHP, Smarty , jQuery, Colorbox - a jQuery lightbox plugin, etc. for my website. Now I'm displaying some output in a popup which is generated by using " Colorbox - a jQuery lightbox plugin". Now I want to disable all the text fields present in this popup when the form loads but if I go to the HTML source of page the disabled="disabled" attribute from the <input> tag gets removed and the text boxes are not getting disabled. Can you tell me why this is happening? For your reference I'm putting below the code which will display the data in a Colorbox pop up.
{if $subject_topic_questions}
{foreach from=$subject_topic_questions item=subject_topic_data}
<div class="hidden">
<div id="topics_{$subject_topic_data.subject_id}" class="c-popup">
<h2 class="c-popup-header">Select Topics</h2>
<div class="c-content">
<input type="hidden" name="subject_names[{$subject_topic_data.subject_id}]" id="subject_names" value="{$subject_topic_data.subject_name}">
<h2 class=""> {$subject_topic_data.subject_name}</h2>
<div class="c-tbl-wrap">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="c-tbl">
<tbody>
<tr>
<td>
<p class="custom-form">
<input class="custom-check" type="checkbox" name="" id="">
<label class="blue">Select All</label>
</p>
</td>
{foreach from=$difficulty_levels item=diff_levels key=dkey}
<input type="hidden" name="diff_levels[{$dkey}]" value="{$diff_levels}">
<td width="22%" align="center"><strong>{$diff_levels}</strong></td>
{/foreach}
</tr>
{foreach from=$subject_topic_data.topics item=topic_diff_level_data}
<input type="hidden" name="subject_{$subject_topic_data.subject_id}_topics[]" value="{$topic_diff_level_data.topic_id}">
<tr>
<td valign="middle">
<p class="custom-form">
<input type="checkbox" class="custom-check" name="{$sheet_type}_topics_{$subject_topic_data.subject_id}[]" id="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}" value="{$topic_diff_level_data.topic_id}" onChange="enable_topic_ques('{$sheet_type}', '{$subject_topic_data.subject_id}', '{$topic_diff_level_data.topic_id}'); return false;">
<label>{$topic_diff_level_data.topic_name}</label>
<!-- <input type="hidden" name="topic_names[{$topic_diff_level_data.topic_id}]" value="{$topic_diff_level_data.topic_name}"> -->
</p>
</td>
{foreach from=$topic_diff_level_data.difficulty_level item=diff_level key=key_diff_lvl}
<td valign="middle">
{if $site_id=='ENTPRM'}<em>Total {$diff_level.question_count}</em>{/if}
<input type="text" name="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" id="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" maxlength="3" class="mini" value="{$diff_level.added_no_questions}" disabled="disabled">
<input type="hidden" name="{$sheet_type}_available_questions_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" value="{$diff_level.question_count}">
</td>
{/foreach}
</tr>
{/foreach}
</tbody>
</table>
</div>
<p class="center">Done Cancel</p>
</div>
</div>
</div>
{/foreach}
{/if}
The main code you need to consider is as below from the above code:
<input type="text" name="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" id="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" maxlength="3" class="mini" value="{$diff_level.added_no_questions}" disabled="disabled">
Can you tell me how the disabled="disabled" attribute gets vanishes after page load and if there is any way to apply to it, please tell me. Thanks in advance.
$('.mini').prop("disabled", true);
$('.mini').prop("disabled", false);
try this

Form being submitted on clicking image

Here is my code:
<form action="telecallerinfo.php?action=modify&id=<?php echo $id;?>" method="post" enctype="multipart/form-data">
<table class="panel1">
<tr>
<td>Caller Name: <input name="tele_caller" type="text" size="15" value="<?php echo $tele_caller?>" /></td>
</tr>
<tr>
<td align="right">
<input name="submit" id="submit" type="image" src="images/submit.gif" width="60" onclick="this.form.submit();"/>
<input name="cancel" id="cancel" type="image" src="images/cancel.gif" width="60" onclick="window.location.href='telecallerinfo.php';"/>
</td>
</tr>
</table>
</form>
but then I am clicking on the cancel image. The form is being submitted. How to stop it because I want only the page to be refreshed. Is there any way of giving reset functionality to an image?
Image inputs submit the form when clicked. You need to return false in your event handler to stop the normal action of the button taking place.
<input name="cancel" id="cancel" type="image" src="images/cancel.gif" width="60" onclick="window.location.href='telecallerinfo.php'; return false;"/>
In theory the same should hold for the submit-image, but actually you should just discard the event handler and let the default action submit the form when clicked.
For a button that just navigates to a page you would be better off using a simple link.
Is there any way of giving reset functionality to an image?
If you really wanted:
<img onclick="document.getElementById('someform').reset();">
But it'd be better to do it without JS using a real reset button:
<button type="reset">
<img src="images/cancel.gif" alt="Reset"/>
</button>
This will give you a button graphic around the image, but you can get rid of that with CSS:
border: none; padding: 0; margin: 0; background: transparent;
Are you sure you want a ‘reset’? They're rarely useful, and often annoying if accidentally clicked thinking they're submit buttons...
<img src="images/cancel.gif" alt="DON'T FORGET ALTERNATIVE TEXT">
You may try this if you want it as an image:
<button type="reset">
<img src="image location" alt="Reset" />
</button>
It works but, RESET buttons are destructive and should not
be used, except in situations where destruction of user input is really
desirable.
<input type="reset" name="Reset" id="button" value="Reset" />
Just try this one
<input type="image" src="butup.gif" alt="Submit button">
Some browsers wont support to "alt" tab so there is another way:
<html>
<body>
<form action="example.cgi" method="post">
<input type="text" name="login">
<br>
<input type="image" src="submit.gif">
<input type="image" src="reset.gif">
</form>
</body>
</html>

Categories