I have some input fields that are displayed from a loop using foreach. After click i want all of them to be required by using jquery. If the loop shows 1 or 3 inputs the required functions works perfectly but if the loop shows 2 inputs, only the first is required and the form can be saved with the second input empty. How can i solve this issue ?
Any help is really appreciated.
<form class="input-seg">
<?php
foreach($GET_INPUT as $get_input){
?>
<div class="form-group">
<label class="control-label col-sm-3"><?=$get_input->name;?></label>
<div class="col-sm-3">
<input type="text" name="inputname[]" class="form-control inp" >
</div>
</div>
<?php
}
?>
</form>
JQUERY
$('.input-seg').click(function() {
if($(".inp").val() == ""){
$(".inp").focus();
$('.inp').css('border', '2px solid');
$('.inp').css('border-color', 'red');
for(i=0;i<3;i++) {
$('.inp').fadeTo('slow', 0.1).fadeTo('slow', 1.0);
};
return false;
}
});
You should use focusout to validate your fields. The link shows a lot of examples. Handle $(this) inside your event listener is a much more elegant approach:
$('.inp').focusout(function() { validate your field element object $(this) });
Related
I have a very simple problem. Whenever I click on div I want the data binding to be applied to the file input.
<div>click me</div>
<input type="file" wire:model="photo"> <!-- while clicking on div, it should do the data binding to this file input -->
I have been searching for it in the documentation but couldn't find any clue. Is it possible to do that?
Okei i was searching and testing, to see if i can acomplish that, and there is a solution with jquery:
<div id="trigger">click me</div>
<input type="file" id="file_input" wire:model="photo">
$("#trigger").unbind("click").bind("click", function () {
$("#file_input").click();
});
i will give credit where i found the answer:
triggering a file input button
if your idea is to use livewire only, you could create a function
public function fileTrigger(){
$this->dispatchBrowserEvent('TriggerFilem');
}
add this to js:
window.addEventListener('TriggerFilem', e => {
$("#trigger").unbind("click").bind("click", function () {
$("#file_input").click();
});
});
and in the view:
<div wire:click="fileTrigger()" id="trigger">click me</div>
<input type="file" id="file_input" wire:model="photo">
Edit:
If you don't want to use jquery, i was testing a solution on js only:
document.getElementById('trigger').addEventListener("click",() => {
document.getElementById('file_input').click();
});
hope it helps!
I am using bootstrap tags input https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/ and implemented as well successfully. I just want to made it required field so that each user submit form with the technology tags.
<div class="col-lg-6">
<label class="">Primary Skills (Note: Add comma separated) <span class="text-danger">*</span></label>
<input class="form-control" type="text" id="primaryskill" name="seeker_primary_skills" required>
<b class="tooltip tooltip-top-right">This is a required</b>
</div>
Here is the screenshot for this.
check return on form submit
<form onsubmit="return checktag()">
Javascript/Jquery Code
function checktag(){
if($("#primaryskill").val() == ''){
alert("Tags Required"); //Here you can simple alert or change input css with
border red with msg with the help of jquery
return false;
}else{
return true;
}
}
I'm trying to create a form for entering Computer or Televisions as electronics. I want first the user to select which of the two he's entering, and depending on which one he chooses, he's going to have different stuff to fill in.
I tried to write this but it doesn't work. I get an error on $answer= $_POST['type'];
Please let me know what is wrong, I'm kind of new at php. Thanks.
<div class="form-group">
<h3 style="color:blue;">Type of Item</h1>
<form name ="form1" method ="post">
<input type="radio" name="type" value="Computer"> Computer<br>
<input type="radio" name="type" value="Television"> Television<br>
</form>
</div>
<?php
$answer = $_POST['type'];
if ($answer == "Computer") {
//show stuff
}
else {
//show other stuff
}
?>
$_POST will be empty until the form is actually submitted. Your form does not have a submit button. That said, this type of task is usually better done in javascript since it doesn't require a full page reload just to open up the next set of options in a form.
Here's an example of how this might work using a simple javascript function:
<script type="text/javascript">
function toggleOptions() {
if ( document.getElementById('type_Computer').checked ) {
document.getElementById('nextSetOfComputerOptions').style.display = '';
} else {
document.getElementById('nextSetOfComputerOptions').style.display = 'none';
}
}
</script>
<input type="radio" name="type" id="type_Computer" value="Computer" onclick="toggleOptions();">
<div id="nextSetOfComputerOptions" style="display:none;">
<!-- more form fields -->
</div>
Hi in a wizard on a confirmation tab i try to get the content from the tinymce editor. But it doesn't work. With normal textareas it works without any problems.
Example normal Textarea:
<div class="control-group">
<label class="control-label">MyValue<span class="required">*</span></label>
<div class="controls">
<textarea class="span12 m-wrap" style="max-width:100%;" name="MyValue" rows="7"></textarea>
</div></div>
Code to show text from textarea on the confirmation page:
<div class="control-group">
<label class="control-label">MyValue</label>
<div class="controls">
<span class="text display-value" data-display="MyValue"></span>
</div>
</div>
My JavaScript code:
var displayConfirm = function() {
$('.display-value', form).each(function(){
var input = $('[name="'+$(this).attr("data-display")+'"]', form);
if (input.is(":text") || input.is("textarea")) {
$(this).html(input.val());
} else if (input.is("select")) {
$(this).html(input.find('option:selected').text());
} else if (input.is(":radio") && input.is(":checked")) {
$(this).html(input.attr("data-title"));
} else if ($(this).attr("data-display") == 'htmlinhalt') {
$(this).html($('[name="htmlinhalt"]', form).val());
}
});
}
But why it doesn't work with a tinymce textarea? I think I must get the content directly from tinymce not from textarea, but how?
Try
tinymce.get('your_textarea_id').getContent();
I had exactly the same problem and the previous answer wouldn't work for me either. The problem for me was that my textarea had no id. After giving it an id I was able to get the content easily with the previous answer (albeit with capital 'MCE'):
tinyMCE.get('your_textarea_id').getContent();
So you want to add an extra line into your if statement. If you give the textarea the same id as its name then this should work:
var displayConfirm = function() {
$('.display-value', form).each(function(){
var input = $('[name="'+$(this).attr("data-display")+'"]', form);
if (input.is(":text")) {
$(this).html(input.val());
} else if (input.is("textarea")) {
$(this).html(tinyMCE.get($(this).attr("data-display")).getContent());
} else if (input.is("select")) {
$(this).html(input.find('option:selected').text());
} else if (input.is(":radio") && input.is(":checked")) {
$(this).html(input.attr("data-title"));
} else if ($(this).attr("data-display") == 'htmlinhalt') {
$(this).html($('[name="htmlinhalt"]', form).val());
}
});
}
You can get the raw contents (with html tags), or only the text (html striped). The default format returned with function getContent() is the raw.
<textarea id="MyValue" name="MyValue"></textarea>
<div>
[getRawContents]
[getTextContents]
[getContents]
</div>
I use MyValue since you use in the your question. Change for your_textarea_id if needed.
More information for tinyMCE 3.x in API 3
More information for tinyMCE 4.x in API 4
So I have this html code
<div id="wrap">
<div id="header">
</div>
<div id="content">
<form method="POST" action="code.php">
Name:
<input type="text" name="name" size="50">
<input type=submit value="Get Code">
</form>
</div>
<div id="footer">
</div>
Is it possible to load the code.php after the user clicks submit into the #content div?
Essentially, what I want is when the user clicks the submit button, the code.php after processing is loaded onto the same #content div.
So let say in my code.php, after processing the inputted data, I come up with this lilne of code,
<?php
some processing code here;
$name = 'john';
echo $name;
?>
So then after hitting submit, user would see
<div id="content">
john
</div>
Hope I didn't complicate my question by repeating myself, please let me know if this is possible with javascript, php or whatever.
Thanks for the read!
#JohnP yes, $.load is a good solution. However, you'll need to send the form data in the request:
UPDATED [3] for sending a POST with multiple fields and checkboxes:
$('form').submit(function(){
// create an object to send as a post
var form = this,
fields = form.elements,
el,
post = {};
for (var i = fields.length; i--; ) {
el = fields[i];
if (el.name) {
switch (el.type) {
case 'checkbox':
case 'radio':
post[el.name] = (el.checked) ? el.value : '';
break;
default:
post[el.name] = el.value;
}
}
}
// send the form data in the load request...
$('#content').load(this.action, post);
return false;
});
This will send the data as a POST.
Since you've tagged jQuery, I'll use a jQuery example
$(document).ready(function(){
$('form').submit(function(){
$('#content').load('code.php');
return false;
})
})
This makes a couple of assumptions here
This assumes that code.php is in the same path that you are in now.
There is only one form in the page.
As #johnhunter points out, this example obviously won't work with post. You can send the post data along with the method. See here for usage : http://api.jquery.com/load
EDIT
Here's a fiddle example : http://jsfiddle.net/jomanlk/J4Txg/
It replaces the form area with the content from jsfiddle/net/echo/html (which is an empty string).
NOTE 2 Make sure to include the code in $(document).ready() or include it at the bottom of the page. It goes without saying you need jQuery in your page to run this.
You might want to check out jquery form plugin http://jquery.malsup.com/form/#
in simple way use
<div id="content">
if(isset($_POST['submit'] && !empty($_POST) )
{
// do your all post process
$name ='John';
echo $name;
}
else {
<form method="POST" action="$_SERVER['PHP_SELF']">
<label for="uname" >Name:</label><input type="text" name="uname" id="uname" size="50">
<input type=submit value="Get Code" name="submit">
</form>
}
</div>