I want to check if all radio buttons were checked and if not use alert message. Alert message works but it sends to answers.php anyways without the selected field. How to do that form action wouldn't work if an alert is true? Thank you.
count.js
$(document).ready(function () {
var names = {};
$(':radio').each(function () {
names[$(this).attr('name')] = true;
});
var count = 0;
$.each(names, function () {
count++;
});
$("#qSubmit").click(function () {
if ($(':radio:checked').length !== count) {
alert("not all checked");
}
});
});
form.php
$(document).ready(function () {
var names = {};
$(':radio').each(function () {
names[$(this).attr('name')] = true;
});
var count = 0;
$.each(names, function () {
count++;
});
$("#qSubmit").click(function () {
if ($(':radio:checked').length !== count) {
alert("not all checked");
}
});
});
<form action="bbb.php" method="post" id="quiz" style="margin-top:100px;" >
<?php
while ($row = $result2->fetch_assoc()) {
echo '<div class="row">';
echo '<div class="col-md-8 col-sm-8 col-xs-12">';
echo '<div class="borderis">' . $row['question'] . '</div><br>';
$i++;
echo '<fieldset id="group">';
echo '<label for="' . $row['answer1'] . '"><input type="radio" id="' . $row['answer1'] . '"name="answers' . $i . '" value="' . $row['answer1'] . '"> <bled></bled>
<span>' . $row['answer1'] . '</span></label>' . '<br>';
echo '<label for="' . $row['answer2'] . '"><input type="radio" id="' . $row['answer2'] . '"name="answers' . $i . '" value="' . $row['answer2'] . '"> <bled></bled>
<span>' . $row['answer2'] . '</span></label>' . '<br>';
echo '<label for="' . $row['answer3'] . '"><input type="radio" id="' . $row['answer3'] . '"name="answers' . $i . '" value="' . $row['answer3'] . '"> <bled></bled>
<span>' . $row['answer3'] . '</span></label>' . '<br>';
echo '<label for="' . $row['answer4'] . '"><input type="radio" id="' . $row['answer4'] . '"name="answers' . $i . '" value="' . $row['answer4'] . '"> <bled></bled>
<span>' . $row['answer4'] . '</span></label>' . '<br>';
echo '</fieldset>';
echo '</div></div>';
}
?>
<input type="submit" value="Pateikti atsakymus" name="result" class="qSubmit" id="qSubmit" />
</form>
You need to prevent the default action of the button which is to submit the form
$("#qSubmit").click(function(event) {
if ($(':radio:checked').length !== count) {
// prevent submit
event.preventDefault();
alert("not all checked");
}
});
You need to bind the submit event handler, not the submit button click ideally speaking, and prevent the default behavior of the form.
$(document).ready(function() {
$("#quiz").on('submit', function(e) {
var totalRadio = $(":radio").length;
if ($('radio:checked').length !== totalRadio) {
alert("not all checked");
e.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="bbb.php" method="post" id="quiz" style="margin-top:100px;">
Check 1<input type="radio" name="input1"> Check 1<input type="radio" name="input2"> Check 1<input type="radio" name="input3"> Check 1<input type="radio" name="input4"> Check 1<input type="radio" name="input5"> Check 1<input type="submit" value="Pateikti atsakymus"
name="result" class="qSubmit" id="qSubmit" />
</form>
Related
After I modified the Array index Quantity to change the minus button to delete button when value of the input = 1 but something is wrong and it does not delete
I want to hide the old button for the modification but cant get the new button to submit the form.
Maybe it sounds stupid but as a designer I tryed my best so if someone can see this clearer pls help to correct
PHP SECTION
<?php
// REMOVE ITEM
if (isset($_POST['index_to_remove']) && $_POST['index_to_remove'] != "") {
// Access the array and run code to remove that array index
$key_to_remove = $_POST['index_to_remove'];
if (count($_SESSION["cart_array"]) <= 1) {
unset($_SESSION["cart_array"]);
} else {
unset($_SESSION["cart_array"][$key_to_remove]);
sort($_SESSION["cart_array"]);
}
exit;
}
?>
if ($each_item['quantity'] == 1) {
$fa_icon = 'fas fa-trash-alt';
$operation = 'delete_item';
} else {
$fa_icon = 'fa fa-minus';
$operation = 'minusbot';
}
$action = '<button style="width:45px"
type="button"
onclick="return update_qty(' . $key_of_session . ',\'' . $operation . '\'),submit()"
class="btn-subtract btn btn-primary">
<i class="' . $fa_icon . '"></i>
</button>';
$html .= '<form id="form_id_' . $key_of_session . '">
<div class="input-group-prepend">
<button style="width:45px"
type="button"
class="btn-add btn btn-primary"
onclick="return update_qty(' . $key_of_session .
',\'plusbot\')">
<i class="fa fa-plus"></i></button>
</div>
<input id="kilohere_' . $key_of_session . '"
class="form-control counter"
onchange="return submit_form(' . "'#form_id_"
.$key_of_session ."'". ')"
data-min="1"
max="99"
name="quantity"
type="text"
value="' . $each_item['quantity'] . '"
size="1"
maxlength="2" />
<div class="input-group-append">' . $action .'</div>
<input name="item_to_adjust"
type="hidden"
value="' . $item_id . '" />
<input name="size"
type="hidden"
value="' . $size . '" />
<input name="key_of_session"
type="hidden"
value="' . $key_of_session . '">
</form>';
HTML SECTION OF OLD BUTTON
// DELETEBUTTON
$cartOutput .= '
<td style="border-right:1px solid #0275d8;
border-top:1px dotted #BBBBBB ;
text-align:center;">
<form id="form_delete_'.$key_of_session.'">
<button class="btn btn-primary" type="button" onclick="return submit_form(' ."'#form_delete_". $key_of_session . "'". ',\'true\');">
<i class="fas fa-trash-alt"></i>
</button>
<input name="index_to_remove" type="hidden" value="' . $key_of_session . '" />
<input name="item_id" type="hidden" value="' . $item_id . '" />
</form>
</td>';
JAVASCRIPT
// JS
<script>
function update_qty(id, operation) {
let inputField = document.getElementById('kilohere_' + id);
let input_value = inputField.value;
let post = false;
if (operation == 'minusbot' && input_value > 1) {
inputField.value = parseInt(inputField.value) - 1;
post = true;
} else if (operation == 'plusbot' && input_value < 50) {
inputField.value = parseInt(inputField.value) + 1;
post = true;
} else if (operation == 'delete_item') {
//DO THE OPERATION HERE
var form = document.getElementById("form-id");
document.getElementById("your-id").addEventListener("click", function() {
form.submit();
});
}
if (post == true) {
let form_name = '#form_id_' + id;
submit_form(form_name);
}
}
function submit_form(form_name,delete_item = "false") {
let form = document.querySelector(form_name);
let form_data = new FormData(form);
console.log(form_name)
console.log(form_data)
var url = 'cart.php';
fetch(url, {
method: 'POST',
body: form_data,
})
.then(response => response.text()) // response.json() for json data
.then(data => {
console.log(data)
if (delete_item != "false"){
window.location.href = window.location;
}
})
.catch((error) => {
console.error('Error:', error);
});
}
</script>
I have implemented a short code to display the product search form in the page built using Visual Composer.
add_shortcode( 'sagar-custom-search', 'sagar_custom_search' );
function sagar_custom_search() {
$form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/' ) ) . ' ">';
$form .= '<div>';
$form .= '<label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>';
$form .= '<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'My Search form', 'woocommerce' ) . '" />';
$form .= '<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search', 'woocommerce' ) .'" />';
$form .= '<input type="hidden" name="post_type" value="product" />';
$form .= '</div>';
$form .= '</form>';
echo $form;
echo "sagar tamang";
}
The form can be seen using inspect but it is not being rendered. Can anybody help figure it out.
I am working on a website using CKEditor. I tried to incorporate the Image Uploader plugin (https://ckeditor.com/cke4/addon/uploadimage). When I try to copy in the image, I get an error: "Cannot read property 'getEditor' of undefined". I am fairly certain that I installed the files correctly because I am able to paste a photo into the textarea, but it is unable to post. The documentation (https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_file_upload) of the plugin mentioned a lot of different code that the plugin requires, and it is likely that I am missing those files however the documentation is not very clear and is difficult to understand. If the problem is that I am missing those files, I would greatly appreciate it if someone could explain it to me. Here is the code of my file I am using:
<?php
error_reporting(E_ERROR | E_WARNING | E_PARSE);
require_once('../utils.php');
$access = $_REQUEST['access'];
$selectedPost = $_REQUEST['selectedPost'];
$submit = $_REQUEST['submit'];
$create = $_REQUEST['create'];
$delete = $_REQUEST['delete'];
$save = $_REQUEST['save'];
?>
<html>
<head>
<style>
body
{
background-image: url('../imgs/background.jpg');
text-align: left;
}
h2 {
color: #880000;
}
#wrapper
{
font-family: arial;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 20px;
padding-right: 20px;
background: #FFFFFF;
width: 800px;
}
</style>
<script type="text/javascript" language="javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<div id="wrapper">
<?php
// PRINTING OUT PAGE STUFF
echo '<h2>Manage News Posts</h2>';
// Boot you out if you lack the login stuff in the POST
if(!$access) {
echo '<h2>Invalid Login Credentials.</h2>';
echo 'Back';
}
// We are authenticated
else {
// Something was submitted. Do whatever we are trying to, then dump us back
// to the main post selection UI.
if($submit) {
if($create) {
$query = "INSERT INTO blog_posts VALUES (NULL, '" . $_REQUEST['postSubject'] . "', '" . $_REQUEST['postBody'] . "', CURRENT_DATE)";
$insertPost = doQuery($query);
$query = '';
if($insertPost) {
echo '<i><h4>New Post Created!</h4></i>';
}
else {
echo '<i><h4>Error encountered during New Post creation!</h4></i>';
}
}
else if ($save) {
$query = "UPDATE blog_posts SET subject = '" . $_REQUEST['postSubject'] . "', body = '" . $_REQUEST['postBody'] . "' WHERE post_id = " . $selectedPost;
$updatePost = doQuery($query);
$query = '';
if($updatePost) {
echo '<i><h4>Post Updated Successfully!</h4></i>';
}
else {
echo '<i><h4>Error encountered during post update!</h4></i>';
}
}
else if ($delete) {
$query = "DELETE FROM blog_posts WHERE post_id = " . $selectedPost;
$deletePost = doQuery($query);
$query = '';
if($deletePost) {
echo '<i><h4>Post Deleted.</h4></i>';
}
else {
echo '<i><h4>Error encountered during deletion!</h4></i>';
}
}
$selectedPost = false;
$save = false;
$create = false;
$delete = false;
}
// Nothing selected, show the selection page.
if(!$create && !$selectedPost) {
echo '<form method="post" action="admin_posts.php?access=1">';
$query = "SELECT * FROM blog_posts ORDER BY post_id ASC";
$all_posts = getResults($query);
// Lay out selections
foreach($all_posts as $post) {
echo '<input type="radio" name="selectedPost" value="' . $post['POST_ID'] . '"/>' . ' ' . $post['SUBJECT'] . ' - (Posted on ' . $post['POST_DATE'] . ')<br/>';
}
echo '<input type="submit" value="Select" />';
echo '</form>';
// Create post button, gets its own form.
echo '<br/><br/>';
echo '<form method="post" action="admin_posts.php?access=1&create=1">';
echo '<input type="submit" value="Write New Post">';
echo '</form>';
// Back button
echo 'Back';
}
// End initial "nothing selected" box
// Something is selected, display its info for editing.
else {
echo '<br/>';
$post_subject = '';
$post_body = '';
if(!$create) {
$query = "SELECT * FROM blog_posts WHERE post_id = $selectedPost";
$post_data = getSingleRow($query);
$post_subject = $post_data['SUBJECT'];
$post_body = $post_data['BODY'];
}
// Print out the dialogue for creating and editing post
echo '<form method="post" action="admin_posts.php?access=1&submit=1">';
echo '<h4>Subject</h4>';
echo '<input name="postSubject" type="text" value="' . $post_data['SUBJECT'] . '" size=100/>';
echo '<br/>';
echo '<h4>Post Body</h4>';
echo '<textarea id="postBody" name="postBody" type="text" rows="25" cols="75">' . $post_data['BODY'] . '</textarea>';
echo '<br/><br/>';
if($create) {
echo '<input type="hidden" name="saveNewPost" value="1">';
echo '<input type="hidden" name="create" value="1">';
}
else {
echo '<input type="hidden" name="selectedPost" value="' . $selectedPost . '">';
echo '<input type="hidden" name="save" value="1">';
}
echo '<input type="submit" value="Save Post" />';
echo '</form>';
// Delete button. Only if you are editing.
// Gets its own submit form.
if(!$create) {
echo '<form method="post" action="admin_posts.php?access=1&submit=1&delete=1" onsubmit="return confirm(\'Are you sure you want to delete this post?\');">';
echo '<input type="hidden" name="selectedPost" value="' . $selectedPost . '">';
echo '<input type="submit" value="Delete Post">';
echo '</form>';
}
echo '<br/><br/>';
// Back button
echo 'Back';
}
}
?>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function()
{
CKEDITOR.replace( 'postBody' );
});
</script>
</div>
</body>
</html>
I need for this php file a modification but I don't know javascript. This makes it really hard for me how to do it.
I want to do this:
If checkbox is checked than activate my submit button else don't activate them (default).
I already did some modifications:
I added the checkbox with id= checkbox and I added the parameter disabled="disabled" to my button.
This is working. Now I need only to activate the button when checkbox is checked.
But I have now 2 problems:
I don't know where to put the javascript code to my file
I don't know to I can call or activate javascript in my code
Would be really nice if someone could help me.
<?php
if(isset($_POST['photo-name'])){
$photo_name = $_POST['photo-name'];
}
if(isset($_POST['photo-title'])){
$photo_title = $_POST['photo-title'];
}
if(isset($_POST['photo-description'])){
$photo_description = $_POST['photo-description'];
}
if(empty($photo_name)){
$photo_name = '';
}
if(empty($photo_description)){
$photo_description = '';
}
$sql= $wpdb->get_results("SELECT name,id FROM ".$wpdb->prefix."u_gallery_cat ORDER BY name ASC");
$html .= '<div><label for="photo-name"><strong>'.__('Caption:','user-gallery').'</strong></label></div>';
$html .= '<div class="contest-input"><input type="text" name="photo-name" id="photo-name" value="'.$photo_name.'" /></div>';
$html .= '<div><label for="photo-content"><strong>'.__('Description:','user-gallery').'</strong> <span class="contest-small-font-2">'.__('(Optional)','user-gallery').'</span></label></div>';
$html .= '<div class="contest-input"><textarea class="photo-description-textarea" name="photo-description" id="photo-description">'.$photo_description.'</textarea></div>';
if(!empty($sql)){
$html .= '<div><label for="photo-category"><strong>'.__('Category:','user-gallery').'</strong></label></div>';
$html .= '<select name="photo-category" id="photo-category">';
foreach($sql as $item){
$html .= '<option value="'.$item->id.'">'.$item->name.'</option>';
}
$html .= '</select>';
}
if ($photo_limit == 100000000){
$html .= '<div><label for="user-photo"><strong>'.__('Select image:','user-gallery').'</strong></label></div>';
}else{
$html .= '<div><label for="user-photo"><strong>'.__('Select image: (max.','user-gallery').' '.$p_limit.')</strong></label></div>';
}
$html .= '<div class="contest-input"><input type="file" name="user-photo" id="user-photo" size="50" accept="image/*" onchange="loadFileU(event)" class="selimg"></div>';
$html .= '<img id="coutput"/>';
$html .= '<div class="ug-clear"></div>';
$html .= '<input type="hidden" name="user_id" />';
$html .= '<input type="hidden" name="action" value="new_post" />';
$html .= '<div class="contest-button-div">';
$html .= '<div class="contest-button"><input type="checkbox" name="chk" id="chk" value="yourvalue" class="checkbox"></div>';
$html .= '<div class="contest-button"><input type="submit" value="'.__('Add Photo','user-gallery').'" id="submit" disabled="disabled" name="submit" class="ug-styled-button tooglebutton" /></div>';
$html .= '<div class="ug-clear"></div>';
$html .= '</div>';
$html .= '<div class="ug-clear"></div>';
$html .= '</form>';
$html .= '<div class="ug-clear"></div>';
$html .= '</div>';
}
?>
Without using Jquery :
On your checkbox add a onchange() event to trigger Javascript:
<div class="contest-button"><input type="checkbox" name="chk" id="chk" value="yourvalue" class="checkbox" onchange="openSubmit()"></div>
Then for your script :
<script type="text/javascript">
function openSubmit(){ // This function is called by the checkbox click
if(document.getElementById('chk').checked == true){ // If it is checked
document.getElementById('submit').disabled = false; // Then we remove the disable attribute
}
</script>
Using Jquery :
$('#chk').change(function(){ // You put an event on your checkbox here
if($(this).is(':checked')){ // If statut of checkbox is checked
document.getElementById('submit').disabled = false; // Then we remove the disable attribute
}
});
You can put this script at the bottom of your file after your PHP.
I have a dynamic form that is generated by php.
print '<div class="choices">';
print '<input type="radio" class="answer' . $q . '" id="answer'. $q . '" name="answer'. $q . '"value="1"/>' . $row['answer1'] .'<br/>';
print '<input type="hidden" class="answer' . $q . '" id="answer'. $q . '" name="answer'. $q . '"value="1"/>';
print '<input type="radio" class="answer' . $q . '" id="answer'. $q . '" name="answer'. $q . '"value="2"/>' . $row['answer2'] .'<br/>';
print '<input type="hidden" class="answer' . $q . '" id="answer'. $q . '" name="answer'. $q . '"value="1"/>';
print '<input type="radio" class="answer' . $q . '" id="answer'. $q . '" name="answer'. $q . '"value="3"/>' . $row['answer3'] .'<br/>';
print '<input type="hidden" class="answer' . $q . '" id="answer'. $q . '" name="answer'. $q . '"value="1"/>';
print '<input type="radio" class="answer' . $q . '" id="answer'. $q . '" name="answer'. $q . '"value="4"/>' . $row['answer4'] .'<br/>';
print '<input type="hidden" class="answer' . $q . '" id="answer'. $q . '" name="answer'. $q . '"value="1"/>';
print '<input type="hidden" class="your" id="answer" name="correctanswer'. $q . '" value="0"/>';
print '</div>';
I want to change the value of input type hidden which has a class of your that is next to div .choices. I used the jQuery below.
$('input[type=radio]').on('click', function(){
// alert(this.value);
$(".choices ~ .answer").val(this.value);
});
But it is not working. Any suggestions?
EDIT:
HTML
First of all, you have the same ID on multiple elements. IDs should be unique. I'm unclear as to where input.your is located, your description says it's a sibling of div.choices, but the code indicates it's a child of div.choices...
If input.your is a sibling of div.choices:
$('input[type=radio]').on('click', function(){
$(this).parent().siblings('.your').val($(this).val());
});
If input.your is a child of div.choices:
$('input[type=radio]').on('click', function(){
$(this).siblings('.your').val($(this).val());
});
EDIT: misunderstood question