We Keep Coding

jquery prevent box to close after submit a form

After setting up a simple box dialog form I would like to keep the box open after submitting the form, but the box keeps closing.
After a little search into the jquery docs I came with preventDefault method on the event. I added that to the code, but the box keeping closing.
Here is the code:
$(document).ready(function(e) {
$('#toggle').click(function(e) {
$('#box').toggleClass('max');
e.preventDefault();
});
$('#close').click(function(e) {
/* $('#box').remove();*/
});
});
It did not work, I've tried the stopPropagation() and that did not worked either.
someone can spare a hint, please?
the html:
<div id="box" class="min">
<span id ="toggle" class="fa fa-window-restore">
<b>Open Dialog</b>
</span>
<form action="/conversations/3/reply" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" />
<input type="hidden" name="authenticity_token" value="VgKXI1p4MumSlvZF51pbXYKMMRLFKs0Us4NUB2+O7VZalzk++QDNQ5SsQMzvt4HlgUnlMa3ux54IDc3R/tGZhA==" />
<textarea name="body" id="body" cols="3" class="form-control" placeholder="Type something..." required="required"></textarea>
<button name="button" type="submit" class="btn_green">Send Message</button>
</form>
</div>

You need to call preventDefault() on the form's submit event in order to prevent the page from being replaced by the form submission.
document.querySelector('form').addEventListener('submit', e => e.preventDefault());

Transfer input value to div used as submit button

Is there a way to transfer the value of an input to a div that I use as a submit button?
Example:
<form action="./exam/x/u_exam_run.exe.php" method="post" style="display:inline">
<input type="hidden" name="qst" value="<?=$get_QUID_text_sha;?>" />
<input type="hidden" name="uex" value="<?=$_get_EUID;?>" />
<?php
foreach($question_answers as $answer_text_sha => $answer_text) {
if($reformat_output) {
$answer_text = reformat_output_table($answer_text);
}
?>
<div name="akwMB" class="<?=$_SESSION['akw_list'][$get_QUID_text_sha]==$answer_text_sha ? 'list-item-answer-hover' : 'list-item-answer';?>" onclick="this.parentNode.submit()">
<input type="hidden" name="akwMB" value="<?=$answer_text_sha;?>"/>
<div class="question-list" >
<span><?=$answer_text;?></span>
</div>
</div>
<?php
}
?>
</form>
I'm trying to get $answer_text_sha to get submitted when I click the div, but everything I've tried didn't work. Is there a way to do this? Thanks.

I managed to get it work, I don't know how OK my solution is but I used increment for each answer id and used <label for="id">.
If anyone needs this by any chance, this is how I did it
<input id="MB<?=$i++;?>" style="display:none;" type="submit" name="akwMB" value="<?=$answer_text_sha;?>"/>
<label for="MB<?=$ii++;?>">
<div name="akwMB" class="<?=$_SESSION['akw_list'][$get_QUID_text_sha]==$answer_text_sha ? 'list-item-answer-hover' : 'list-item-answer';?>" onclick="this.parentNode.submit()">
<div class="question-list" >
<span><?=$answer_text;?></span>
</div>
</div>
</label>

Unable to manipulate DOM element with jQuery

I've run into a very strange situation. I have a simple registration form which has an input box to validate a registration. The whole site is essentially one large stylized form. In my mockup (CodePen demo), everything works fine. If the key matches, the input background is shaded green.
HTML
<div id="workshops">
<h1>Upcoming Workshops</h1>
<p>To register for a workshop, fill in your name information and then click on the button next to each session title. Click <b>Register</b> when you're finished.</p>
<div id="form">
<form id="classSignup" class="noSubmit" onsubmit="handleFormSubmit(this)">
<input id="email" name="email" type="hidden" value="<?= Session.getActiveUser().getEmail(); ?>" />
<input id="first" name="first" type="text" onfocus="this.value=''" value="First Name" required />
<input id="last" name="last" type="text" onfocus="this.value=''" value="Last Name" required />
<select id="bldg" name="building"></select>
<input type="submit" value="Register" />
<div id="list">
<div class='row' id='row9'>
<span class='time'>8:00</span>
<span class='date'>6/20/2017</span>
<input type='checkbox' name='wkshp' value='6/20/2017'/>
<span class='title'>
<label for='wkshp'>Demo workshop</label>
</span>
<span class='desc'>This is the class description</span>
<div class='meta'>
<span class='loc'>Admin building</span> |
<span class='cat'>1a, 2b, 2c, 3d</span> |
<span class='type'>Online</span> |
<span class='seats'>Seats: 15</span>
</div>
<label>
<input type='text' class='lock' name='regCode9' value='Code' />
</label>
</div>
</div>
</form>
</div>
</div>
Example Script
$("div.lock").keyup(function() {
if( $(this).val() == "abc") {
$(this).css('background-color', 'rgba(0, 255,0,0.4)')
} else {
$(this).css('background-color', 'white')
}
})
When I move this over to my live site, I can't access the input element with jQuery. I can find it in the DOM and edit CSS in the Inspector, but regardless of what I do, I can't even get an error message to log in the console. I have plenty of other scripts running with no problems on the page.
I'm really at a loss as to why it works in one site but not another. Any ideas are appreciated.

Try delegating the keyup event
$("body").on("keyup","input.lock", function() {
if( $(this).val() == "abc") {
$(this).css('background-color', 'rgba(0, 255,0,0.4)');
} else {
$(this).css('background-color', 'white');
}
});

Issue with form validation Javascript

I am using Bootstrap and I have two identical forms. I am trying to add form submission to Google Search results and it works but when I include two of the same form it doesn't work because of the id being the same on both. How can I fix this? The ID needs to be the same because google looks for the "G". The reason I have two forms is because I have it displayed differently on mobile. Using media queries. Below is my code thanks.
<form name="globalSearch" class="navbar-form" role="search" form action="" onsubmit="return validateSearch()">
<div class="input-group add-on">
<input type="hidden" name="cx" value="" />
<input type="hidden" name="cof" value="FORID:11;NB:1" />
<input type="hidden" name="ie" value="UTF-8" />
<input class="form-control" placeholder="Search entire site..." id="q" name="q" type="text">
<div class="input-group-btn">
<button class="btn btn-default btnSubmit" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
function validateSearch() {
if (globalSearch.q.value.length == 0) {
document.getElementById("q").value = "Enter a Value";
document.getElementById("q").style.color = "red";
return false;
}
}

You probably want to change the placeholder, so the user don't have to delete the text than type in a query. Please view updated function.
function validateSearch() {
var q = document.getElementById('q');
if (q.value.length == 0) {
q.setAttribute('placeholder', 'Enter search term')
q.style.borderColor = "red";
return false;
}
}

Two elements can not share same ID.
Either use CSS styling to make different looks in mobile, either hide one of forms from webserver (PHP/etc) side either dont use getElementById - instead, use jQuery:
<form name="globalSearch" ... >
<input name="q" data-input-type="desktop" id="q">
..
</form>
<script>
function validateSearch() {
var field = $("input[data-input-type="desktop"]');
field.val("Enter value here...");
field.css("color","red");
}
</script>

Same behavior apply to different elements

For div.spot1 and div.spot2 I want the same behaviors - hide delete button when image input is empty, show delete btn when image is uploaded, change image src when image is uploaded, click delete btn to send ajax request to server etc. Of course I can copy/paste js code of spot1 to spot2, only changing the class from first to second. But say I have 4 spots like this, then I will have four almost identical code in my js file. I fear that's not the best practice. What should I do?
HTML:
<form class='upload' action="" method="POST" enctype="multipart/form-data">
<div class="spot1">
<span class='filename first'>FILE 1</span>
<button type='button' class='delete first'>&#x274C</button>
<input type="file" name="image" class="input first" accept="image/*">
<input type="button" value="+" class="browse first"/>
<img class="tn first" src="{{turl}}">
<span class="status first"></span>
</div>
<div class="spot2">
<span class='filename second'>FILE 1</span>
<button type='button' class='delete second'>&#x274C</button>
<input type="file" name="image" class="input second" accept="image/*">
<input class="browse second" type="button" value="+"/>
<img class="tn second" src="{{turl}}">
<span class="status second"></span>
</div>
</form>
Part of the JS (just for making an example):
if ( $('.tn.first').attr('src') == "") {
...
}
$('.browse.first').on("click", function () {
$('.input.first').click();
});
$('.input.first').on('change', function () {
...
};

That is indeed not best practice.
If you know what kind of structure you will have (exactly), you can do something like this:
var FileModule = function(elem) {
// Throw your events here
}
Instantiating it is as simple as passing your elements in it. If you are using jQuery, you can do this exactly using the $.fn.extend() function, as follows:
$.fn.FileModule = function() {
return this.each(function() {
// `this` is your element
$(this).find(".input.first").on("change", function() { ... });
});
};
From there, you can initialize your module (that is what it is) by calling FileModule on a jQuery selector that contains your spots.
If you want even more dynamic, consider binding custom events on it in order to allow external portions of your code to interact with it. This is beyond the scope of your question, hozever.

If you have multiple elements of the same type, that represent the same type of data and/or functionality, they should have the same class name. You can add additional attributes to your elements that tell you which one of that class it is, like this:
<div class="spot" index="1">
<span class='filename'>FILE 1</span>
<button type='button' class='delete'>&#x274C</button>
<input type="file" name="image" class="input" accept="image/*">
<input type="button" value="+" class="browse"/>
<img class="tn" src="{{turl}}">
<span class="status"></span>
</div>
This lets you now write:
$('.browse').on("click", function () {
$(this).find('.input').click();
});

How about change markup following way
<form class='upload' action="" method="POST" enctype="multipart/form-data">
<div class="spot" id="spot1">
<span class='filename'>FILE 1</span>
<button type='button' class='delete'>&#x274C</button>
<input type="file" name="image" class="input" accept="image/*">
<input type="button" value="+" class="browse"/>
<img class="tn" src="{{turl}}">
<span class="status"></span>
</div>
<div class="spot" id="spot2">
<span class='filename'>FILE 2</span>
<button type='button' class='delete'>&#x274C</button>
<input type="file" name="image" class="input" accept="image/*">
<input class="browse" type="button" value="+"/>
<img class="tn" src="{{turl}}">
<span class="status"></span>
</div>
</form>
And JS
$('.spot .browse').on('click', function () {
$(this).parent().find('.input').click();
});
$('.spot .input').on('change', function () {
alert('I\'m input of type file of ' + $(this).parent().prop('id') + ' and I\'m changed');
});
Here is jsFiddle demo

Since you're already using jquery there is a selector which selects based on a substring within in an attribute (attribute contains).
$('div[class*="spot"]').doSomething();