Jak za pomocą jquery przeniść wartość na pole tekstowe

0

Mam taki problem nie wiem jak prznieść wartość z diva na pole tekstowe typ text próbowałem takich sztuczek

//alert("dobrze");
var d = $("#name").text();
//alert(d);
$("#pole_formularza").html(d);

i jeszcze

$("#name").append($("#pole_formularza"));

1

Chodzi ci o coś takiego?

<div id="tmstatus">bla bla</div>    
<input id="textBoxId" name="tm_name" >   



<script type="text/javascript">
	var div_val = jQuery("#tmstatus").html();
	jQuery("input[name='tm_name']").val(div_val);
</script>

0

Udało się tylko musiałem jeszcze coś takiego dorobić

;```jquery
$("#name").hide()

0

Teraz po zmianie na boostrap 4 nie chcę działać.

0

Jednak wszystko działa dobrze, a jak zrobić tak,żeby jak się najedzie na input to się w tym inpucie pokazywał ten tekst a jak się najedzie na pozostałą część to się ten input chowa w tym formie i tekst pokazuje się na górze.

0

Coś takiego?

    <div style=" visibility: hidden;" id="tmstatus">bla bla</div>    
    <input id="textBoxId" name="tm_name" >   
 
    <script type="text/javascript">
        var div_val = jQuery("#tmstatus").html();
        jQuery("input[name='tm_name']")
            .mouseenter(function(){
                $(this).val(div_val);
            })
            .mouseleave(function(){
                $(this).hide();
                $("#tmstatus").css( "visibility", "visible");
            }); 
    </script>

0

Ale to w ogóle nie działa tak jak powinno.

0

pol90 napisał(a):

Jednak wszystko działa dobrze, a jak zrobić tak,żeby jak się najedzie na input to się w tym inpucie pokazywał ten tekst a jak się najedzie na pozostałą część to się ten input chowa w tym formie i tekst pokazuje się na górze.

Tutaj jest przykład działania tego kodu:
https://jsfiddle.net/jcumd7mo/3/

To jak to ma działać?

0

Ale tu chodzi o to, żby pole tekstowe nie znikało, a po na jechaniu na body ma się znowu znaleźć w polu tekstoym.

0

Czyli ma pojawiać się i znikać zawartość pola tekstowego?

Przykład

0

jawlo napisał(a):

Czyli ma pojawiać się i znikać zawartość pola tekstowego?

Przykład

Tak a obraz pojawiać się na górze.

0

Obraz? znaczy się kopia?

https://jsfiddle.net/v9r0802r/2/

0

Wszystko dobrze tylko, że to nie chce działać u mnie na mojej maszynie.

0

Co to za maszyna? Jakie środowisko?

0

Debian 8.4 firefox 52

0

I jeszcze bootstrap...
Czyli problem leży w środowisku. W tym nie pomogę. Powodzenia

0

A co ci konsola wyświetla? Jak błąd?

1

NitroCrash napisał(a):

A co ci konsola wyświetla? Jak błąd?

http://127.0.0.1/81/formularz/bootstrap-3/css/bootstrap-theme.min.css

0

Taki załącznik

0

A jak w ogóle powinien być podłączony boostrap 4 bo mi taką ilość błędów wyrzuca, a ja ma tak go załadowane

<link rel="stylesheet" href="./bootstrap4/css/bootstrap.min.css">

<script src="./bootstrap4/js/bootstrap.min.js"></script>

0

Modyfikowałeś ten plik ? Może z cdna skorzystaj :
Najpierw ładujesz jquery i popper:


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>

Później ładujesz bootstrapa

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

Dodatkowo wysyłam Ci odnośnik do oficjalnej strony :
https://getbootstrap.com/docs/4.1/getting-started/download/

0

NitroCrash napisał(a):

Modyfikowałeś ten plik ? Może z cdna skorzystaj :
Najpierw ładujesz jquery i popper:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
Później ładujesz bootstrapa
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
Dodatkowo wysyłam Ci odnośnik do oficjalnej strony :
https://getbootstrap.com/docs/4.1/getting-started/download/
Też nie działa, a najlepsze jest to, że jak usunąłem definicje bootstrapa to tez nie działało, a przecież ten skrypt nie korzysta z bootstrapa.

0

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>



    <script type="text/javascript">
    //alert("dobrze");
var div_val = jQuery("#tmstatus").html();
jQuery("input[name='tm_name']")
	.mouseenter(function(){
    $(this).val(div_val); 
    $("#tmstatus").css( "visibility", "hidden");
  })
  .mouseleave(function(){
    $(this).val("");
    $("#tmstatus").css( "visibility", "visible");
  });
    </script>
<link rel="stylesheet" href="style.css" type="text/css" />
   <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 col-xs-3">
     <div style=" visibility: hidden;" id="tmstatus">bla bla</div>   
	<input id="textBoxId" name="tm_name" class="form-control" >    
	<hr class=hr>
      </div>
      <div class="col-md-3 col-xs-3">
      asdasd
	<input type=text name=dd class=form-control>
	<hr class=hr>
      </div>
     </div>
    </div>

1

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
    crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
    crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css" type="text/css" />


<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 col-xs-3">
            <div style=" visibility: hidden;" id="tmstatus">bla bla</div>
            <input id="textBoxId" name="tm_name" class="form-control">
            <hr class=hr>
        </div>
        <div class="col-md-3 col-xs-3">
            asdasd
            <input type=text name=dd class=form-control>
            <hr class=hr>
        </div>
    </div>
</div>
<script type="text/javascript">
    var div_val = jQuery("#tmstatus").html();
    jQuery("input[name='tm_name']")
        .mouseenter(function () {
            $(this).val(div_val);
            $("#tmstatus").css("visibility", "hidden");
        })
        .mouseleave(function () {
            $(this).val("");
            $("#tmstatus").css("visibility", "visible");
        });
</script>

Na końcu daje się skrypty bo się dom nie załadował.

0

A ja bym chciał jeszcze, żeby się dało wpisać jakiś text bo ciągle się wpisuje to bla bla i próbowałem czegoś takiego, ale to nie do końca działa

    var div_val = jQuery("#tmstatus").html();
    alert("dobrze");
    
    jQuery("input[name='tm_name']")
    
        .mouseenter(function () {
        if (($("#tmstatus").text() == "") || ($("#tmstatus").text() == "bla bla")) {
            $(this).val(div_val);
            $("#tmstatus").css("visibility", "hidden");
            }
        })
        .mouseleave(function () {
        if (($("#tmstatus").text() == "") || ($("#tmstatus").text() == "bla bla")) {
            $(this).val("");
            $("#tmstatus").css("visibility", "visible");
            }
            
        });

I chciałbym, żeby to kliknięciem a nie opuszczeniem myszki się dało zrobić.

0

Jak klikniesz to aktywujesz pole i możesz w nim pisać.
Jeżeli chcesz aby zawartość pola była przeniesiona to zobacz ten przykład:
https://jsfiddle.net/fahgd16e/2/

0

Jest trochu z tym zabawy. Główny efekt uzyskasz w ten sposób: https://jsfiddle.net/j29u4jLg/10/
Natomiast animacje uzyskasz funkcją.... animate(). https://www.w3schools.com/jquery/jquery_animate.asp

2

Ja bym w tym wypadku nie robił tego na JQuery. Po co, jak można samym cssem :)
https://codepen.io/kaezarrex/pen/EmzVLM

Jak za pomocą jquery przeniść wartość na pole tekstowe

pol90 napisał(a):

jawlo napisał(a):

NitroCrash napisał(a):

NitroCrash napisał(a):

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami