I have a g:uploadForm that appears inside of a modal dialog. I don't want it to close if no file is chosen for upload and the user presses the Upload button, instead, I want it to display an error like "please choose a file". Currently it does close and I was wondering if there is any way to suppress this. There are a few radio button on this form also in a group and I also don't want the form to close if no choice is made from the radio button group. Currently it does close if no choice is made. Here is my form as it is currently:
<div class="modal" id="promptUpload">
<h3></h3>
<div id = "uploadborder">
<g:uploadForm action="upload">
<div id = "fileType">
<p><u>File Type</u></p>
<label for="excelFile">Excel:</label><g:radio id = "excelFile" name="fileTypegrp" value="1" checked="true"/><br>
<label for="textFile">Text File(delimited):</label><g:radio id = "textFile" name="fileTypegrp" value="2" disabled="true"/><br>
<label for="xmlFile">XML:</label><g:radio id = "xmlfile" name="fileTypegrp" value="3" disabled="true"/>
</div>
<div id = "dataType">
<p><u>Data Type</u></p>
<label for="accData">Account Data:</label><g:radio id = "accData" name="dataTypegrp" value="1"/><br>
<label for="entData">Entity Data:</label><g:radio id = "entData" name="dataTypegrp" value="2"/><br>
<label for="indData">Individual Data:</label><g:radio id = "indData" name="dataTypegrp" value="3"/><br>
</div>
<div id = "uploaderfield">
<input id = "chseFile" type="file" name="file"/><br>
<input id = "submFile" type="submit" value="Upload" />
<button id = "cancel1" class = "close" type="button"> Cancel </button>
</div>
</g:uploadForm>
I am using jQuery UI Tools to bring up this modal which contains the form. I've notice that if I change my upload button to simply:
<button id = "submFile"></button>
it still closes the modal and submits the form. That I find strange. The reason I included the radio buttons in my g:uploadForm is because I need their values in my params.
You have to set the type = button to supress the form submission.
Related
I have a HTML form that contains dialog, and the dialog contains inputs
When user complete dialog inputs and click send, the values appear in the same page of form in divusing JavaScript.
Then, when user complete other fields in form and click submit, user goes to another php page than contains entered values of all fields.
I want to get the values of dialog to php page
My form code:
<form id="form" action="message.php" method="POST" >
<div class="container" id="executive-bodies-information">
<!-- details-of-partners Dialog -->
<dialog id="details-of-partners">
<h2>بيانات الشركاء ، الملاك المستفيدون النهائيون ، المالكين المستفيدين</h2>
<label for="details-of-partners-name">الاسم</label>
<input type="text" id="details-of-partners-name"
name="details-of-partners-name" placeholder="الاسم" >
<label for="details-of-partners-date-of-expiry">تاريخ الانتهاء</label>
<input type="date" id="details-of-partners-date-of-expiry"
name="details-of-partners-date-of-expiry" placeholder="تاريخ الانتهاء">
<button button type="button" id="details-of-partners-send" >إرسال</button>
<button button type="button" id="details-of-partners-cancel"
onclick="closeDialog('details-of-partners')">إلغاء</button>
</dialog>
<!-- END details-of-partners Dialog -->
<div>
<button class="btn-add" type="button" onclick="showDialog('details-of-partners')">＋ جديد</button>
<div id="details-of-partners-container"></div>
</div>
</div>
<label for="preferred-language">اللغة المفضلة</label>
<select name="preferred-language" id="preferred-language" required>
<option value="" disabled selected>اختر</option>
<option value="english">الانجليزية</option>
<option value="arabic">العربية</option>
</select>
<div class="center">
<button type="submit" id="submit"><h1>إرسـال</h1></button>
</div>
</form>
This button is clicked to show dialog:
This is the dialog:
Here is the result of dialog, while user enter new dialog with new values, a div is added with these new valaues in form page:
My JavaScript code to enable values to display in form page:
<script>
function showDialog(id) {
var dialog= document.getElementById(id);
dialog.show();
}
function closeDialog(id){
var dialog= document.getElementById(id);
dialog.close()
}
document.getElementById("details-of-partners-send").addEventListener('click', function(){
var name= document.getElementById("details-of-partners-name").value;
var date_of_expiry= document.getElementById("details-of-partners-date-of-expiry").value;
document.getElementById("details-of-partners-container").innerHTML+=
`
<div class="border" >
<div class="details-box">
<span>الاسم: </span>
<span>${ name}</span>
</div>
<div class="details-box">
<span>تاريخ الانتهاء: </span>
<span> ${date_of_expiry}</span>
</div>
</div>
`;
closeDialog("details-of-partners");
})
</script>
An example of another code in message.php where I collect all values of form and echo values in it:
<span for="preferred-language">اللغة المفضلة: </span>
<span><?php
if(isset($_POST['preferred-language'])){
$lang= $_POST['preferred-language'];
if($lang=="english"){
echo "الانجليزية";
}else{
echo "العربية";
}
}
?> </span>
It will look like this:
And this is What I need, collect value from dialog using Javascript, then appears these values of div in php page
Sorry for taking long time to explain it in details
i suggest adding a hidden input where you can store the values from the dialogue so they can be submitted with the form, and since there can be multiple dialogues, you need an increment variable.
Before submit button : <input type="hidden" name="increment" id="increment" />
Outside of the onclick event: var incrm = 1
document.getElementById("details-of-partners-container").innerHTML+=
...
<input type="hidden" name="name${incrm}" value="${name}" /> //close .innerHTML
document.getElementById("increment").value = incrm;
incrm++;
I am trying to make the link inside the form go to signup2.php. Instead it is going to loginprocess.php. Is there any way to do this by keeping the signup link inside the form?
<form action = "loginprocess.php" method = "post" enctype="multipart/form-data">
<h1>Login</h1>
<p> Username:<input type = "text" name = "username"></p>
</br>
<p> Password:<input type = "password" name = "password"></p>
</br>
<input class = "submit" type = "submit" name = "submit" value = "Login">
<button>Don't have an account? Sign Up</button>
</form>
Buttons inside forms are automatically treated as submit buttons as is apparent in this post. If you want to alter this functionality, there are a few options.
Remove the button from the form altogether; the link will suffice if you are doing class-based styling
Override the default form-button behaviour by changing the button type
<button type="button">Don't have an account? Sign Up</button>
You can choose which buttons submit the form using Javascript:
Change the form onsubmit value
Manually submit the form by targeting the submit button
<form action="loginprocess.php" method="post" enctype="multipart/form-data" onsubmit="return false;"></form>
const submit_button = document.querySelector('.submit');
const form = document.querySelectors('form')
submit_button.addEventListener('click', () => form.submit())
I have a modal in my project that popsup on button click:
<div class="modal modal-visually-hidden">
<h3 class="modal__header">Оставить отзыв</h3>
<button name="Close the window" class="modal__close-button">x</button>
<div class="modal__form-container">
<form id="modal__form" action="#">
<label for="modal__form--name">Пожалуйста, заполните поле</label>
<input id="modal__form--name" type="text" placeholder="Имя" required> <!--this is the field needed to autofocus on modal open event-->
<input id="modal__form--qualities" type="text" placeholder="Достоинства">
<input id="modal__form--drawbacks" type="text" placeholder="Недостатки">
<input id="modal__form--submit" class="global-hover" type="submit" value="оставить отзыв">
</form>
</div>
Here is the button to pop the modal up:
<div class="feedback__button-container">
<button name="Leave a feedback" id="feedback__button" class="feedback__button">оставить отзыв</button>
</div>
I use the following JS to show the popup:
const activatePopupButton = document.querySelector('#feedback__button');
const commentPopup = document.querySelector('.modal');
const closePopupButton = document.querySelector('.modal__close-button');
const nameInputField = document.querySelector('#modal__form--name'); /* I select the field for further autofocus */
closePopupButton.addEventListener('click', function() {
commentPopup.classList.add('modal-visually-hidden');
document.querySelector('body').style.overflow = 'visible';
});
activatePopupButton.addEventListener('click', function() {
commentPopup.classList.remove('modal-visually-hidden');
nameInputField.autofocus = true; /*this line should autofocus the field in question*/
console.log(nameInputField.autofocus);
document.querySelector('body').style.overflow = 'hidden';
});
Modal is hidden with a class '.modal-visually-hidden' that is styled as display:none;
When the button is pressed the popup shows up and the first field suppose to get in focus with the line nameInputField.autofocus = true;
But it just won't. What am I doing wrong?
The autofocus attribute focuses the input on page load. You cannot set it after the DOM has loaded. Instead, try this:
nameInputField.focus();
I have a form on a page, with a checkbox input field. I also have a table on the page with a column that has true/false values. Each row in the table also has a checkbox with id="selectedReviewTypeYear". There is also a button with id="getDataToEdit".
When the getDataToEdit button is clicked, the javascript checks to see if any id="selectedReviewTypeYear" boxes are checked. If a box is checked, a div is opened up with form fields prepopulated based on the row selected. If no boxes are checked, the div remains hidden.
My problem is that the checkboxes aren't getting checked when the table data is "true." Here is the javascript:
$('#getDataToEdit').on('click', function (){
$('#reviewTypeTable').find('tr').each(function (){
var row = $(this);
if (row.find('input[id="selectedReviewTypeYearID"]').is(':checked')){
var idx = table.row(this).index();
var vReviewName = document.getElementById("editReviewTypeYear-name");
var vAllowMultiple = document.getElementById("allowMultiple");
var vAllowMultipleSpan = document.getElementById("allowMultipleSpan");
vReviewName.innerHTML = table.cell(idx, 2).data();
if (table.cell(idx, 3).data() == "true"){
$("#allowMultiple").prop("checked", true);
vAllowMultipleSpan.innerHTML = table.cell(idx, 3).data();
}
else {
$("#allowMultiple").prop("checked", false);
vAllowMultipleSpan.innerHTML = table.cell(idx, 3).data();
}
showHide.style.visibility = 'visible';
}
})
});
For testing purposes, I added a span element to the form called allowMultipleSpan. This was simply so I could see if the javascript is able to read the data in the table field, which it is. When I select a row, then click the button, the div opens up with the vReviewName.innerHTML populated correctly as well as the allowMultipleSpan populated correctly. However, the checkbox is not getting checked if the data is "true".
I am running JQuery 2.1.1. So far, I have tried using the following variations of the script, all with the same result:
From the JQuery (1.6+) spec:
$("#allowMultiple").prop("checked", true);
From the jQuery (1.5-) spec:
$("#allowMultiple").attr("checked", true);
From the Javascript spec:
document.getElementById("allowMultiple").checked = true;
Here is the HTML for my form:
<div class="widget-header"><h3>Edit: <span id="editReviewTypeYear-name" style="color: blue"></span></h3></div>
<div class="widget-content">
<form id="editReviewTypeYear-form" class="form-horizontal" url="submitReviewTypeYear.htm">
<div class="form-group">
<label class="col-sm-2 control-label">Allow Multiple: </label>
<div class="col-sm-10">
<input type="checkbox" id="allowMultiple" name="allowMultiple" />
<span id="allowMultipleSpan" style="color: blue"></span>
</div>
</div>
<div class="form-actions">
<button id="submitReviewTypeYear" type="submit">Save</button>
<button class="btn btn-small btn-warning reg-cancel" id="submitReviewTypeYear-cancel" type="button" name="Cancel" value="cancel">Cancel</button>
</div>
</form>
</div>
Have you tried if (table.cell(idx, 3).data() == true)?
You were always getting the false condition because you were comparing a boolean with "true" as a string.
My site structure consists on an index.php which is styled by a css file. It then includes the following php code in a separate file:
<?php include("globals.php"); ?>
<form action="<?php echo $website.$relative_string;?>" name="subscribe" onsubmit="javascript:return checkEmail(this);" method="post">
<div id="cell8" class="titlecell2"><h3>Email:</h3></div>
<div id="cell9" class="inputcell2">
<input type="text" class="inputfield2" name="email" value="Your Email..." id="email2" maxlength="255" onfocus="this.value='';">
</div>
<div id="cell10" class="textcell3">
<input name="group" type="hidden" id="group[]" value="<?php echo $group; ?>">
<input name="subscribe" id="sub" type="radio" value="true" checked>
</span>Subscribe </p>
</div>
<div id="cell11" class="buttoncell">
<button type="submit" name="Submit2" value="Join" id="submitButton2">
<span>OK</span>
</button>
</div>
<div id="cell8" class="textcell4">
<input type="radio" name="subscribe" id="unsub" value="false">
</span>Un-Subscribe </p>
</div>
</form>
It appears on screen with no problems in the correct layout as my css style sheet. What I would like this to do is when I select the "Subscribe" radio button the submit button text "OK" changes to "Join". When I click on the Unsubscribe button text "OK" or "Join" changes to "Leave".
I tried to make some code from research:
if(document.getElementById('sub').checked) {
document.write("<span>Join</span>"
}
else if(document.getElementById('unsub').checked) {
document.write("<span>Leave</span>)
}
I think this kind of worked in that it changed to Join (replacing the OK line, but obviously didn't update on clicking unsubscribe. I guess it would update on refreshing the page if my default wasn't join. I guess I need to do some form of onclick but then I have no idea how to adjust that span ok bit.
Please help?
Many thanks Chris
Here is a solution in plain JavaScript without jQuery. It avoids the unnecessary overhead.
This should work, but I haven't had a chance to test it:
var sub = document.getElementById('sub'); // Save element to a variable, so you don't have to look for it again
var unsub = document.getElementById('unsub');
var btn = document.getElementById('submitButton2');
sub.onchange = function() //When sub changes
{
if(sub.checked) //If it's checked
{
btn.innerHTML = "<span>Join</span>"; // Set button to Join
}
else // If not..
{
btn.innerHTML = "<span>OK</span>"; // Set button to OK
}
}
unsub.onchange = function() //When unsub changes
{
if(unsub.checked) //If it's checked
{
btn.innerHTML = "<span>Leave</span>"; // Set button to Leave
}
else // If not..
{
btn.innerHTML = "<span>OK</span>"; // Set button to OK
}
}
However, you should not do it like this.
You should combine the two radio buttons into a radio group.
In that case you will listen for radio group to change, get the value of the radio group, set button text according to the value.
if you label your <span>OK</span> to something like <span id="your_id">OK</span> then added a class to your radio button like this <input class="your_class" type="radio" name="subscribe" id="unsub" value="false"> them...
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#your_class").change(function () {
if ($(this).is(':checked')) {
$("#your_id").text('Join');
}else {
$("#your_id").text('Leave');
}
});
</script>
This was all written in the browser so let me know if there are any problems.