Question

动态显示表单并提供id，以便我可以找出它来自哪个表单...

这是php / html表单

<div class="col-sm-4 text-center">
    <!-- Task Name -->
    <div><img src="{{ URL::asset('public/mealpics') }}/{{ $meal->picture }}" /></div>
    <div>{{ $meal->name }} by {{ $meal->author }}</div>
    <div>Rating: {{ $meal->rating }}</div>
    <div>Cal: {{ $meal->calories }} Fat: {{ $meal->fat }} Chol: {{ $meal->cholesterol }}</div>
    <div>Sodium: {{ $meal->sodium }} Sugar: {{ $meal->sugar }}</div>
    <div>{{ $meal->created_at }}</div>
    <div>
        <form action="/mealtrist" method="post" enctype="multipart/form-data">
            <input type="hidden" name="_token" value="{!! csrf_token() !!}">
            <input type="hidden" class="form-control" id="onPlan{{$meal->id}}" name="onPlan"
                   value="{{ $meal->id }}">
            <button id="submit_btn" data-mealid="{{$meal->id}}" type="submit" class="btn btn-default">Add To Plan</button>
        </form>
    </div>
</div>

和jquery ajax

$(document).ready(function () {         
    $('submit_btn').click(function(event) {
        event.preventDefault();
        var diffValue = $(event.currentTarget).attr("data-mealId");
        var mealId = '#onPlan' + diffValue;
        jQuery.ajax({
            url : '<?php echo URL::to('mealtrist') ?>',
            type : 'POST',
        data : {
            onPlan: diffValue},
            });
    });
});

我也试过这个......

$(document).ready(function () {         
    $('#submit_btn').click(function(event) {
        event.preventDefault();
        var diffValue = $(event.currentTarget).attr("data-mealId");
        var mealId = '#onPlan' + diffValue;
        $('#form').submit(function (e) {
            jQuery.ajax({
                url : '<?php echo URL::to('mealtrist') ?>',
                type : 'POST',
            data : $(mealId).serialize(),               success : function( response ) {
                $('#added').empty();
                $(response).appendTo("#added");
            } 
        });

        e.preventDefault();
        });
    });
});

我也试过

('#form').on('submit', function (e) {
    ///i've even tried the e.preventDefault(); here but I think that prevents the code below from sending.
    ////code
    e.preventDefault();
});

这似乎都不起作用。我使用larvel 5.1并尝试在页面上提交表单并将一个输入的值发送到控制器，以便我可以获取该ID并使用它来存储数据库中另一个表的信息。它当然有效，但它也刷新了页面......这就是我正在寻找的东西。页面显示为空白，我明白这种情况正在发生，因为我没有在控制器中返回任何内容......这没关系，因为当我在控制器中返回同一页面时，它仍然显示页面令人耳目一新......这就是我想要摆脱的东西。我只想通过ajax发送数据，所以我可以使用它...没有页面刷新。我不明白我为什么会遇到这个问题。我已经在这里阅读了很多关于防止刷新的其他问题，但没有一个解决方案有效。有什么想法吗？

Answer 1

由于您是通过ajax（您的第一个jquery示例）自己处理POST，请尝试更改类型＆＃34;提交＆＃34;只需输入＆＃34;按钮＆＃34;

Answer 2

这应该有帮助

var svg = d3.select(chartname).select("svg").append("g").attr("class","l" + yValues)

    var line = d3.svg.line()
        .interpolate("linear") // linear, cardinal or monotone are good
        .x(function(d) {return xTime(d3.time.hour.offset(new Date(d.x),5))})
        .y(function(d) {return y(d.y)});

    var zeroline = d3.svg.line()
        .interpolate("monotone") // linear, cardinal or monotone are good
        .x(function(d) {return xTime(d3.time.hour.offset(new Date(d.x),5))})
        .y(function(d) {return y(0)});
    // Add a title:
    svg.append("svg:text")
            .attr("x", width/4)
            .attr("y", 20)
            .attr("style", "font-size: 12; font-family: Helvetica, sans-serif")
            .text("");


    svg.selectAll("g.yaxis").selectAll(".tick")
        .each(function(d) {
          if (d === 0) {
            this.remove();
          }
        });

    var activityLine = svg.selectAll(".activity")
        .data(inputdata[yValues])
        .enter()
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .attr("class", "activity");


       activityLine.append("path")
        .attr("class", "line")
        .transition("d")
        .delay(200)
        .attr("d", zeroline(inputdata[yValues]))
        .style("stroke", athenacolors[yValues])
        .attr("fill", "none")
        .attr("stroke-opacity", 0)
        .attr("stroke-width", .8)
        .attr("shape-rendering", "geometricPrecision");

      activityLine
        .append("circle")
        .style("cursor", "pointer")
        .on("mouseover", function(d) {
          d3.select(this).attr("r", "10")
        })
        .on("mouseout", function(d) {
          d3.select(this).attr("r", 3.4)
        })
        .attr("stroke", function(d) {return athenacolors[yValues]; })
        .attr("cx", function(d) {
          return xTime(d3.time.hour.offset(new Date(d.x),5));
        })
        .attr("cy", function(d) {
          return y(d.y);
        })
        .attr("stroke-width", 4.8)
        .attr("fill", "white")
        .attr("r", 10)
        .attr("stroke-opacity", 0.0001)
        .attr("fill-opacity", 0.0001)
        .transition("e").delay(200).duration(1500)
        .attr("stroke-opacity", 1)
        .attr("fill-opacity", 1)
        .attr("stroke-width", 3.8)
        .attr("r", 3.4);


svg.selectAll(".activity").selectAll("circle")
                .append("svg:title")
        .text(function(d) {
          return d.y;
        })


svg.selectAll("path.line")
  .data(inputdata[yValues])
  .transition("f")
  .delay(500)
  .duration(100)
  .attr("stroke-opacity", 1)
  .attr("shape-rendering", "geometricPrecision")
  .transition()
  .delay(600)
  .duration(800)
  .attr("d", line(inputdata[yValues]))



d3.select(chartname).select("svg").selectAll("circle").style("opacity",1);
d3.select(chartname).select("svg").selectAll("circle").transition("cb").delay(400).duration(500).attr("r",10).transition("cb2").ease("bounce").delay(900).duration(500).attr("r",3.4);

Answer 3

form没有ID #form。请改为form。

$('form').on('submit', function (e) {
    e.preventDefault();
});

Answer 4

首先将id设置为form -

<form id="MyForm" action="/mealtrist" method="post" enctype="multipart/form-data">

然后使用它 -

$(document).ready(function() {
    $("#MyForm").on('submit', function(e) {
        e.preventDefault();                

    })
});

Answer 5

我尝试了以上所有表单提交的答案。 return false没有工作，event.preventDefault（）不起作用。在我的问题中，我也不是那么清楚。我真的认为提交表单比使用ajax更安全，所以这就是我尝试使用表单的原因。我最后只使用ajax发送数据。

        $(document).ready(function () { 
        $('.submit_btn').click(function(event) {
        event.preventDefault();
        var diffValue = $(event.currentTarget).attr("data-mealId"); 
            jQuery.ajax({
                url : '<?php echo URL::to('meals') ?>',
                type : 'POST',
                data : {
                        onPlan: diffValue},
/*              success : function( response ) {
                    $('#added').empty();
                    $(response).appendTo("#added");
                } */
            });
    });
});

完美无缺。

无法从刷新页面

5 个答案: